Het Document Object Model (DOM) is een programmeerinterface voor HTML- en XML-documenten die door de browser wordt gemaakt zodra het document is geladen. Een webpagina is in wezen een document dat door het DOM wordt weergegeven als knooppunten en objecten. Hiermee kunnen programma’s de inhoud, structuur en stijlen van het document manipuleren.
In deze tutorial leren we hoe we JavaScript kunnen gebruiken om toegang te krijgen tot verschillende nodes (HTML-elementen) in het DOM. Laten we beginnen met de eerste methode: het opvragen van elementen op ID.
Get Element By ID
De document’s getElementById() methode neemt het element ID als invoer en retourneert een Element object dat het DOM element weergeeft. Hier is een voorbeeld:
<div>🦄</div>Nu volgt hoe we het bovenstaande <div> element kunnen krijgen door zijn ID te gebruiken:
const unicorn = document.getElementById('unicorn');De ID is hoofdlettergevoelig en uniek voor het hele HTML-document. Deze methode retourneert dus altijd een enkel element. Als er geen overeenkomend element wordt gevonden, wordt null teruggezonden.
Note: Zet het teken
#niet voor de ID-string wanneer ugetElementById()aanroept. U krijgt dannullin plaats van het element, en dan vraagt u zich misschien urenlang af wat er mis is gegaan.
Elementen op tag-naam ophalen
De getElementsByTagName() methode wordt gebruikt om toegang te krijgen tot meerdere elementen. Het neemt de tag naam als invoer en retourneert alle DOM elementen die overeenkomen met de tag naam als HTMLCollection:
<p>🐱</p><p>🐰</p><p>🐯</p><p>🐧</p>JavaScript code om toegang te krijgen tot alle <p> elementen:
const animals = document.getElementsByTagName('p');Deze methode doorzoekt slechts één tag-naam tegelijk. Maar als u * als tag-naam opgeeft, krijgt u alle elementen in het DOM:
const allNodes = document.getElementsByTagName('*');Get Elements By Name
De getElementsByName() methode wordt gebruikt om een verzameling elementen op te halen aan de hand van hun name attribuut, en retourneert een NodeList object:
<input type="text" name="email"><input type="tel" name="phone"><input type="date" name="dob">Laten we alle elementen met de naam email opvragen:
const emails = document.getElementsByName('email');Note: In tegenstelling tot het
id-attribuut, dat uniek moet zijn, kunnen meerdere HTML-elementen hetzelfdename-attribuut hebben. Daarom geeftgetElementsByName()een verzameling knooppunten.
Get Elements By Class Name
Wilt u class-attribuut gebruiken om een lijst met overeenkomende elementen te krijgen? U kunt getElementsByClassName() methode gebruiken, geef het een class naam (zonder .) en het zal een HTMLCollection teruggeven van alle DOM elementen die de gegeven class naam hebben:
<div class="bird owl">🦉</div><div class="bird">🐦</div><div class="bird eagle">🦅</div><div class="animal cat">🐱</div>Laten we alle bird’s krijgen:
const birds = document.getElementsByClassName('bird');Deze methode accepteert ook meerdere klassenamen, gescheiden door spaties. Laten we alle elementen ophalen die zowel de bird als de eagle klassen hebben:
const eagle = document.getElementsByClassName('bird eagle');Query Selector
De querySelector() methode is een van de twee moderne JavaScript methoden waarmee je elementen uit het DOM kunt halen, gebaseerd op CSS selectors. Geef gewoon de CSS selector op en je krijgt het eerste element dat overeenkomt met de opgegeven selector. Als er geen overeenkomsten zijn, geeft het null. Hier is een voorbeeld:
const email = document.querySelector('#signup input');Query Selector All
Wilt u een lijst van elementen selecteren die met de opgegeven selectors overeenkomen? Gebruik dan de querySelectorAll() methode. Deze methode neemt meerdere CSS selectors als invoer en retourneert een NodeList – een lijst van DOM elementen die overeenkomen met de opgegeven selectors. Laten we alle elementen met een class van bird of animal uit de bovenstaande HTML markup selecteren:
const elems = document.querySelectorAll('.bird, .animal');console.log(elems.length); // 4Function Chaining
Je kunt ook meerdere functies aan elkaar koppelen om elementen binnen een ander element te zoeken. U moet eerst een enkel element selecteren met getElementById() of querySelector(), en dan een andere functie aaneenschakelen om binnenin te zoeken:
<form> <input type="text" name="email"> <input type="tel" name="phone"> <input type="date" name="date-of-birth"></form>Geef alle input elementen, binnen een element dat de ID signup heeft:
const inputs = document.getElementById('signup').getElementsByTagName('input');// ORconst inputs = document.querySelector('#signup').querySelectorAll('input');Traversing HTMLCollection and NodeList
De meeste van de methoden die we hierboven hebben besproken (behalve getElementById() en querySelector()) retourneren meerdere elementen als ofwel een HTMLCollection of een NodeList.
De HTMLCollection is geen array maar een generieke verzameling van elementen. Het is dus niet mogelijk om er met forEach() of map() overheen te lopen. We kunnen het echter omzetten in een echte array en dan itereren met Array.from() methode:
const inputs = document.getElementById('signup').getElementsByTagName('input');// iterate over HTMLCollectionArray.from(inputs).forEach(element => { console.log(element);});Hoewel NodeList ook geen array is, maar het biedt wel forEach() methode om over de elementen te itereren:
const inputs = document.querySelector('#signup').querySelectorAll('input');//iterate over NodeListinputs.forEach(element => { console.log(element);});Conclusie
Dat is alles voor het verkrijgen van DOM elementen met behulp van JavaScript. We hebben zoveel verschillende methoden geleerd om de DOM-elementen te benaderen: met behulp van id attribuut, HTML tag naam, name attribuut, class attribuut en CSS selectors. We hebben ook manieren besproken om te itereren over de generieke verzameling van elementen die door deze methoden worden geretourneerd.
✌️ Vind je dit artikel leuk? Volg @attacomsian op Twitter. Je kunt me ook volgen op LinkedIn en DEV. Abonneer je op RSS Feed.
👋 Als je mijn artikelen met plezier leest en me wilt steunen om door te gaan met het maken van gratis tutorials, ☕ Koop me een koffie (kost $5) .