HTML DOM Element-objekt

Element-objekt

I HTML DOM representerar Element-objekt HTML-element, såsom P, DIV, A, TABLE eller något annat HTML-element.

Egenskaper och metoder

Följande egenskaper och metoder kan användas för alla HTML-element:

Egenskap / Metod Beskrivning
accessKey Sätt eller returnera elementets accesskey-attribut.
addEventListener() Anslut eventhanterare till elementet.
appendChild() Lägg till (använd) nya undernoder till elementet.
attributes Returnera elementets NamedNodeMap av attribut.
blur() Ta bort fokus från elementet.
childElementCount Returnera antalet underelement för elementet.
childNodes Returnera NodeList av elementets undernoder.
children Returnera HTMLCollection av elementets underlement.
classList Returnera elementets klassnamn.
className Sätt eller returnera elementets class-attributvärde.
click() Simulera musklick på elementet.
clientHeight Returnera elementets höjd inklusive innermärgar.
clientLeft Returnera elementets vänstra kantlinjens bredd.
clientTop Returnera elementets övre kantlinjens bredd.
clientWidth Returnera elementets bredd inklusive innermärgar.
cloneNode() Klona element.
closest() Sök närmaste element som matchar CSS-väljaren i DOM-trädet.
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 receive 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 Ställ in eller returnera textinnehållet för noden och dess efterkommande.
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 Återge elementets sista underelement.
matches() Återge true om elementet matchar den givna CSS-väljaren.
namespaceURI Återge elementets namnrymd URI.
nextSibling Återge noden som ligger på samma nodträdnivå men är närmare roden.
nextElementSibling Återge elementet som ligger på samma nodträdnivå men är närmare roden.
nodeName Återge nodens namn.
nodeType Återge nodtypen.
nodeValue Sätt eller återge nodens värde.
normalize() Kombinera närliggande textnoder i elementet och ta bort tomma textnoder.
offsetHeight Återge elementets höjd inklusive inre marginaler, kanter och rullgardiner.
offsetWidth Återge elementets bredd inklusive inre marginaler, kanter och rullgardiner.
offsetLeft Återge elementets horisontella avstånd från vänsterkanten.
offsetParent Återge elementets avstånd från närmaste föräldernod som har en position.
offsetTop Återge elementets vertikala avstånd från toppen.
outerHTML Sätt eller återge elementets innehåll (inklusive öppnings- och avslutningsetiketter).
outerText Sätt eller återge nodens och dess efterkommande utomstående textinnehåll.
ownerDocument Återge elementets rodelement (dokumentobjektet).
parentNode Återge elementets föräldernod.
parentElement Återge elementets föräldernod.
previousSibling Återge det föregående noden på samma nodträdnivå.
previousElementSibling Återge det föregående elementet på samma nodträdnivå.
querySelector() Återge det första underelementet som matchar CSS-väljaren.
querySelectorAll() Återge alla underelement som matchar CSS-väljaren.
remove() Ta bort elementet från DOM.
removeAttribute() Ta bort egenskapen från elementet.
removeAttributeNode() Ta bort egenskapsnoden och returnera den borttagna noden.
removeChild() Ta bort undernoden från elementet.
removeEventListener() Ta bort eventhanterare som har anslutits med addEventListener() metoden.
replaceChild() Ersätt elementets undernoder.
scrollHeight Återge elementets totala höjd inklusive inre marginaler.
scrollIntoView() Rulla elementet till den synliga området i webbläsarens fönster.
scrollLeft Ställ in eller returnera antalet pixlar för horisontell rullning av elementets innehåll.
scrollTop Ställ in eller returnera antalet pixlar för vertikell rullning av elementets innehåll.
scrollWidth Returnera elementets totala bredd inklusive inre marginaler.
setAttribute() Ställ in eller ändra värdet för egenskapen.
setAttributeNode() Ställ in eller ändra egenskapsnoden.
style Ställ in eller returnera värdet för elementets style-egenskap.
tabIndex Ställ in eller returnera värdet för elementets tabIndex-egenskap.
tagName Returnera elementets taggnamn.
textContent Ställ in eller returnera textinnehållet för noden och dess efterkommande.
title Ställ in eller returnera värdet för elementets title-egenskap.
toString() Konvertera element till sträng.

Element-gränssnittet i detalj

Element-gränssnittet representerar HTML-element, XML-element eller taggar. Egenskapen tagName specificerar elementets namn. Dokumentets documentElement-egenskap refererar till denna dokumentets rot Element-objekt. HTMLDocument-objektets body-egenskap är liknande, den refererar till dokumentets <body>-element. För att hitta ett specifikt namngivet element i en HTML-dokument, använd Document.getElementById() (och ge elementet en unik namn via id-egenskapen). För att lokalisera element via taggnamn, använd getElementsByTagName(), vilket både är en metod för Element och Document. I HTML-dokument kan man också använda liknande HTMLDocument.getElementsByName() metod för att hitta element baserat på deras name-egenskap. Slutligen kan man använda Document.createElement() metod för att skapa ett nytt Element-element att infoga i dokumentet.

Metoden addEventListener() (och dessas specifika IE-alternativ attachEvent()) tillhandahåller en metod för att registrera en händelseslutande funktion för en specifik händelse typ på ett element. Tekniskt sett är addEventListener(), removeEventListener() och dispatchEvent() definierade av 2:nivå DOM Events-standarden via EventTarget-gränssnittet. Alla Element-objekt implementerar EventTarget.

Denna gränssnittets andra metoder ger åtkomst till elementets egenskaper. I HTML-dokument (och många XML-dokument) har alla egenskaper enkla strängvärden, och du kan använda enkla metoder getAttribute() och setAttribute() för att utföra nödvändiga egenskapsoperationer.

Om du använder ett XML-dokument kan det innehålla entity-referenser som en del av egenskapsvärdet, du måste då använda Attr-objektet och dess nodträd. Du kan använda getAttributeNode() och setAttributeNode() för att få och sätta Attr-objektet, eller du kan traversera Attr-noder i arrays[] i Node-gränssnittet. Om du använder ett XML-dokument som använder XML-namnrymdar måste du använda metoder med namn som innehåller "NS".

I 1:a DOM-standarden är normalize() metoden en del av Element-gränssnittet. I 2:a standarden är normalize() en del av Node-gränssnittet. Alla Element-noder ärver denna metod och kan fortfarande använda den.

Kunskapsområde: HTML DOM noder

I HTML DOM (dokumentobjektmodellen) är varje del en nod:

  • Dokumentet självt är ett dokumentnod
  • Alla HTML-element är elementnoder
  • Alla HTML-attribut är egenskapsnoder
  • Text inom HTML-element är textnoder
  • Kommentarer är kommentar noder

Element-objekt

I HTML DOM representerar Element-objekt HTML-element.

Element-objekt kan ha undernoder av typen elementnod, textnod, eller kommentar nod.

NodeList-objekt representerar en nodlista, till exempel samlingen av undernoder för HTML-element.

Element kan också ha egenskaper. Egenskaper är egenskapsnoder (se nästa avsnitt).