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

Question

Hoe zijn de verschillende DOM objecten connected met elkaar

Answer 1

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

Answer 2

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

Answer 3

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"

Answer 4

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.

Answer 5

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

Answer 6

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]);
}

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

Wat zijn de 3 types van DOM nodes? Welke typen komen in de lijst van kinderen en siblings van andere 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>

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

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

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.

Onderwerpen die gerelateerd zijn aan The Document Object Model (DOM) - The DOM tree - Creating and removing nodes