[Powered by Google Translate] [DOM] [టామీ MacWilliams] [హార్వర్డ్ విశ్వవిద్యాలయం] [ఈ CS50 ఉంది.] [CS50.TV] ఈ వీడియో లో మేము DOM పరిశీలించి చేయబోతున్నామని. ఒక బ్రౌజర్ ఒక వెబ్ డౌన్లోడ్, ఏదో ఒకవిధంగా అది మెమరీలో ప్రాతినిధ్యం అవసరం. డాక్యుమెంట్ ఆబ్జెక్ట్ మోడల్, లేదా DOM, బ్రౌజర్ మెమరీ లో ఒక వెబ్ పేజీని ప్రాతినిధ్యం వివరిస్తుంది. ఈ వీడియో లో, మేము, JavaScript సందర్భంలో DOM వద్ద టేక్ ఎ లుక్ వస్తుంది కానీ DOM ఒక భాషా స్వతంత్ర భావన. ఉదాహరణకు, PHP వంటి దాని స్వంత DOM అమలు ఉంది. అయితే, DOM తరచుగా జావాస్క్రిప్ట్ ఉపయోగిస్తారు జావాస్క్రిప్ట్ మాకు ఎగిరి వెబ్పేజ్ విషయాలను మార్చడానికి అనుమతిస్తుంది నుండి, మరియు DOM మాకు ఒక వెబ్ పేజీ యొక్క భాగాలు యాక్సెస్ అనుమతిస్తుంది. యొక్క ఒక ఉదాహరణ వెబ్ పరిశీలించి లెట్. సరే, ఇప్పుడు ఈ పేజీ DOM ప్రాతినిధ్యం ఎలా చూడండి యొక్క తెలపండి. మరియు ప్రతి చెట్టు ఎగువన ఒక రూట్ నోడ్ ఉండాలి. ఈ పత్రం కోసం, HTML మూలకం రూట్ కణుపు ఎందుకంటే కనిపించే మొదటి ఎలిమెంట్. యొక్క మా చెట్టు ఒక రూట్ నోడ్ జోడించడానికి అనుమతిస్తుంది. యొక్క మళ్ళీ HTML పత్రం పరిశీలించి లెట్. శరీరం ట్యాగ్ HTML టాగ్ లోపలి యున్న అని గమనించండి. ఈ శరీరం మూలకం HTML మూలకం కుమారుడిగా అర్థం. మేము శరీరం ఆకు ద్వారా మా DOM ట్రీ ఈ సూచిస్తుంది HTML నుండి అవరోహణ. యొక్క అలా వీలు. మేము HTML కింద శరీరం కలిగి. ఇప్పుడు మేము, శరీరం దాని స్వంత 2 పిల్లలు చూడగలరు h1 మూలకం మరియు ఉల్ మూలకం. ఈ మేము ఆ అంశాలు రెండు కనెక్ట్ అంటే శరీరం అంశానికి, కాబట్టి యొక్క ఆ తెలియజేసేలా. మేము ఒక h1 మరియు ఒక ఉల్ కలిగి. చివరగా, ఉల్ మూలకం, 3 పిల్లలు మరియు ఈ మా DOM ట్రీ పూర్తి చేస్తుంది, కాబట్టి li, li, li జోడించండి చేసుకుందాం. ఈ మా DOM ట్రీ పూర్తి, మరియు ఈ బ్రౌజర్ మీ వెబ్ నిల్వ ఎలా. ఇప్పుడు మేము జావాస్క్రిప్ట్ ఉపయోగించి ఈ చెట్టు ప్రయాణించి ఎలా పరిశీలించి వీలు. మేము పత్రం అనే ప్రత్యేక జావాస్క్రిప్ట్ వేరియబుల్ ఉపయోగించి ఈ చెట్టు యాక్సెస్ చేయవచ్చు. ఈ డాక్యుమెంట్ ఆబ్జెక్ట్ ఒకటి ఆస్తి శరీరం ఆస్తి ఉంది, మరియు ఈ వస్తువు ప్రాతినిధ్యం మా ఉదాహరణ వెబ్పేజీలో శరీరం మూలకం. మేము, శరీరం మూలకం పిల్లలు అన్ని పొందుటకు కోరుకుంటే ఇది మిమ్మల్ని గుర్తుంచుకునేందుకు ఉంటే, ఆ h1 ట్యాగ్ మరియు ఉల్ ట్యాగ్ మేము document.body.childNodes చెప్పగలను. మరియు ఈ మాకు h1 మూలకం ఇవి రెండూ ఒక అర్రే తిరిగి ఇస్తుంది మరియు వారు శరీరం యొక్క ప్రత్యక్ష పిల్లలు ఉన్నకారణంగా ఉల్ మూలకం. మేము ఉల్ మూలకం ప్రాతినిధ్యం ఒక వేరియబుల్ సృష్టించడానికి అనుకుంటే మేము ఇక్కడ vrr ఉల్ = ఈ కోడ్ చెప్పగలను మరియు ఇప్పుడు childNodes కేవలం ఒక అర్రే ఎందుకంటే మేము [1] తో లోకి ఇండెక్స్ ఆ శ్రేణిని రెండవ మూలకం పొందుటకు. చేయవచ్చు ఈ కొత్త ఉల్ వస్తువు తో మేము దాని ID వంటి మూలకం వివిధ లక్షణాలు యాక్సెస్ చేయవచ్చు. మేము స్ట్రింగ్ జాబితా సమానంగా ఉండాలి జరగబోతోంది ఆ ul.id చెప్పుకోవాలంటే మేము మా HTML పేజీ లో ఏమి ఎందుకంటే. మేము కూడా ఈ విషయంలో అవతరిస్తుంది ఇది, దాని tagName పొందవచ్చు మూలకం యొక్క ఏ రకం ఈ సందర్భంలో, ఒక ఉల్ లో, ఉంది. మేము కూడా దాని మాతృ లేదా పైన నోడ్, పొందవచ్చు ఈ సందర్భంలో శరీరం మూలకం అవతరిస్తుంది. మేము document.body అదే చేస్తాడు అని. ParentNode, చెప్పుకోవాలంటే. కోర్సు యొక్క, ఈ ఉల్, దాని స్వంత పిల్లలు కాబట్టి మేము ఇంకా చెప్పగలను. childNodes ఈ అంశం మీద, మా జాబితాలో 3 అంశాలు ఉన్నాయి ఎందుకంటే మరియు ఈ శ్రేణి ఇప్పుడు పొడవు 3 ఉండాలి. చివరగా, బహుశా చాలా ఉపయోగకరమైన లక్షణం అవతరిస్తుంది. InnerHTML, మరియు ఈ జాబితా వాస్తవ విషయాలను ఉంటుంది మా ఉదాహరణ పేజీ లో ఆ 3 li టాగ్లు ఉన్నాయి. కోర్సు యొక్క, మేము ఒక పెద్ద పత్రం ఉంటే, అంశాలు యాక్సెస్ ఈ పద్ధతిలో నిజంగా గజిబిజిగా అవతరిస్తుంది ఎందుకంటే చివరికి మేము document.body.childNodes వంటి విషయాలు చెప్పటానికి ఉంటుంది బ్రాకెట్ ఏదో. కాకుంటే బ్రాకెట్ ఏదో childNodes అది నిజంగా గజిబిజిగా పొందుటకు జరగబోతోంది. బదులుగా మేము నిజంగా చేయాలనుకుంటున్నారా ఉంది, పత్రం ప్రశ్న చెయ్యగలరు కాబట్టి మేము కీలక పదాలను ఉపయోగించి ఇంటర్నెట్ విషయాలు శోధించిన ఇష్టం మేము నిజంగా క్లుప్తమైన ఈ పత్రం శోధించడం విధంగా అవసరం మనం శ్రద్ధ ఎలిమెంట్లను మాత్రమే నదీ ప్రవాహానికి అడ్డంగా ప్రయాణం లేకుండా తిరిగి దిగువ మొత్తం చెట్టు టాప్. అదృష్టవశంగా, ఆధునిక బ్రౌజర్లలో మాకు దీన్ని అనుమతిస్తాయి querySelectorAll అనే ప్రత్యేక ఫంక్షన్, మరియు ఈ ఫంక్షన్ ఒక వాదన పడుతుంది ఒక CSS సెలెక్టర్ ఉంది, మరియు అది మాకు తిరిగి జరగబోతోంది ఆ సెలెక్టర్ మ్యాచ్ మూలకాలను అన్ని. మీరు DOM విచారణ కోసం ఒక సరికొత్త సింటాక్స్ తెలుసుకోవడానికి అవసరం లేదు అంటే. బదులుగా మీరు ఇప్పటికే తెలుసు జ్ఞానం దరఖాస్తు చేసుకోవచ్చు CSS సెలెక్టర్లు గురించి. యొక్క పత్రం విచారణ కొన్ని ఉదాహరణలను చూడాల్సిన తీసుకుందాం. మేము querySelectorAll చెప్పటానికి మరియు ఈ స్ట్రింగ్ # foo పాస్ ఉంటే మాకు ID foo తో మూలకం తిరిగి ఇవ్వాలని జరగబోతోంది. మీరు కూడా document.getElementByID చెప్పగలను ఆ హాష్ ట్యాగ్ లేకుండా స్ట్రింగ్ foo పాస్. మీరు అదే ఖచ్చితమైన వస్తువు తిరిగి చేయబోతున్నామని. బదులుగా మేము document.querySelectorAll కు స్ట్రింగ్. బార్ పాస్ ఉంటే మేము తరగతి బార్ తో అన్ని మూలకాలు తిరిగి చేయబోతున్నామని. మేము కూడా CSS సెలెక్టర్లు మిళితం చేయవచ్చు. మేము స్ట్రింగ్ # foo img లో పాస్ ఉంటే చిత్రం అన్ని మూలకాలు మాకు తిరిగి ఇవ్వాలని జరగబోతోంది ఆ ఆ ID foo తో మూలకం పిల్లలు. మీరు చూడగలరు గా, కలపడం సెలెక్టర్లు మనం కొన్ని నిజంగా శక్తివంతమైన శోధన సామర్థ్యాలను కలిగి ఉంటారు. కానీ హుడ్ కింద, DOM, నిజంగా కేవలం ఒక వృక్షం మరియు ఈ సెలెక్టర్లు కొంతవరకు ఆ దూరంగా మాకు వియుక్త అనుమతిస్తాయి మేము ఎల్లప్పుడూ DOM ట్రీ యొక్క మొత్తం నిర్మాణం గురించి పట్టించుకోను ఎందుకంటే. ఒక శీఘ్ర DOM యొక్క సారాంశం, మరియు మాకు సహాయపడినందుకు ధన్యవాదాలు ఉంది. [CS50.TV]