Het Document Object Model (DOM) is de structurele weergave van een HTML-document. De DOM is een boomstructuur van knooppunten die de browser maakt voor elke webpagina op internet.

De DOM is objectgeoriënteerd. Elk element in de DOM heeft zijn eigen set attributen en methoden waartoe u toegang hebt met JavaScript.

In dit zelfstudieartikel leert u hoe u DOM-selectorfuncties gebruikt om toegang te krijgen tot elementen van een webpagina.

Toegang krijgen tot DOM-elementen

U hebt toegang tot het DOM-element op het hoogste niveau van een webpagina via het globale documentobject. Als u bijvoorbeeld een webpagina heeft zoals de volgende:

Welkom


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum en repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.




Over


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum en repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.







instagram viewer



Lidwoord



Artikel Titel Een


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum en repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Lees verder 





Artikeltitel twee


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum en repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Lees verder 





Artikel Titel Drie


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum en repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Lees verder 





Artikel Titel Vier


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum en repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Lees verder 

Typen document in uw browserconsole en op enter drukken zal de volgende uitvoer produceren:

De uitvoer in uw console is interactief. U kunt op de klikken hoofd en lichaam elementen om ze uit te breiden. Als u dit doet, wordt de volgende uitvoer geproduceerd:

Elk sectie-element in de tag is ook uitbreidbaar. Afhankelijk van de structuur van een webpagina, zullen de elementen blijven uitbreiden om meer elementen te onthullen. Dit zou u een beter begrip moeten geven van de structuur van het DOM.

Verwant: De verborgen held van websites: de DOM begrijpen

Het documentobject heeft een speciale eigenschap, lichaam, die het lichaamselement vertegenwoordigt. Dus om toegang te krijgen tot het body-element, typt u het volgende in de console:

document.body

Dit levert de volgende uitvoer op:

Maar dit is zo ver als je kunt gaan met objecteigenschappen. Elke pagina heeft een hoofd en een lichaam, maar is verder uniek. Dus typen document.body.sectie of iets dergelijks zal gewoon niet werken zoals je zou willen. In plaats daarvan zijn er methoden die u op het documentobject kunt aanroepen om toegang te krijgen tot specifieke elementen.

Wat zijn DOM-elementkiezers?

DOM-elementselectors zijn een groep JavaScript-methoden die u op het documentobject kunt gebruiken om toegang te krijgen tot elementen op een webpagina. DOM-elementselectors hebben twee categorieën: enkele en meerdere selectors.

Deze functies werken op dezelfde manier als CSS-kiezers. Hiermee kunt u elementen ophalen op basis van hun tagnaam of hun id- en klasseattributen. U kunt zelfs elementen ophalen met elke CSS-selector.

Verwant: Een deel van een webpagina targeten met CSS-kiezers

De selectors voor enkelvoudige elementen zijn:

• getElementById()
• querySelector()

De selectors voor meerdere elementen zijn:

• getElementsByTagName()
• getElementsByClassName()
• querySelectorAll()

De DOM-elementselector die u gebruikt, is afhankelijk van het (de) element (en) waartoe u toegang probeert te krijgen.

Enkele DOM-elementkiezers gebruiken

Je zult meestal selectors zien in JavaScript-applicaties. Laten we dus afstand nemen van de console. Maak een JavaScript-bestand en koppel het aan uw HTML-bestand met behulp van de volgende scripttag:

Waar de src-waarde de naam is van uw JavaScript-bestand. Plaats deze scripttag net voor je afsluitende body-tag, .

De getElementById() methode biedt toegang tot een enkel element op een webpagina met behulp van de waarde van zijn ID. In het bovenstaande HTML-document staan ​​verschillende elementen met ID's. richten op de div element met de “article-3” ID kunt u de volgende code toevoegen aan uw JavaScript-bestand:

waarde = document.getElementById('article-3')

Nu het div-element met de artikel-3 ID en alle bijbehorende eigenschappen zijn toegankelijk via de waarde variabel. U kunt de. afdrukken waarde variabele naar de console met behulp van de volgende regel code:

console.log (waarde)

U ziet de klassenaam die aan het div-element is toegewezen, evenals andere belangrijke kenmerken, zoals de innerlijke HTML.

De andere selector voor één element is de querySelector(). Deze functie is veelzijdiger, omdat je er elke CSS-selectorstring aan kunt doorgeven. U kunt het echter nog steeds slechts gebruiken om één element tegelijk te selecteren.

Er is bijvoorbeeld één enkele klasse in de HTML-lay-out hierboven: artikelen. Vier div-elementen gebruiken deze klasse, maar de querySelector() functie retourneert alleen het eerste element dat de klasse "articles" heeft.

QuerySelector() gebruiken met een klasse

Voeg de volgende code toe aan het einde van je script:

waarde = document.querySelector('.articles')
console.log (waarde)

Dit zal alleen de eerste retourneren div element met een klasse "articles". Merk op dat u de selector opgeeft in hetzelfde formaat als een CSS-selector. In CSS specificeert een leidende punt een klassenaam.

QuerySelector() gebruiken met een ID

waarde = document.querySelector('#article-3')
console.log (waarde)

Deze code retourneert het enige element met een "article-3" ID, de derde div element met een klasse "articles". Nogmaals, de selectorstring gebruikt standaard CSS-syntaxis, met a # symbool dat een ID aangeeft.

Meerdere DOM-elementkiezers gebruiken

De overige selectorfuncties halen groepen elementen op. Zij zijn getElementsByTagName(), getElementsByClassName(), en querySelectorAll().

getElementsByTagName() gebruiken

De getElementsByTagName() selector haalt een groep elementen met dezelfde tagnaam op. Als u bijvoorbeeld alle h2 elementen op een webpagina, kunt u de volgende code gebruiken:

waarde = document.getElementsByTagName('h2')
console.log (waarde)

Hiermee worden alle h2-elementen opgeslagen in een HTML-verzameling met de naam value.

getElementsByClassName() gebruiken

De getElementsByClassName() selector retourneert een verzameling elementen met dezelfde klassenaam.

waarde = document.getElementsByClassName('articles')
console.log (waarde)

Als u de bovenstaande code in uw JavaScript-bestand invoegt, worden de vier div-elementen geretourneerd met de klassenaam "articles" in de browserconsole.

QuerySelectorAll() gebruiken

De querySelectorAll() methode retourneert een lijst met knooppunten van alle elementen die overeenkomen met de opgegeven selector. Om toegang te krijgen tot alle alinea-elementen in de blogsectie, kunt u de volgende code gebruiken:

waarde = document.querySelectorAll('#blog p')
console.log (waarde)

U kunt zelfs meerdere selectors in de tekenreeks opnemen, die elk met een komma worden gescheiden, net als in CSS:

waarde = document.querySelectorAll('h2, .articles')
console.log (waarde)

Gebruik DOM-kiezers om dynamische webpagina's te maken

Op dit punt moet u een duidelijk begrip hebben van de DOM en hoe deze werkt. U moet ook de verschillende enkelvoudige en meervoudige selectors kennen en weten hoe u ze moet gebruiken.

Toch is het verkrijgen van toegang tot HTML-elementen slechts de eerste stap in wat u kunt doen met DOM-selectors. DOM-selectors helpen u een heel eind bij het ontwikkelen van de functionele aspecten van uw website, zoals het afhandelen van onclick- en onscroll-gebeurtenissen.

Hoe u uw website responsief en interactief kunt maken met CSS en JavaScript

Je hebt je website opgezet met HTML en CSS, maar nu moet je logica toevoegen. Dit is wat u moet doen.

Lees volgende

Over de auteur