English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

JavaScript Grundtutorials

JavaScript Objekte

JavaScript Funktionen

JS HTML DOM

JS Browser BOM

AJAX Grundtutorials

JavaScript Referenzhandbuch

JS-DOM-Navigation

HTML DOM ermöglicht es JavaScript, durch Knotenverhältnisse im Knotenbaum zu navigieren.

DOM Knoten

Gemäß W3C HTML DOM Standard, alle Inhalte im HTML-Dokument sind ein Knoten:

  • Das gesamte Dokument ist ein Dokumentknoten

  • Jedes HTML-Element ist ein Elementknoten

  • Der Text im HTML-Element ist ein Textknoten

  • Jedes HTML-Attribut ist ein Attributknoten (nicht empfohlen)

  • Alle Kommentare sind Kommentar-Knoten

Mit HTML DOM können alle Knoten im Knotenbaum über JavaScript erreicht werden.

Neue Knoten können erstellt werden, und alle Knoten können geändert oder gelöscht werden.

Knotenverhältnisse

Zwischen den Knoten im Knotenbaum besteht eine Hierarchiebeziehung.

Die Begriffe "Elternteil", "Kind" und "Schwestern und Brüder" werden verwendet, um Beziehungen zu beschreiben.

  • In der Knotenbaumstruktur wird der oberste Knoten als Wurzel (oder Wurzelknoten) bezeichnet

  • Jeder Knoten hat nur einen Elternknoten, mit Ausnahme des Wurzelknotens (der Wurzelknoten hat keinen Elternknoten)

  • Ein Knoten kann mehrere Kindknoten haben

  • Schwestern und Brüder (Schwestern und Brüder) sind Knoten mit demselben Elternteil

<html>
　　<head>
<title>DOM　Tutorial</title>
　　</head>
　　
<h1>DOM　Nodes</h1>
<p>Hello,　World</p>
　　
</html>

Aus dem obigen HTML können Sie lesen:
<html>是根节点，并且没有父节点
<html>是<head>和<body>的父级
<head>是<html>的第一个孩子
<body>是<html>的最后一个孩子
和：
<head>有一个孩子：<title>
<title>有一个孩子（一个文本节点）：“ DOM Tutorial”
<body>有两个孩子：<h1>和<p>
<h1>有一个孩子（一个文本节点）：“ DOM Nodes”
<p>有一个孩子（一个文本节点）：“ Hello，world”
<h1>和<p>是同级

在节点之间导航

您可以使用以下节点属性在具有JavaScript的节点之间导航：

访问子节点

Sie könnenfirstChild使用DOM节点的属性来访问节点的第一个直接子节点。

<p id="para">
　　<span>First span</span>
　　<b>First Bold</b>
</p>
<script>
var para = document.getElementById("para");
alert(para.firstElementChild.nodeName);　//　returns SPAN
</script>
测试看看 ‹/›

注意：在上面的示例中，输出将是#text，因为插入了文本节点以维护标记之间的空白。任何空格都会创建一个#text节点，从单个空格到多个空格，返回，制表符等。

但是，如果删除空格，则不会插入#text节点，并且span元素将成为段落的第一个子元素：

<p id="para"><span>First span</span>  <b>First Bold</b></p>
<script>
var para = document.getElementById("para");
alert(para.firstChild.nodeName);　//　returns SPAN
</script>
Testen Sie das hier‹/›

访问第一个孩子也可以这样进行：

para.childNodes[0].nodeName;　//　returns SPAN
Testen Sie das hier‹/›

Sie könnenlastChild使用DOM节点的属性来访问节点的最后一个直接子节点。

para.lastChild.nodeName;　//　returns B
Testen Sie das hier‹/›

为避免出现#text或#commentKnotenfirstChild并lastChild返回该问题，您可以选择使用：

firstElementChild属性返回指定父元素的第一个子元素。

<p id="para">
　　<span>First span</span>
　　<b>First Bold</b>
</p>
<script>
var para = document.getElementById("para");
alert(para.firstElementChild.nodeName);　//　returns SPAN
</script>
Testen Sie das hier‹/›

lastElementChild属性返回指定父元素的最后一个子元素。

<p id="para">
　　<span>First span</span>
　　<b>First Bold</b>
</p>
<script>
var para = document.getElementById("para");
alert(para.lastElementChild.nodeName);　//　returns B
</script>
Testen Sie das hier‹/›

}}Hinweis:nodeNameist eine schreibgeschützte Eigenschaft, die den Namen des aktuellen Knotens als Zeichenfolge zurückgibt.

Zugriff auf den übergeordneten Knoten

Sie könnenparentNodeDie Eigenschaft "parentNode" ermöglicht den Zugriff auf das übergeordnete Element des angegebenen Knotens im DOM-Baum.

<div>
　　　<p>Das ist der erste P innerhalb des DIV</p>
　　　<p id="para">Das ist der zweite P innerhalb des DIV</p>
　　　<p>Das ist der dritte P innerhalb des DIV</p>
</div>
<script>
var para = document.getElementById("para");
alert(para.parentNode.nodeName);　　//　returns DIV
</script>
Testen Sie das hier‹/›

Sie können auchparentElementDie Eigenschaft "parentElement" gibt den Elterneknoten des angegebenen Elements zurück.

um die Brüderknoten zu erreichen

Sie könnenpreviousSiblingundnextSiblingDie Eigenschaft "nextSibling" und "previousSibling" ermöglichen den Zugriff auf die vorherigen und nächsten Knoten im DOM-Baum.

<div id="div-1">Hier ist div-1</div>
<div id="div-2">Hier ist div-2</div>
<div id="div-3">Hier ist div-3</div>
<script>
var x = document.querySelector("#div-2");
alert(x.previousSibling.nodeName);
alert(x.nextSibling.nodeName);
</script>
Testen Sie das hier‹/›

oder Sie könnenpreviousElementSiblingundnextElementSiblingum alle leeren Textknoten zu überspringen und den nächsten und vorherigen Elementknoten desselben Grades zu erhalten.

<div id="div-1">Hier ist div-1</div>
<div id="div-2">Hier ist div-2</div>
<div id="div-3">Hier ist div-3</div>
<script>
var x = document.querySelector("#div-2");
alert(x.previousElementSibling.textContent);
alert(x.nextElementSibling.textContent);
</script>
Testen Sie das hier‹/›

textContentDie Eigenschaft "textContent" gibt den Textinhalt des Knotens an.

DOM-Wurzelknoten

Die folgenden beiden Eigenschaften ermöglichen den Zugriff auf das gesamte Dokument:

document.bodyDie Eigenschaft setzt oder gibt das Element des Dokuments zurück.

<!DOCTYPE html>
<html>
<p>Hello, World!</p>
<div>
　　<p>DOM-Wurzelknoten</p>
　　<p>Die Eigenschaft "document.body" setzt oder gibt das "body"-Element des Dokuments zurück.</p>
</div>
<script>
alert(document.body.innerHTML);
</script>
</html>
Testen Sie das hier‹/›

document.documentElementDie Eigenschaft "document.documentElement" gibt den Dokument zurück.<html>Element.

<!DOCTYPE html>
<html>
<p>Hello, World!</p>
<div>
　　<p>DOM-Wurzelknoten</p>
　　<p>Die Eigenschaft "document.documentElement" gibt den Wurzelelement des Dokuments zurück.</p>
</div>
<script>
alert(document.documentElement.innerHTML);
</script>
</html>
Testen Sie das hier‹/›

nodeType-Attribut

nodeTypeDie Attribute werden in numerischer Form die Knotenart des angegebenen Knotens zurückgeben.

var x = document.getElementById("myPara").nodeType;
Testen Sie das hier‹/›

Das DOM-Baum hat verschiedene Knotenarten, wie Elemente, Text, Kommentare usw.

Jeder Knoten hat einennodeTypeAttribute, die verwendet werden können, um den Knotenart zu finden, die bearbeitet werden soll.

Nachstehende Tabelle listet die wichtigsten Knotenarten auf:

KnotenTypBeispiel
ELEMENT_NODE1ein<p class="heading">Hallo, Welt</p>
ATTRIBUTE_NODE2　class =“heading”（nicht empfohlen)
TEXT_NODE3Hallo, Welt
COMMENT_NODE8<!--Dies ist ein Kommentar-->
DOCUMENT_NODE9HTML-Dokument selbst(Elternteil von <html>)
DOCUMENT_TYPE_NODE10<!doctype html>
JS-Window-BrowserobjektmodellJS-DOM-Änderung-Elementeigenschaft