Wat is de HTML-DOM?
De HTML DOM is een Object Model voor HTML . Het definieert:
- HTML-elementen als objecten
- Eigenschappen voor alle HTML-elementen
- Methoden voor alle HTML-elementen
- Gebeurtenissen voor alle HTML-elementen
De HTML DOM is een API (Programming Interface) voor JavaScript :
- JavaScript kan HTML-elementen toevoegen/wijzigen/verwijderen
- JavaScript kan HTML-kenmerken toevoegen/wijzigen/verwijderen
- JavaScript kan CSS-stijlen toevoegen/wijzigen/verwijderen
- JavaScript kan reageren op HTML-gebeurtenissen
- JavaScript kan HTML-gebeurtenissen toevoegen/wijzigen/verwijderen
De HTML DOM (Document Object Model)
Wanneer een webpagina wordt geladen, maakt de browser een documentobjectmodel van de pagina .
Het HTML DOM -model is opgebouwd als een boom met objecten :
De HTML DOM-structuur van objecten
HTML-elementen zoeken
Wanneer u met JavaScript toegang wilt krijgen tot HTML-elementen, moet u eerst de elementen vinden.
Er zijn een aantal manieren om dit te doen:
- HTML-elementen zoeken op id
- HTML-elementen zoeken op tagnaam
- HTML-elementen zoeken op klassenaam
- HTML-elementen zoeken met CSS-selectors
- HTML-elementen zoeken op HTML-objectverzamelingen
HTML-element zoeken op id
De eenvoudigste manier om een HTML-element in de DOM te vinden, is door de element-id te gebruiken.
Dit voorbeeld vindt het element met id="intro":
Voorbeeld
var myElement = document.getElementById("intro");
Als het element wordt gevonden, retourneert de methode het element als een object (in myElement).
Als het element niet wordt gevonden, bevat myElement null.
HTML-elementen zoeken op tagnaam
Dit voorbeeld vindt alle <p> elementen:
Voorbeeld
var x = document.getElementsByTagName("p");
Dit voorbeeld vindt het element met id="main", en vindt vervolgens alle <p> elementen binnen "main":
Voorbeeld
var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
HTML-elementen zoeken op klassenaam
Als u alle HTML-elementen met dezelfde klassenaam wilt vinden, gebruikt u getElementsByClassName().
Dit voorbeeld retourneert een lijst van alle elementen met class="intro".
Voorbeeld
var x = document.getElementsByClassName("intro");
Elementen zoeken op klassenaam werkt niet in Internet Explorer 8 en eerdere versies.
HTML-elementen zoeken met CSS-kiezers
Als u alle HTML-elementen wilt vinden die overeenkomen met een opgegeven CSS-selector (id, klassenamen, typen, attributen, waarden van attributen, enz.), gebruikt u de methode querySelectorAll().
Dit voorbeeld retourneert een lijst van alle <p> elementen met class="intro".
Voorbeeld
var x = document.querySelectorAll("p.intro");
De methode querySelectorAll() werkt niet in Internet Explorer 8 en eerdere versies.
HTML-elementen zoeken op basis van HTML-objectverzamelingen
HTML-objectverzamelingen zijn ook toegankelijk:
HTML DOM-zelfstudie
Volledige HTMLDOM-zelfstudie
Dit was een korte introductie tot HTMLDOM.
Ga voor een volledige HTMLDOM-zelfstudie naar W3Schools HTMLDOM-zelfstudie .