HTML DOM Element Object

Element-objektet

I HTML DOM repræsenterer Element-objektet HTML-elementer som P, DIV, A, TABLE eller andre HTML-elementer.

Egenskaber og metoder

Følgende egenskaber og metoder kan bruges til alle HTML-elementer:

Egenskab / Metode Beskrivelse
accessKey Sæt eller returner værdien af elementets accesskey-attribut.
addEventListener() Tilføj eventhandler til elementet.
appendChild() Tilføj (append) nye underknuder til elementet.
attributes Returner elementets NamedNodeMap af egenskaber.
blur() Fjern fokus fra elementet.
childElementCount Returner antallet af elementets underelementer.
childNodes Returner en NodeList af elementets underknuder.
children Returner en HTMLCollection af elementets underelementer.
classList Returner elementets klassenavn.
className Sæt eller returner værdien af elementets class-attribut.
click() Simuler museklik på elementet.
clientHeight Returner højden af elementet, inklusive indrykning.
clientLeft Returner bredden af elementets venstre kant.
clientTop Returner bredden af elementets øvre kant.
clientWidth Returner bredden af elementet, inklusive indrykning.
cloneNode() Klon elementet.
closest() Søg efter den nærmeste element i DOM-treet, der matcher CSS-vælgeren.
compareDocumentPosition() Compare the document positions of two elements.
contains() Return true if the node is a descendant of the 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 Indstil eller returner tekstindholdet for knuden og dens efterkommere.
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 Return the last child element of the element.
matches() Return true if the element matches the given CSS selector.
namespaceURI Return the namespace URI of the element.
nextSibling Return the next node at the same level in the node tree.
nextElementSibling Return the next element at the same level in the node tree.
nodeName Return the name of the node.
nodeType Return the node type of the node.
nodeValue Set or return the value of the node.
normalize() Merge adjacent text nodes within the element and remove empty text nodes.
offsetHeight Return the height of the element, including padding, border, and scrollbars.
offsetWidth Return the width of the element, including padding, border, and scrollbars.
offsetLeft Return the horizontal offset position of the element.
offsetParent Return the offset container of the element.
offsetTop Return the vertical offset position of the element.
outerHTML Set or return the content of the element (including start and end tags).
outerText Set or return the external text content of the node and its descendants.
ownerDocument Return the root element (document object) of the element.
parentNode Return the parent node of the element.
parentElement Return the parent element node of the element.
previousSibling Return the previous node at the same level in the node tree.
previousElementSibling Return the previous element at the same level in the node tree.
querySelector() Return the first child element that matches the CSS selector.
querySelectorAll() Return all child elements that match the CSS selector.
remove() Remove the element from the DOM.
removeAttribute() Remove the attribute from the element.
removeAttributeNode() Remove the attribute node and return the removed node.
removeChild() Remove the child node from the element.
removeEventListener() Remove the event handler attached using the addEventListener() method.
replaceChild() Replace the child nodes of the element.
scrollHeight Return the total height of the element, including padding.
scrollIntoView() Rul elementet ind i browservinduets synlige område.
scrollLeft Indstil eller returner antallet af pixel, som elementets indhold rulles til venstre.
scrollTop Indstil eller returner antallet af pixel, som elementets indhold rulles ned ad.
scrollWidth Returner elementets samlede bredde, herunder indrykning.
setAttribute() Indstil eller ændr værdien af egenskaben.
setAttributeNode() Indstil eller ændr egenskabsnoden.
style Indstil eller returner værdien af elementets style egenskab.
tabIndex Indstil eller returner værdien af elementets tabIndex egenskab.
tagName Returner elementets etiketnavn.
textContent Indstil eller returner tekstindholdet for knuden og dens efterkommere.
title Indstil eller returner værdien af elementets title egenskab.
toString() Konverter element til en streng.

Element interface detaljer

Element interface repræsenterer HTML elementer, XML elementer eller mærker. tagName egenskaben specificerer navnet på elementet. Dokumentets documentElement egenskab refererer til dokumentets rod Element objekt. HTMLDocument objektets body egenskab gør det samme, det refererer til dokumentets <body> element. For at finde et specifikt navngivet element i en HTML dokument, brug Document.getElementById() (og giv elementet en unik navn via id egenskaben). For at finde elementer via tagnavn, brug getElementsByTagName() , som både er en metode på Element og Document. I HTML dokumenter kan man også bruge en lignende HTMLDocument.getElementsByName() metode til at finde elementer baseret på deres name egenskab. Til sidst kan man bruge Document.createElement() metoden til at skabe nye Element elementer, der skal indsættes i dokumentet.

addEventListener() metoden (og dens specifikke IE-erstatning attachEvent() ) tilbyder en metode til at registrere eventhandler-funktioner for specifikke typer af begivenheder på dette element. Tekniske set er addEventListener() , removeEventListener() og dispatchEvent() alle defineret af 2. DOM Events specifikationens EventTarget interface. Alle Element objekter implementerer EventTarget.

Dette grænseflades andre metoder giver adgang til elementets egenskaber. I HTML-dokumenter (og mange XML-dokumenter) har alle egenskaber en simpel strengværdi, og du kan bruge enkle metoder getAttribute() og setAttribute() til at udføre de nødvendige egenskabsoperationer.

Hvis du bruger et XML-dokument, kan det indeholde entity-referencer som en del af egenskabsværdier, du skal bruge Attr-objektet og dets knude-træ. Du kan bruge getAttributeNode() og setAttributeNode() til at få fat i og sætte Attr-objektet, eller du kan gennemgå Attr-knuderne i arrays[] i Node-grænsefladen. Hvis du bruger et XML-dokument med et navnespace, skal du bruge metoder med navne, der indeholder "NS".

I 1. DOM-standard er normalize() metoden en del af Element-grænsefladen. I 2. standard er normalize() en del af Node-grænsefladen. Alle Element-knuder arver denne metode og kan stadig bruge den.

Kendskab: HTML DOM-knuder

I HTML DOM (dokumentobjektmodellen) er hver del en knude:

  • Dokumentet selv er et dokumentknude
  • Alle HTML-elementer er elementknuder
  • Alle HTML-egenskaber er egenskabsknuder
  • Tekst inden for HTML-elementer er tekstknuder
  • Kommentarer er kommentarknuder

Element-objektet

I HTML DOM repræsenterer Element-objektet HTML-elementer.

Element-objektet kan have underknuder af typen elementknude, tekstknude, kommentarknude.

NodeList-objektet repræsenterer en liste af knuder, f.eks. HTML-elementernes underknuder.

Element kan også have egenskaber. Egenskaber er egenskabsknuder (se næste afsnit).