JavaScript/DOM/Element

Der Begriff Element ist mehrdeutig.
Alle Artikel zu HTML-Elementen finden Sie in der Kategorie:Element (HTML)

Die Schnittstelle Element beschreibt Eigenschaften und Methoden, die allen Elementen gemeinsam ist, während die Eigenschaften und Methoden der Node-Schnittstelle auch Attribut- und Textknoten ansprechen.

Beachten Sie: Das DOM wurde nicht nur für HTML-, sondern auch für XML-Dokumente geschaffen. Die Element-Schnittstelle wird für HTML- und XML-Dokumente genutzt. Eigenschaften und Methoden, die speziell für HTML-Dokumente von Bedeutung sind, gehören zur HTMLElement-Schnittstelle und sind dort beschrieben.

Eigenschaften und Methoden

Eigenschaften

• assignedSlot
• attributes
• childElementCount
• children
• classList
• className
• clientHeight
• clientLeft
• clientTop

• clientWidth
• firstElementChild
• id
• innerHTML
• lastElementChild
• nextElementSibling
• outerHTML
• part
• previousElementSibling

• scrollHeight
• scrollLeft
• scrollLeftMax (Firefox)
• scrollTop
• scrollTopMax (Firefox)
• scrollWidth
• shadowRoot
• slot
• tagName

Methoden

• after()
• animate()
• append()
• attachShadow()
• before()
• closest()
• computedStyleMap()
• getAnimations()
• getAttribute()
• getAttributeNames()
• getAttributeNode()
• getBoundingClientRect()
• getClientRects()

• getElementsByClassName()
• getElementsByTagName()
• hasAttribute()
• hasAttributes()
• hasPointerCapture()
• insertAdjacentElement()
• insertAdjacentHTML()
• insertAdjacentText()
• matches()
• prepend()
• querySelector()
• querySelectorAll()
• releasePointerCapture()
• remove()

• removeAttribute()
• removeAttributeNode()
• replaceChildren()
• replaceWith()
• requestFullScreen()
• requestPointerLock()
• scroll()
• scrollBy()
• scrollIntoView()
• scrollTo()
• setAttribute()
• setAttributeNode()
• setPointerCapture()
• toggleAttribute()

Namen und Namespaces

Das DOM ist für unterschiedliche Dokumententypen konzipiert worden. Die gebräuchlichen sind XML-Dokumente, wozu auch SVG gehört, und HTML-Dokumente, wobei ein HTML-Dokument vom Server mit Content-Type "text/html" oder "application/xhtml+xml" ausgeliefert werden kann.

Dementsprechend kann ein DOM durch einen HTML- oder XML-Parser aufgebaut werden. Der HTML-Parser kennt zwar Namespaces, nutzt sie aber nicht richtig, weshalb die im Folgenden beschriebenen Eigenschaften und Methoden nur bei Verwendung eines XML-Parsers wirklich einen Sinn ergeben.

Zusätzliche Eigenschaften und Methoden speziell für XML-Dokumente

• localName
• namespaceURI
• prefix

• getAttributeNS()
• getAttributeNodeNS()
• getElementsByTagNameNS()
• hasAttributeNS()

• removeAttributeNS()
• setAttributeNS()
• setAttributeNodeNS()

Ein vom DOM repräsentiertes Dokument sowie seine Elemente und Attribute existieren in einem Namensraum. Namensräume sind sinnvoll, wenn Elemente oder Attribute aus unterschiedlichen Spezifikationen gemischt werden müssen und man unterscheiden möchte, ob das Element <rost> sich auf den Teil eines Grills oder auf Korrosion bezieht.

Namens-Attribute in HTML

Das Attribut tagName enthält das Prefix plus den Elementnamen, durch einen Doppelpunkt getrennt und in Großbuchstaben umgewandelt.

Das Attribut prefix enthält null, und in localName steht das gleiche wie in tagName, nur in Kleinbuchstaben. Die namespaceURI entspricht dem Namespace der Spezifikation, zu der das Element gehört, also "http://www.w3.org/1999/xhtml" für HTML 5, "http://www.w3.org/2000/svg" für SVG oder "http://www.w3.org/1998/Math/MathML" für MathML.

Die Zusammenfügung von prefix, einem Doppelpunkt und dem localName wird bei Elementen und Attributen als qualifizierter Name bezeichnet.

Namens-Attribute in XHTML

Das Attribut tagName enthält immer noch Prefix, Doppelpunkt und Elementname, aber die Schreibung ist die aus dem Quelltext.

Sofern ein Prefix verwendet wurde, findet es sich nun im Attribut prefix, und localName enthält nur den Elementnamen. Und wenn ein Namespace festgelegt wurde, so finden Sie ihn in namespaceURI.

Dokument mit Namespace

<main>
   <self:Html id="self" xmlns:self="http://www.selfhtml.org/2021/wiki">
      Hier ist ein Element mit einem Namespace
   </self:Html>
</main>
<script>
   let selfhtml = document.getElementById("self");
   console.log("prefix: " + selfhtml.prefix);
   console.log("localName: " + selfhtml.localName);
   console.log("namespaceURI: " + selfhtml.namespaceURI);
   console.log("tagName: " + selfhtml.tagName);
</script>

Ergebnis mit HTML

   prefix: null
   localName: self:html
   namespaceURI: http://www.w3.org/1999/xhtml
   tagName: SELF:HTML

Ergebnis mit XHTML

   prefix: self
   localName: Html
   namespaceURI: http://www.selfhtml.org/2021/wiki
   tagName: self:Html

Weblinks

• WHATWG Group: Spezifikation des Interfaces Element
• Mozilla Developer Network: Element