HTML DOM Element Object

Element-objecten

In de HTML DOM vertegenwoordigt het Element-object een HTML-element, zoals P, DIV, A, TABLE of elk ander HTML-element.

Eigenschappen en methoden

Deze eigenschappen en methoden zijn beschikbaar voor alle HTML-elementen:

Eigenschap / Methode Beschrijving
accessKey Stel in of retourneer de waarde van het accesskey-attribuut van het element.
addEventListener() Voeg een eventhandler toe aan het element.
appendChild() Voeg een nieuwe onderliggende knooppunt toe aan het element.
attributes Retourneer de NamedNodeMap van de attributen van het element.
blur() Verwijder de focus van het element.
childElementCount Geef het aantal onderliggende elementen van het element terug.
childNodes Geef de NodeList van de onderliggende knooppunten van het element terug.
children Geef de HTMLCollection van de onderliggende elementen van het element terug.
classList Geef de classnaam van het element terug.
className Stel in of retourneer de waarde van de class-attribuut van het element.
click() Simuleer een muisklik op het element.
clientHeight Geef de hoogte van het element terug, inclusief de binnenafstand.
clientLeft Geef de breedte van de linker rand van het element terug.
clientTop Geef de breedte van de bovenste rand van het element terug.
clientWidth Geef de breedte van het element terug, inclusief de binnenafstand.
cloneNode() Kloon element.
closest() Zoek in de DOM-balk naar het dichtstbijzijnde element dat overeenkomt met de CSS-selectie.
compareDocumentPosition() Compare the document positions of two elements.
contains() Return true if the node is a descendant of a node.
contentEditable Set or return whether the content of the element is editable.
dir Set or return the value of the element's dir attribute.
firstChild Return the first child node of the element.
firstElementChild Return the first child element of the element.
focus() Make the element gain focus.
getAttribute() Return the value of the element's attribute.
getAttributeNode() Return the attribute node.
getBoundingClientRect() Return the size of the element and its position relative to the viewport.
getElementsByClassName() Return a collection of child elements with the given class name.
getElementsByTagName() Return a collection of child elements with the given tag name.
hasAttribute() Return true if the element has the given attribute.
hasAttributes() Return true if the element has any attributes.
hasChildNodes() Return true if the element has any child nodes.
element.id Set or return the value of the element's id attribute.
innerHTML Set or return the content of the element.
innerText Stel in of retourneer de tekstinhoud van het knooppunt en zijn afstammelingen.
insertAdjacentElement() Insert a new HTML element at a position relative to the element.
insertAdjacentHTML() Insert HTML-formatted text at a position relative to the element.
insertAdjacentText() Insert text at a position relative to the element.
insertBefore() Insert a new child node before an existing child node.
isContentEditable Return true if the element's content is editable.
isDefaultNamespace() Return true if the given namespaceURI is the default value.
isEqualNode() Check if two elements are equal.
isSameNode() Check if two elements are the same node.
isSupported() Deprecated.
lang Set or return the value of the element's lang attribute.
lastChild Return the last child node of the element.
lastElementChild Retourneer het laatste onderliggende element van het element.
matches() Retourneer true als het element overeenkomt met de gegeven CSS-selectie.
namespaceURI Retourneer de namespace URI van het element.
nextSibling Retourneer het volgende knooppunt op dezelfde laag van de knooppuntboom.
nextElementSibling Retourneer het volgende element op dezelfde laag van de knooppuntboom.
nodeName Retourneer de naam van de knoop.
nodeType Retourneer het type van de knoop.
nodeValue Stel in of retourneer de waarde van de knoop.
normalize() Voeg overeenkomende tekstknooppunten in het element samen en verwijder lege tekstknooppunten.
offsetHeight Retourneer de hoogte van het element, inclusief binnenste marges, randen en schuifbalken.
offsetWidth Retourneer de breedte van het element, inclusief binnenste marges, randen en schuifbalken.
offsetLeft Retourneer de horizontale afstand van het element.
offsetParent Retourneer het afstandelijk container van het element.
offsetTop Retourneer de verticale afstand van het element.
outerHTML Stel in of retourneer de inhoud van het element (inclusief begin- en einde tags).
outerText Stel in of retourneer de externe tekstinhoud van de knoop en zijn afstammelingen.
ownerDocument Retourneer het wortelelement (documentobject).
parentNode Retourneer de ouderknoop van het element.
parentElement Retourneer de ouderknoop van het element.
previousSibling Retourneer het knooppunt dat zich op dezelfde laag van de knooppuntboom bevindt.
previousElementSibling Retourneer het element dat zich op dezelfde laag van de knooppuntboom bevindt.
querySelector() Retourneer het eerste onderliggende element dat overeenkomt met de CSS-selectie.
querySelectorAll() Retourneer alle onderliggende elementen die overeenkomen met de CSS-selectie.
remove() Verwijder het element uit het DOM.
removeAttribute() Verwijder de eigenschappen van het element.
removeAttributeNode() Verwijder de eigenschapsknoop en retourneer de verwijderde knoop.
removeChild() Verwijder de onderliggende knopen van het element.
removeEventListener() Verwijder het evenementenhandler dat is toegevoegd met de methode addEventListener().
replaceChild() Vervang de onderliggende knopen van het element.
scrollHeight Teruggeven van de totale hoogte van het element, inclusief de binnenste marges.
scrollIntoView() Scroll het element naar het zichtbare gebied van het browservenster.
scrollLeft Stel in of retourneer het aantal pixels dat de inhoud van het element horizontaal kan worden gescrolld.
scrollTop Stel in of retourneer het aantal pixels dat de inhoud van het element verticaal kan worden gescrolld.
scrollWidth Retourneer de totale breedte van het element, inclusief de binnenafstand.
setAttribute() Stel in of wijzig de waarde van het attribuut.
setAttributeNode() Stel in of wijzig de eigenschap van het attribuut.
style Stel in of retourneer de waarde van de eigenschap style van het element.
tabIndex Stel in of retourneer de waarde van de eigenschap tabIndex van het element.
tagName Retourneer de tagnaam van het element.
textContent Stel in of retourneer de tekstinhoud van het knooppunt en zijn afstammelingen.
title Stel in of retourneer de waarde van de eigenschap title van het element.
toString() Converteer het element naar een string.

Uitleg van de interface Element

De interface Element representeren HTML-elementen, XML-elementen of tags. De eigenschap tagName specificeert de naam van het element. De eigenschap documentElement van Document verwijst naar het root Element-object van deze document. De eigenschap body van het HTMLDocument-object verwijst ook naar het <body>-element van de document. Om een element met een specifieke naam te vinden in een HTML-document, gebruik je Document.getElementById() (en geef het element een unieke naam via de id-eigenschap). Om een element te lokaliseren op basis van de tagnaam, gebruik je getElementsByTagName(), wat zowel een methode van Element als Document is. In een HTML-document kan ook de methode HTMLDocument.getElementsByName() gebruikt worden om elementen te vinden op basis van de name-eigenschap. Ten slotte kan de methode Document.createElement() gebruikt worden om een nieuw Element-element te maken dat in de document wordt ingevoegd.

De methode addEventListener() (en zijn specifieke IE-variant attachEvent()) biedt de mogelijkheid om een eventhandler-functie te registreren voor een specifiek type event op het element. Technisch gezien zijn addEventListener(), removeEventListener() en dispatchEvent() allemaal gedefinieerd door de EventTarget-interface van de 2e DOM Events-specificatie. Alle Element-objecten implementeren EventTarget. Alle Element-objecten implementeren EventTarget.

De andere methoden van dit interface bieden toegang tot de attributen van het element. In HTML-documenten (en in veel XML-documenten) hebben alle attributen eenvoudige string-waarden, en je kunt de eenvoudige methoden getAttribute() en setAttribute() gebruiken voor alle vereiste attribuutoperaties.

Als je een XML-document gebruikt, kan het Entity-referentiesheets als deel van de attribuutwaarde bevatten. Je moet dan Attr-objecten en hun knooppakket gebruiken. Je kunt een attribuut bekijken met getAttributeNode() en setAttributeNode() om een Attr-object te verkrijgen en te instellen, of je kunt de Attr-knopen doorzoeken in de attributes[]-array van het Node-interface. Als je een XML-document gebruikt dat XML-namespace gebruikt, moet je de methoden gebruiken met de naam 'NS'.

In de 1e DOM-norm is de normalize() methode een onderdeel van het Element-interface. In de 2e norm is normalize() een onderdeel van het Node-interface. Alle Element-knopen erfgenamen deze methode en kunnen deze nog steeds gebruiken.

Wetenschappelijke kennis: HTML DOM knopen

In de HTML DOM (Document Object Model) is elk onderdeel een knoop:

  • Het document zelf is een document-knoop
  • Alle HTML-elementen zijn element-knopen
  • Alle HTML-attributen zijn attribuut-knopen
  • Tekst binnen HTML-elementen is tekstknopen
  • Commentaren zijn commentaar-knopen

Element-objecten

In de HTML DOM wordt het Element-object gebruikt om HTML-elementen te vertegenwoordigen.

Element-objecten kunnen onderliggende knopen hebben van het type elementknoop, tekstknoop, of commentaar-knoop.

De NodeList-objecten vertegenwoordigen een lijst van knopen, zoals de verzameling van onderliggende knopen van HTML-elementen.

Elementen kunnen ook attributen hebben. Attributen zijn attribuutknopen (zie volgende sectie).