JavaScript/DOM/ParentNode/lastElementChild: Unterschied zwischen den Versionen

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Zeile 1: Zeile 1:
 
Die Eigenschaft '''lastElementChild''' enthält eine Referenz auf den letzten Kindknoten eines DOM Knotens, der ein Element ist. Sie kann auf allen DOM-Objekten verwendet werden, die die Schnittstelle [[JavaScript/DOM/ParentNode|ParentNode]] implementieren (d.h. die Objekte mit den Schnittstellen [[JavaScript/DOM/Document|Document]], [[JavaScript/DOM/DocumentFragment|DocumentFragment]] und [[JavaScript/DOM/Element|Element]]).
 
Die Eigenschaft '''lastElementChild''' enthält eine Referenz auf den letzten Kindknoten eines DOM Knotens, der ein Element ist. Sie kann auf allen DOM-Objekten verwendet werden, die die Schnittstelle [[JavaScript/DOM/ParentNode|ParentNode]] implementieren (d.h. die Objekte mit den Schnittstellen [[JavaScript/DOM/Document|Document]], [[JavaScript/DOM/DocumentFragment|DocumentFragment]] und [[JavaScript/DOM/Element|Element]]).
(削除) {{Iconset|meta|chr|fx|edge-|op|saf-}} (削除ここまで)
 
   
 
Das <code>lastElementChild</code> ist nur selten mit dem <code>lastChild</code> identisch, da sich bei lesbar geschriebenem HTML zwischen dem Ende-Tag des Kindelements und dem Ende-Tag des Elements, in dem es enthalten ist, zumeist noch Leerraum befindet, der bereits einen Textknoten darstellt.
 
Das <code>lastElementChild</code> ist nur selten mit dem <code>lastChild</code> identisch, da sich bei lesbar geschriebenem HTML zwischen dem Ende-Tag des Kindelements und dem Ende-Tag des Elements, in dem es enthalten ist, zumeist noch Leerraum befindet, der bereits einen Textknoten darstellt.
Zeile 39: Zeile 38:
 
Im gezeigten HTML Beispielfragment enthält das <code><nowiki><body></nowiki></code>-Element zwei Kindelemente: <code><nowiki><main></nowiki></code> und <code><nowiki><script></nowiki></code>.  
 
Im gezeigten HTML Beispielfragment enthält das <code><nowiki><body></nowiki></code>-Element zwei Kindelemente: <code><nowiki><main></nowiki></code> und <code><nowiki><script></nowiki></code>.  
   
Im Script wird zunächst über die gleichnamige Eigenschaft des Dokumentobjektes auf das <code>body</code>-Element zugegriffen. Auf diesem Objekt wird dann die Eigenschaft lastElementChild gelesen, wodurch man eine Referenz auf das <code><nowiki><script></nowiki></code>-Element erhält. Diese Referenz wird als [[JavaScript/Variable(削除) / (削除ここまで)const|Konstante]] <code>lastElement</code> gespeichert. Darüber wird dann die [[JavaScript/DOM/Node/nodeName|<code>nodeName</code>]] Eigenschaft gelesen und ausgegeben.  
+
Im Script wird zunächst über die gleichnamige Eigenschaft des Dokumentobjektes auf das <code>body</code>-Element zugegriffen. Auf diesem Objekt wird dann die Eigenschaft lastElementChild gelesen, wodurch man eine Referenz auf das <code><nowiki><script></nowiki></code>-Element erhält. Diese Referenz wird als [[JavaScript/Variable(追記) # (追記ここまで)const|Konstante]] <code>lastElement</code> gespeichert. Darüber wird dann die [[JavaScript/DOM/Node/nodeName|<code>nodeName</code>]] Eigenschaft gelesen und ausgegeben.  
   
 
Da es sich um einen Elementknoten in einem HTML Dokument handelt, kann an Stelle des <code>nodeName</code> genauso gut der [[JavaScript/DOM/Element/tagName|<code>tagName</code>]] verwendet werden, wie die dritte Scriptzeile zeigt.
 
Da es sich um einen Elementknoten in einem HTML Dokument handelt, kann an Stelle des <code>nodeName</code> genauso gut der [[JavaScript/DOM/Element/tagName|<code>tagName</code>]] verwendet werden, wie die dritte Scriptzeile zeigt.

Version vom 18. Januar 2025, 14:46 Uhr

Die Eigenschaft lastElementChild enthält eine Referenz auf den letzten Kindknoten eines DOM Knotens, der ein Element ist. Sie kann auf allen DOM-Objekten verwendet werden, die die Schnittstelle ParentNode implementieren (d.h. die Objekte mit den Schnittstellen Document, DocumentFragment und Element).

Das lastElementChild ist nur selten mit dem lastChild identisch, da sich bei lesbar geschriebenem HTML zwischen dem Ende-Tag des Kindelements und dem Ende-Tag des Elements, in dem es enthalten ist, zumeist noch Leerraum befindet, der bereits einen Textknoten darstellt.

Syntax

ParentNode.lastElementChild


Anwendungsbeispiel

Soll der letzte Kindknoten eines Elementes referenziert werden, bei dem es sich um ein Element handelt, dann kann dies unter Verwendung der Eigenschaft lastElementChild bewerkstelligt werden. Ihr Wert ist immer das letzte Kindelement des Objektes über das sie angesprochen wird, oder null, wenn dieses Objekt über keine Kindknoten vom Typ Element verfügt.

Beispiel
<body>
 <main>
 <p>Das Element <code>SCRIPT</code> ist das letzte Kindelement von <code>BODY</code>.</p>
 </main>
 <script>
const lastElement = document.body.lastElementChild;
console.log(lastElement.nodeName); // SCRIPT
console.log(lastElement.tagName); // SCRIPT
 </script>
</body>

Im gezeigten HTML Beispielfragment enthält das <body>-Element zwei Kindelemente: <main> und <script>.

Im Script wird zunächst über die gleichnamige Eigenschaft des Dokumentobjektes auf das body-Element zugegriffen. Auf diesem Objekt wird dann die Eigenschaft lastElementChild gelesen, wodurch man eine Referenz auf das <script>-Element erhält. Diese Referenz wird als Konstante lastElement gespeichert. Darüber wird dann die nodeName Eigenschaft gelesen und ausgegeben.

Da es sich um einen Elementknoten in einem HTML Dokument handelt, kann an Stelle des nodeName genauso gut der tagName verwendet werden, wie die dritte Scriptzeile zeigt.

Weblinks


Abgerufen am 4.09.2025
von "http://wiki.selfhtml.org/wiki/JavaScript/DOM/ParentNode/lastElementChild"