The Document Object Model (DOM) - The DOM tree - Creating and removing nodes

6 belangrijke vragen over The Document Object Model (DOM) - The DOM tree - Creating and removing nodes

Hoe zijn de verschillende DOM objecten connected met elkaar

DOM nodes zitten in een boomvorm aan elkaar: alle nodes hebben 1 parent (behalve de document node, die de wortel van de boom vormt), en elke node kan nul of meer kinderen hebben. Een node kan verder nul of meer siblings hebben: siblings hebben dezelfde parent

Wat zijn de 3 types van DOM nodes? Welke typen komen in de lijst van kinderen en siblings van andere nodes

Er zijn element nodes, text nodes en attribute nodes. Als we nodes opvragen via DOM-methoden krijgen element nodes en text nodes.

Hoeveel kinderen heeft de onderstaande footer node en wat zijn deze. En hoeveel siblings heeft het en wat zijn deze.
<code>
<p>This paragraph won't be affected</p>
<div id="footer">
<p> 1234 Street</p>
<p>Atlanta, GA</p>
</div>
</code>

Via de DOM methoden heeft het div-element met id footer 5 childeren:
  • 2 text nodes "\n\t"
  • 2 element nodes: 1 voor elk p-element
  • 1 text node "\n"
  • Dit is dus geheel afhankelijk van de manier waarop de HTML-code is opgeschreven: als de HTML achter elkaar zou zijn opgeschreven zouden er geen 'lege' text nodes zijn

De siblings zijn: een p-element en een text node met "\n"
  • Hogere cijfers + sneller leren
  • Niets twee keer studeren
  • 100% zeker alles onthouden
Ontdek Study Smart

Hoe kun je text nodes ontwijken en alleen focussen op element nodes als je een pagina doorkruist met DOM. Welke methoden kunnen daarbij helpen

Om met behulp van DOM-methoden alle element nodes te krijgen kun je de methode document.getElementsByTagName gebruiken voor elke tag die in het document voorkomt.

Dat elk list item (li) binnen deze div om italic font te gebruiken

CSS: .schuin { font-style: italic; } JavaScript, DOM-methode: var linkitems = document.getElementByID("main").getElementsByTagName("li"); for (var i=0; i linkitems[i].className = "schuin"; }

Veronderstel dat een pagina een div heeft met een id main. Schrijf de JavaScript code om elke ander paragraaf van deze div te verwijderen. Bijvoorbeeld de div heeft 6 paragrafen. De 2e, 4e en 6e moeten worden verwijderd.

JavaScript DOM-methode
var main document.getElementById("main");
var paragraphs = main.getElementsByTagName("p");
for (var i=1; i<(paragraphs.length -1); i=i+2) {
main.removeChild(paragraphs[i]);
}

Probeer onze studie magie gratis!

een PDF bestand en leer hem super snel
  • Geen aanmelding, e-mail of creditcard nodig!
  • AI maakt onbeperkte flashcards
  • AI maakt oefen toetsen van de stof
  • Stel vragen aan AI
Maak een notitieblok aan
  • Geen aanmelding, e-mail of creditcard nodig!
  • Heb en houd perfect overzicht
  • Maak Maak flashcards, notities en mindmaps
  • Oefen, test jezelf en scoor beter!

De vragen op deze pagina komen uit de samenvatting van het volgende studiemateriaal:

  • Een unieke studie- en oefentool
  • Nooit meer iets twee keer studeren
  • Haal de cijfers waar je op hoopt
  • 100% zeker alles onthouden
Onthoud sneller, leer beter. Wetenschappelijk bewezen.
Trustpilot-logo