JavaScript HTML DOM Document

Het HTML DOM Document-object is de eigenaar van alle andere objecten op je webpagina.

HTML DOM Document-object

Documentobject vertegenwoordigt je webpagina.

Als je een element op een HTML-pagina wilt bereiken, begin je altijd met het bereiken van het document-object.

Hier zijn enkele voorbeelden van hoe je de document-object kunt gebruiken om HTML te bereiken en te manipuleren.

Zoek HTML-elementen

Method Description
document.getElementById(id) Zoek elementen op basis van element ID
document.getElementsByTagName(naam) Zoek elementen op basis van tagnaam
document.getElementsByClassName(naam) Zoek elementen op basis van klasse

Verander HTML-element

Method Description
element.innerHTML = nieuwe html inhoud Verander de inner HTML van een element
element.attribute = new value Change the attribute value of HTML elements
element.setAttribute(attribute, value) Change the attribute value of HTML elements
element.style.property = new style Change the style of HTML elements

Add and delete elements

Method Description
document.createElement(element) Create HTML elements
document.removeChild(element) Delete HTML elements
document.appendChild(element) Add HTML elements
document.replaceChild(element) Replace HTML elements
document.write(text) Write to the HTML output stream

Add an event handler

Method Description
document.getElementById(id).onclick = function(){code} Add an event handler to the onclick event

Find HTML objects

First HTML DOM Level 1 (1998) defined 11 HTML objects, object collections, and properties. They are still valid in HTML5.

Later, in HTML DOM Level 3, more objects, collections, and properties were added.

Properties Description DOM
document.anchors Return all <a> elements with the name attribute 1
document.applets Return all <applet> elements(Not recommended in HTML5) 1
document.baseURI Return the absolute base URI of the document 3
document.body Return the <body> element 1
document.cookie Return the cookie of the document 1
document.doctype Return the doctype of the document 3
document.documentElement Return the <html> element 3
document.documentMode Return the mode used by the browser 3
document.documentURI Return the URI of the document 3
document.domain Return the domain name of the document server 1
document.domConfig Abandoned.Return the DOM configuration 3
document.embeds Return all <embed> elements 3
document.forms Geef alle <form> elementen terug 1
document.head Geef het <head> element terug 3
document.images Geef alle <img> elementen terug 1
document.implementation Geef de DOM implementatie terug 3
document.inputEncoding Geef de encoding (tekenset) van het document terug 3
document.lastModified Geef de datum en tijd van de update van het document terug 3
document.links Geef alle <area> en <a> elementen met de href-eigenschap terug 1
document.readyState Geef de status van het document (laden) terug 3
document.referrer Geef de gerefereerde URI (gekoppelde documenten) terug 1
document.scripts Geef alle <script> elementen terug 3
document.strictErrorChecking Geef terug of foutcontrole verplicht is 3
document.title Geef het <title> element terug 1
document.URL Geef de volledige URL van het document terug 1