[Powered by Google Translate] [DOM] [Tommy MacWilliams] [Harvard University] [Dit is CS50.] [CS50.TV] In deze video gaan we een kijkje nemen op de DOM te nemen. Wanneer een browser downloadt van een webpagina, het moet in het geheugen te laten vertegenwoordigen of andere manier. Het document object model, of DOM, beschrijft hoe de browser geeft een webpagina in het geheugen. In deze video zullen we een blik op de DOM te nemen in het kader van JavaScript, maar DOM is een taal-onafhankelijk concept. Bijvoorbeeld, PHP heeft zijn eigen implementatie DOM ook. Echter, DOM vaak gebruikt door JavaScript omdat JavaScript stelt ons in staat om de inhoud van een webpagina te veranderen op de vlieg, en DOM stelt ons in staat om toegang te krijgen tot delen van een webpagina. Laten we eens een kijkje nemen op een voorbeeld webpagina. Oke, laten we nu eens kijken hoe deze pagina in de DOM zullen worden vertegenwoordigd. En elke boom nodig heeft om een ​​wortelknoop hebben aan de top. Voor dit document, het HTML-element is het root-knooppunt want het is het eerste element dat wordt weergegeven. Laten we eerst nog wortelknoop aan onze boom. Laten we eens een kijkje nemen op het HTML-document weer. Merk op dat de body-tag is genest in de HTML-tag. Dit betekent dat het lichaamselement is een kind van de HTML-element. We kunnen dit in onze DOM boom vertegenwoordigen door het maken van het lichaam van een blad afstammend van HTML. Laten we dat doen. We hebben het lichaam eronder HTML. Nu kunnen we zien dat lichaam heeft 2 kinderen van zijn eigen, de h1-element en het ul element. Dit betekent dat we kunnen verbinden deze beide elementen om het lichaam element, dus laten we dat doen. We hebben een h1 en een ul. Ten slotte is de ul element heeft 3 kinderen, en dit zal ons DOM-structuur te voltooien, dus laten we voegen li, li, li. Hiermee is onze DOM-structuur, en dit is hoe de browser is het opslaan van uw webpagina. Laten we nu eens kijken hoe we deze boom met behulp van JavaScript kunnen doorkruisen. We kunnen toegang krijgen tot deze boom met behulp van een speciaal JavaScript-variabele genoemd document. Een eigenschap van dit document object is het pand lichaam, en dit object vertegenwoordigt het lichaam element in ons voorbeeld webpagina. Als we wilden alle kinderen van het lichaam element te krijgen, die, als je onthouden is dat h1-tag en de ul-tag, kunnen we document.body.childNodes zeggen. En dit geeft ons weer een array met zowel de h1 element en het ul element omdat ze zowel directe kinderen van het lichaam. Als we wilden een variabele die het ul element te maken we kunnen VRR ul = dan is deze code hier zeggen, en nu, omdat childNodes is gewoon een array we kunnen index in het met [1] om het tweede element van die array te krijgen. Met deze nieuwe ul object kunnen we toegang tot verschillende eigenschappen van het element als zijn ID. Als we zeggen ul.id dat gaat gelijk aan de string lijst te want dat is wat we hebben in onze HTML-pagina. We kunnen ook de tagName, die in dit geval gaat worden welk type element is in dit geval een ul. We kunnen ook de ouder of de knoop erboven, die in dit geval gaat het lichaam element. Als we zeggen. ParentNode, dat gaat hetzelfde als document.body zijn. Natuurlijk, dit ul heeft kinderen van zijn eigen, dus we kunnen nog steeds zeggen. childNodes op dit element, en deze array moet nu lengte 3 omdat er 3 punten in onze lijst. Tot slot, misschien wel de meest nuttige eigenschap gaat worden. InnerHTML, en dit zal de werkelijke inhoud van de lijst, die in ons voorbeeld pagina waren zij 3 li tags. Natuurlijk, als we een groot document, toegang elementen op deze manier gaat worden echt lastig omdat Uiteindelijk zullen we moeten dingen als document.body.childNodes zeggen beugel iets. childNodes beugel iets anders, en het gaat echt lastig te krijgen. In plaats daarvan wat we echt willen doen, is in staat om het document te bevragen, dus net als wij gezocht naar dingen op het internet met behulp van trefwoorden we echt een manier van zoeken naar bondig dit document nodig terug te krijgen alleen de elementen die we de zorg over zonder doorkruisen de hele boom boven naar beneden. Gelukkig, moderne browsers ons toelaten om dit te doen met een speciale functie genaamd querySelectorAll, en deze functie neemt een enkel argument dat is een CSS-selector, en het zal aan ons te retourneren alle elementen die overeenkomen met die selector. Dat betekent dat je niet nodig om een ​​hele nieuwe syntax te leren voor het opvragen van de DOM. In plaats daarvan kun je de kennis die je al kent van toepassing over CSS selectors. Laten we eens een kijkje nemen op enkele voorbeelden van het bevragen van het document. Als we zeggen querySelectorAll en doorgeven deze string # foo dat gaat ons terug te geven het element met het ID foo. Je kunt ook zeggen document.getElementById en geef het de string foo zonder dat hashtag. Je gaat weer exact dezelfde object. Als in plaats daarvan gaan we de string. Bar aan document.querySelectorAll we gaan weer alle elementen met de klasse bar. We kunnen ook combineren CSS selectors. Als we passeren in de string # foo img dat gaat ons terug te geven alle van de beeldelementen dat zijn kinderen van het element met het ID foo. Zoals u kunt zien, door het combineren van selecteurs hebben we een aantal echt krachtige zoekmogelijkheden. Maar onder de motorkap, de DOM is eigenlijk gewoon een boom, en deze selectors ons toelaten om abstract dat weg tot op zekere hoogte omdat we niet altijd de zorg over de gehele structuur van de DOM boom. Dat was een snel overzicht van de DOM, en bedankt voor het samenvoegen van ons. [CS50.TV]