# Selecteren van elementen uit de DOM
Met de document.getElementById() kunnen we een element uit de DOM selecteren op basis van de waarde van het id attribuut. Omdat element ID’s uniek moeten zijn is dit een handige methode om een specifiek element op te vragen.
Definieer een HTML element met id="lineup". Dit element dient als placeholder voor de concerten.
<div id="lineup"></div>
Vraag in JavaScript het element op met id="lineup" via document.getElementById('lineup'). Het kardinaal teken of hash-tag (#) wordt niet vermeld in deze functie.
const lineupElement = document.getElementById('lineup');
Met de document.getElementsByTagName(name) kunnen we alle element uit de DOM selecteren op basis van de naam van het element (Eng. tag name).
Definieer HTML element met een p-tag:
<p>…</p>
<p>…</p>
<p>…</p>
2
3
We kunnen nu via JavaScript alle p-elementen opvragen met de methoden document.getElementsByTagName(name). Deze methode geeft een HTMLCollection (opens new window) terug. Deze collectie bevat een eigenschap length waarmee we de lengte van de collectie kunnen opvragen, ideaal om te itereren met een for-lus:
const pElements = document.getElementsByTagName('p');
for (let i = 0; i < pElements.length; i++) {
console.log(pElements.item(i));
}
2
3
4
Definieer HTML element met een div-tag en bij elk element een class attribuut met de waarde "bit":
<div class="bit">…</div>
<div class="bit">…</div>
<div class="bit">…</div>
2
3
Met de functie document.getElementsByClassName(name) kunnen we alle elementen opvragen die een specifieke waarde hebben voor het class attribuut. Deze methode geeft een HTMLCollection (opens new window) terug. Deze collectie bevate een eigenschap length waarmee we de lengte van de collectie kunnen opvragen, ideaal om te itereren met een for-lus:
const cElements = document.getElementsByClassName('bit');
for (let i = 0; i < cElements.length; i++) {
console.log(cElements.item(i));
}
2
3
4
Definieer de volgende HTML structuur:
<div id="articles">
<article class="article">
<h1>Heading</h1>
</article>
</div>
2
3
4
5
We kunnen via de functie document.querySelector(selectors) het eerste element uit de DOM opvragen die voldoet aan de gespecificeerde selector of groep van selectoren. Indien geen match wordt gevonden geeft de functie een null waarde terug. De selectors die we definiëren zijn equivalent met CSS selectoren. In het voorbeeld kunnen we het eerste element opvragen met class="article" uit het div-element met id="articles" met het statement document.querySelector('#articles .article'):
const articleElement = document.querySelector('#articles .article');
if ( articleElement !== null ) {
console.log(articleElement);
} else {
console.log('No article found!');
}
2
3
4
5
6
Definieer de volgende HTML structuur:
<div id="articles">
<article class="article">
<h1>Heading 1</h1>
</article>
<article class="article">
<h1>Heading 2</h1>
</article>
<article class="article">
<h1>Heading 3</h1>
</article>
</div>
2
3
4
5
6
7
8
9
10
11
Met behulp van de functie document.querySelectorAll(selectors) kunnen we alle elementen opvragen uit de DOM die voldoen aan de selectoren gedefinieerd als argument binnen deze functie. Deze functie geeft altijd een NodeList (opens new window) object terug. Via de length eigenschap van het NodeList object kunnen we nagaan of er al dan niet element aanwezig zijn. Met de forEach() functie kunnen we itereren over deze lijst:
const articleElements = document.querySelectorAll('#articles .article');
if ( articleElements.length > 0 ) {
articleElements.forEach( (elem) => {
console.log(elem);
});
} else {
console.log('No articles found!');
}
2
3
4
5
6
7
8