1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [DOM]

2
00:00:02,000 --> 00:00:04,000
[టామీ MacWilliams] [హార్వర్డ్ విశ్వవిద్యాలయం]

3
00:00:04,000 --> 00:00:07,000
[ఈ CS50 ఉంది.] [CS50.TV]

4
00:00:07,000 --> 00:00:10,000
ఈ వీడియో లో మేము DOM పరిశీలించి చేయబోతున్నామని.

5
00:00:10,000 --> 00:00:14,000
ఒక బ్రౌజర్ ఒక వెబ్ డౌన్లోడ్, ఏదో ఒకవిధంగా అది మెమరీలో ప్రాతినిధ్యం అవసరం.

6
00:00:14,000 --> 00:00:17,000
డాక్యుమెంట్ ఆబ్జెక్ట్ మోడల్, లేదా DOM,

7
00:00:17,000 --> 00:00:20,000
బ్రౌజర్ మెమరీ లో ఒక వెబ్ పేజీని ప్రాతినిధ్యం వివరిస్తుంది.

8
00:00:20,000 --> 00:00:24,000
ఈ వీడియో లో, మేము, JavaScript సందర్భంలో DOM వద్ద టేక్ ఎ లుక్ వస్తుంది

9
00:00:24,000 --> 00:00:26,000
కానీ DOM ఒక భాషా స్వతంత్ర భావన.

10
00:00:26,000 --> 00:00:30,000
ఉదాహరణకు, PHP వంటి దాని స్వంత DOM అమలు ఉంది.

11
00:00:30,000 --> 00:00:32,000
అయితే, DOM తరచుగా జావాస్క్రిప్ట్ ఉపయోగిస్తారు

12
00:00:32,000 --> 00:00:36,000
జావాస్క్రిప్ట్ మాకు ఎగిరి వెబ్పేజ్ విషయాలను మార్చడానికి అనుమతిస్తుంది నుండి,

13
00:00:36,000 --> 00:00:39,000
మరియు DOM మాకు ఒక వెబ్ పేజీ యొక్క భాగాలు యాక్సెస్ అనుమతిస్తుంది.

14
00:00:39,000 --> 00:00:43,000
యొక్క ఒక ఉదాహరణ వెబ్ పరిశీలించి లెట్.

15
00:00:43,000 --> 00:00:48,000
సరే, ఇప్పుడు ఈ పేజీ DOM ప్రాతినిధ్యం ఎలా చూడండి యొక్క తెలపండి.

16
00:00:48,000 --> 00:00:51,000
మరియు ప్రతి చెట్టు ఎగువన ఒక రూట్ నోడ్ ఉండాలి.

17
00:00:51,000 --> 00:00:54,000
ఈ పత్రం కోసం, HTML మూలకం రూట్ కణుపు

18
00:00:54,000 --> 00:00:56,000
ఎందుకంటే కనిపించే మొదటి ఎలిమెంట్.

19
00:00:56,000 --> 00:01:00,000
యొక్క మా చెట్టు ఒక రూట్ నోడ్ జోడించడానికి అనుమతిస్తుంది.

20
00:01:00,000 --> 00:01:03,000
యొక్క మళ్ళీ HTML పత్రం పరిశీలించి లెట్.

21
00:01:03,000 --> 00:01:09,000
శరీరం ట్యాగ్ HTML టాగ్ లోపలి యున్న అని గమనించండి.

22
00:01:09,000 --> 00:01:14,000
ఈ శరీరం మూలకం HTML మూలకం కుమారుడిగా అర్థం.

23
00:01:14,000 --> 00:01:17,000
మేము శరీరం ఆకు ద్వారా మా DOM ట్రీ ఈ సూచిస్తుంది

24
00:01:17,000 --> 00:01:20,000
HTML నుండి అవరోహణ.

25
00:01:20,000 --> 00:01:22,000
యొక్క అలా వీలు.

26
00:01:22,000 --> 00:01:24,000
మేము HTML కింద శరీరం కలిగి.

27
00:01:24,000 --> 00:01:28,000
ఇప్పుడు మేము, శరీరం దాని స్వంత 2 పిల్లలు చూడగలరు

28
00:01:28,000 --> 00:01:31,000
h1 మూలకం మరియు ఉల్ మూలకం.

29
00:01:31,000 --> 00:01:34,000
ఈ మేము ఆ అంశాలు రెండు కనెక్ట్ అంటే

30
00:01:34,000 --> 00:01:36,000
శరీరం అంశానికి, కాబట్టి యొక్క ఆ తెలియజేసేలా.

31
00:01:36,000 --> 00:01:40,000
మేము ఒక h1 మరియు ఒక ఉల్ కలిగి.

32
00:01:40,000 --> 00:01:43,000
చివరగా, ఉల్ మూలకం, 3 పిల్లలు

33
00:01:43,000 --> 00:01:50,000
మరియు ఈ మా DOM ట్రీ పూర్తి చేస్తుంది, కాబట్టి li, li, li జోడించండి చేసుకుందాం.

34
00:01:50,000 --> 00:01:56,000
ఈ మా DOM ట్రీ పూర్తి, మరియు ఈ బ్రౌజర్ మీ వెబ్ నిల్వ ఎలా.

35
00:01:56,000 --> 00:02:02,000
ఇప్పుడు మేము జావాస్క్రిప్ట్ ఉపయోగించి ఈ చెట్టు ప్రయాణించి ఎలా పరిశీలించి వీలు.

36
00:02:02,000 --> 00:02:10,000
మేము పత్రం అనే ప్రత్యేక జావాస్క్రిప్ట్ వేరియబుల్ ఉపయోగించి ఈ చెట్టు యాక్సెస్ చేయవచ్చు.

37
00:02:10,000 --> 00:02:13,000
ఈ డాక్యుమెంట్ ఆబ్జెక్ట్ ఒకటి ఆస్తి

38
00:02:13,000 --> 00:02:16,000
శరీరం ఆస్తి ఉంది, మరియు ఈ వస్తువు ప్రాతినిధ్యం

39
00:02:16,000 --> 00:02:19,000
మా ఉదాహరణ వెబ్పేజీలో శరీరం మూలకం.

40
00:02:19,000 --> 00:02:23,000
మేము, శరీరం మూలకం పిల్లలు అన్ని పొందుటకు కోరుకుంటే

41
00:02:23,000 --> 00:02:26,000
ఇది మిమ్మల్ని గుర్తుంచుకునేందుకు ఉంటే, ఆ h1 ట్యాగ్ మరియు ఉల్ ట్యాగ్

42
00:02:26,000 --> 00:02:37,000
మేము document.body.childNodes చెప్పగలను.

43
00:02:37,000 --> 00:02:41,000
మరియు ఈ మాకు h1 మూలకం ఇవి రెండూ ఒక అర్రే తిరిగి ఇస్తుంది

44
00:02:41,000 --> 00:02:46,000
మరియు వారు శరీరం యొక్క ప్రత్యక్ష పిల్లలు ఉన్నకారణంగా ఉల్ మూలకం.

45
00:02:46,000 --> 00:02:50,000
మేము ఉల్ మూలకం ప్రాతినిధ్యం ఒక వేరియబుల్ సృష్టించడానికి అనుకుంటే

46
00:02:50,000 --> 00:02:57,000
మేము ఇక్కడ vrr ఉల్ = ఈ కోడ్ చెప్పగలను

47
00:02:57,000 --> 00:03:00,000
మరియు ఇప్పుడు childNodes కేవలం ఒక అర్రే ఎందుకంటే

48
00:03:00,000 --> 00:03:07,000
మేము [1] తో లోకి ఇండెక్స్ ఆ శ్రేణిని రెండవ మూలకం పొందుటకు. చేయవచ్చు

49
00:03:07,000 --> 00:03:13,000
ఈ కొత్త ఉల్ వస్తువు తో మేము దాని ID వంటి మూలకం వివిధ లక్షణాలు యాక్సెస్ చేయవచ్చు.

50
00:03:13,000 --> 00:03:17,000
మేము స్ట్రింగ్ జాబితా సమానంగా ఉండాలి జరగబోతోంది ఆ ul.id చెప్పుకోవాలంటే

51
00:03:17,000 --> 00:03:20,000
మేము మా HTML పేజీ లో ఏమి ఎందుకంటే.

52
00:03:20,000 --> 00:03:24,000
మేము కూడా ఈ విషయంలో అవతరిస్తుంది ఇది, దాని tagName పొందవచ్చు

53
00:03:24,000 --> 00:03:32,000
మూలకం యొక్క ఏ రకం ఈ సందర్భంలో, ఒక ఉల్ లో, ఉంది.

54
00:03:32,000 --> 00:03:36,000
మేము కూడా దాని మాతృ లేదా పైన నోడ్, పొందవచ్చు ఈ సందర్భంలో

55
00:03:36,000 --> 00:03:38,000
శరీరం మూలకం అవతరిస్తుంది.

56
00:03:38,000 --> 00:03:43,000
మేము document.body అదే చేస్తాడు అని. ParentNode, చెప్పుకోవాలంటే.

57
00:03:43,000 --> 00:03:46,000
కోర్సు యొక్క, ఈ ఉల్, దాని స్వంత పిల్లలు

58
00:03:46,000 --> 00:03:50,000
కాబట్టి మేము ఇంకా చెప్పగలను. childNodes ఈ అంశం మీద,

59
00:03:50,000 --> 00:03:55,000
మా జాబితాలో 3 అంశాలు ఉన్నాయి ఎందుకంటే మరియు ఈ శ్రేణి ఇప్పుడు పొడవు 3 ఉండాలి.

60
00:03:55,000 --> 00:04:02,000
చివరగా, బహుశా చాలా ఉపయోగకరమైన లక్షణం అవతరిస్తుంది. InnerHTML,

61
00:04:02,000 --> 00:04:06,000
మరియు ఈ జాబితా వాస్తవ విషయాలను ఉంటుంది మా ఉదాహరణ పేజీ లో

62
00:04:06,000 --> 00:04:08,000
ఆ 3 li టాగ్లు ఉన్నాయి.

63
00:04:08,000 --> 00:04:11,000
కోర్సు యొక్క, మేము ఒక పెద్ద పత్రం ఉంటే, అంశాలు యాక్సెస్

64
00:04:11,000 --> 00:04:14,000
ఈ పద్ధతిలో నిజంగా గజిబిజిగా అవతరిస్తుంది ఎందుకంటే

65
00:04:14,000 --> 00:04:17,000
చివరికి మేము document.body.childNodes వంటి విషయాలు చెప్పటానికి ఉంటుంది

66
00:04:17,000 --> 00:04:21,000
బ్రాకెట్ ఏదో. కాకుంటే బ్రాకెట్ ఏదో childNodes

67
00:04:21,000 --> 00:04:23,000
అది నిజంగా గజిబిజిగా పొందుటకు జరగబోతోంది.

68
00:04:23,000 --> 00:04:27,000
బదులుగా మేము నిజంగా చేయాలనుకుంటున్నారా ఉంది, పత్రం ప్రశ్న చెయ్యగలరు

69
00:04:27,000 --> 00:04:30,000
కాబట్టి మేము కీలక పదాలను ఉపయోగించి ఇంటర్నెట్ విషయాలు శోధించిన ఇష్టం

70
00:04:30,000 --> 00:04:33,000
మేము నిజంగా క్లుప్తమైన ఈ పత్రం శోధించడం విధంగా అవసరం

71
00:04:33,000 --> 00:04:37,000
మనం శ్రద్ధ ఎలిమెంట్లను మాత్రమే నదీ ప్రవాహానికి అడ్డంగా ప్రయాణం లేకుండా తిరిగి

72
00:04:37,000 --> 00:04:39,000
దిగువ మొత్తం చెట్టు టాప్.

73
00:04:39,000 --> 00:04:42,000
అదృష్టవశంగా, ఆధునిక బ్రౌజర్లలో మాకు దీన్ని అనుమతిస్తాయి

74
00:04:42,000 --> 00:04:47,000
querySelectorAll అనే ప్రత్యేక ఫంక్షన్,

75
00:04:47,000 --> 00:04:49,000
మరియు ఈ ఫంక్షన్ ఒక వాదన పడుతుంది

76
00:04:49,000 --> 00:04:53,000
ఒక CSS సెలెక్టర్ ఉంది, మరియు అది మాకు తిరిగి జరగబోతోంది

77
00:04:53,000 --> 00:04:56,000
ఆ సెలెక్టర్ మ్యాచ్ మూలకాలను అన్ని.

78
00:04:56,000 --> 00:04:59,000
మీరు DOM విచారణ కోసం ఒక సరికొత్త సింటాక్స్ తెలుసుకోవడానికి అవసరం లేదు అంటే.

79
00:04:59,000 --> 00:05:02,000
బదులుగా మీరు ఇప్పటికే తెలుసు జ్ఞానం దరఖాస్తు చేసుకోవచ్చు

80
00:05:02,000 --> 00:05:04,000
CSS సెలెక్టర్లు గురించి.

81
00:05:04,000 --> 00:05:07,000
యొక్క పత్రం విచారణ కొన్ని ఉదాహరణలను చూడాల్సిన తీసుకుందాం.

82
00:05:07,000 --> 00:05:13,000
మేము querySelectorAll చెప్పటానికి మరియు ఈ స్ట్రింగ్ # foo పాస్ ఉంటే

83
00:05:13,000 --> 00:05:18,000
మాకు ID foo తో మూలకం తిరిగి ఇవ్వాలని జరగబోతోంది.

84
00:05:18,000 --> 00:05:23,000
మీరు కూడా document.getElementByID చెప్పగలను

85
00:05:23,000 --> 00:05:28,000
ఆ హాష్ ట్యాగ్ లేకుండా స్ట్రింగ్ foo పాస్.

86
00:05:28,000 --> 00:05:31,000
మీరు అదే ఖచ్చితమైన వస్తువు తిరిగి చేయబోతున్నామని.

87
00:05:31,000 --> 00:05:37,000
బదులుగా మేము document.querySelectorAll కు స్ట్రింగ్. బార్ పాస్ ఉంటే

88
00:05:37,000 --> 00:05:42,000
మేము తరగతి బార్ తో అన్ని మూలకాలు తిరిగి చేయబోతున్నామని.

89
00:05:42,000 --> 00:05:45,000
మేము కూడా CSS సెలెక్టర్లు మిళితం చేయవచ్చు.

90
00:05:45,000 --> 00:05:51,000
మేము స్ట్రింగ్ # foo img లో పాస్ ఉంటే

91
00:05:51,000 --> 00:05:54,000
చిత్రం అన్ని మూలకాలు మాకు తిరిగి ఇవ్వాలని జరగబోతోంది ఆ

92
00:05:54,000 --> 00:05:58,000
ఆ ID foo తో మూలకం పిల్లలు.

93
00:05:58,000 --> 00:06:03,000
మీరు చూడగలరు గా, కలపడం సెలెక్టర్లు మనం కొన్ని నిజంగా శక్తివంతమైన శోధన సామర్థ్యాలను కలిగి ఉంటారు.

94
00:06:03,000 --> 00:06:06,000
కానీ హుడ్ కింద, DOM, నిజంగా కేవలం ఒక వృక్షం

95
00:06:06,000 --> 00:06:10,000
మరియు ఈ సెలెక్టర్లు కొంతవరకు ఆ దూరంగా మాకు వియుక్త అనుమతిస్తాయి

96
00:06:10,000 --> 00:06:14,000
మేము ఎల్లప్పుడూ DOM ట్రీ యొక్క మొత్తం నిర్మాణం గురించి పట్టించుకోను ఎందుకంటే.

97
00:06:14,000 --> 00:06:18,000
ఒక శీఘ్ర DOM యొక్క సారాంశం, మరియు మాకు సహాయపడినందుకు ధన్యవాదాలు ఉంది.

98
00:06:18,000 --> 00:06:20,000
[CS50.TV]