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

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
K (l)
K (+ Siehe auch)
 
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]]).
   
−
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 (追記) [[JavaScript/DOM/Node/ (追記ここまで)lastChild(追記) |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'''
 
'''Syntax'''
Zeile 9: Zeile 9:
   
   
−
(削除) == Anwendungsbeispiel == (削除ここまで)
+
Soll der letzte Kindknoten eines Elementes referenziert werden, bei dem es sich um ein Element handelt, dann kann dies unter Verwendung der Eigenschaft <code>lastElementChild</code> bewerkstelligt werden. Ihr Wert ist immer das letzte Kindelement des Objektes über das sie angesprochen wird, oder (追記) <code> (追記ここまで)null(追記) </code> (追記ここまで), wenn dieses Objekt über keine Kindknoten vom Typ Element verfügt.
−
 
 
−
Soll der letzte Kindknoten eines Elementes referenziert werden, bei dem es sich um ein Element handelt, dann kann dies unter Verwendung der Eigenschaft <code>lastElementChild</code> 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|
 
{{Beispiel|
 
{{BeispielCode|
 
{{BeispielCode|
−
<syntaxhighlight lang="(削除) html5 (削除ここまで)">
+
<syntaxhighlight lang="(追記) html (追記ここまで)">
 
<body>
 
<body>
 
   <main>
 
   <main>
Zeile 22: Zeile 20:
 
   <script>
 
   <script>
 
</syntaxhighlight>
 
</syntaxhighlight>
−
<syntaxhighlight lang="(削除) javascript (削除ここまで)">
+
<syntaxhighlight lang="(追記) js (追記ここまで)">
   
 
const lastElement = document.body.lastElementChild;
 
const lastElement = document.body.lastElementChild;
Zeile 29: Zeile 27:
   
 
</syntaxhighlight>
 
</syntaxhighlight>
−
<syntaxhighlight lang="(削除) html5 (削除ここまで)">
+
<syntaxhighlight lang="(追記) html (追記ここまで)">
 
   </script>
 
   </script>
 
</body>
 
</body>
Zeile 41: Zeile 39:
   
 
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.
  +
(追記) == Siehe auch == (追記ここまで)
  +
(追記) {{:JavaScript und das DOM/Node-vs-Element}} (追記ここまで)
  +
(追記) (追記ここまで)
  +
(追記) {{Cards| (追記ここまで)
  +
(追記)   {{Card| (追記ここまで)
  +
(追記)     link=JavaScript und das DOM/Was ist das DOM| (追記ここまで)
  +
(追記)     icon=DOM-3.svg| (追記ここまで)
  +
(追記)     titel=Was ist das DOM?| (追記ここまで)
  +
(追記) * Baumstruktur (追記ここまで)
  +
(追記) * Elementknoten ansprechen (追記ここまで)
  +
(追記) * Textknoten ansprechen (追記ここまで)
  +
(追記)   }} (追記ここまで)
  +
(追記)   {{Card| (追記ここまで)
  +
(追記)     link=DOM-Traversal| (追記ここまで)
  +
(追記)     icon=DOM-2.svg| (追記ここまで)
  +
(追記)     titel=DOM-Traversal| (追記ここまで)
  +
(追記) ''Den Elementbaum rauf und runter klettern!'' (追記ここまで)
  +
(追記)   }} (追記ここまで)
  +
(追記) }} (追記ここまで)
   
 
== Weblinks ==
 
== Weblinks ==

Aktuelle Version vom 1. Februar 2025, 10:41 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


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.

Siehe auch

Mit den Eigenschaften des Node-Objekts werden alle Knoten - auch Textknoten (evtl. sogar mit Whitespace) - ermittelt. Meist will man aber nur Elementknoten ansprechen. Hier haben andere Schnittstellen bessere Methoden, die die gewünschten Elemente herausfiltern:

parentNode →parentElement previousSibling →previousElementSibling nextSibling → nextElementSibling childNodes →children (alle Kindelemente)firstChild →firstElementChild lastChild →lastElementChild
  • Was ist das DOM?
    • Baumstruktur
    • Elementknoten ansprechen
    • Textknoten ansprechen
  • DOM-Traversal

    Den Elementbaum rauf und runter klettern!

Weblinks

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