Auf unseren Webseiten können wir nicht nur die vom DOM bereitgestellten Methoden zum Abrufen von Knoten verwenden, sondern auch die hierarchische Beziehung von Knoten verwenden. Diese sind heute relativ einfach.
Der gesamte Inhalt einer Webseite ist ein Knoten (Beschriftung, Attribut, Text, Kommentar usw.), und im DOM werden Knoten durch Knoten dargestellt.
Auf alle Knoten im HTML-DOM-Baum kann über JavaScript zugegriffen werden, und alle HTML-Elemente (Knoten) können geändert, erstellt oder gelöscht werden. 
Im Allgemeinen verfügen Knoten über mindestens drei grundlegende Attribute: nodeType (Knotentyp), nodeName (Knotenname) und nodeValue (Knotenwert).
In unserer tatsächlichen Entwicklung werden Knotenoperationen hauptsächlich auf Elementknoten ausgeführt.
wird der DOM-Baum verwendet, um Knoten in verschiedene hierarchische Beziehungen zu unterteilen. Die häufigste hierarchische Beziehung ist die Eltern-Kind-Bruder-Beziehung.
node.parentNode
<p class="parent">
<p class="son"></p>
</p>
<Skript>
var son = document.querySelector(".son");
console.log(son.parentNode);
</script> 
1.node.childNodes (Standard)
node.childNodes gibt eine Sammlung zurück, die die untergeordneten Knoten des angegebenen Knotens enthält. Diese Sammlung ist eine sofort aktualisierte Sammlung.
<ul>
<li>Ich bin Li</li>
<li>Ich bin Li</li>
<li>Ich bin Li</li>
<li>Ich bin Li</li>
</ul>
<Skript>
var ul = document.querySelector('ul');
//Untergeordnete Knoten childNodes Alle untergeordneten Knoten, einschließlich Elementknoten, Textknoten usw.
console.log(ul.childNodes);
</script> 
Warum gibt es hier fünf Textknoten? Sie entsprechen tatsächlich fünf Zeilenumbrüchen. Siehe das Bild unten: 
Diese fünf Zeilenumbrüche sind Textknoten sowie vier li-Elementknoten, insgesamt 9.
Hinweis: Der Rückgabewert enthält alle untergeordneten Knoten, einschließlich Elementknoten, Textknoten usw.
Wenn Sie nur die Elementknoten erhalten möchten, müssen Sie dies speziell behandeln. Daher empfehlen wir grundsätzlich nicht die Verwendung von childNodes.
var ul = document.querySelector('ul');
for (var i = 0;i<ul.length;i++){
if (ul.childNodes[i].nodeType == 1){
console.log(ul.childNodes[i]);
}
} 2.node.children (nicht standardmäßig)
node.children ist eine schreibgeschützte Eigenschaft, die alle untergeordneten Elementknoten zurückgibt. Es werden nur untergeordnete Elementknoten zurückgegeben, andere Knoten werden nicht zurückgegeben (darauf konzentrieren wir uns).
Obwohl es sich bei Kindern nicht um einen Standard handelt, wird es von verschiedenen Browsern unterstützt, sodass wir es bedenkenlos verwenden können.
<ul>
<li>Ich bin Li</li>
<li>Ich bin Li</li>
<li>Ich bin Li</li>
<li>Ich bin Li</li>
</ul>
<Skript>
var ul = document.querySelector('ul');
console.log(ul.children);
</script> 
1.Knoten
2.node.lastChild
firstChild gibt den ersten untergeordneten Knoten zurück, wenn dieser nicht gefunden werden kann. Dasselbe gilt für lastChild. Ebenso sind alle Knoten enthalten.
3.node.firstElementChild
firstElementChild gibt den ersten untergeordneten Elementknoten zurück oder null, wenn er nicht gefunden wird.
4.node.lastElementChild
lastElementChild gibt den letzten untergeordneten Elementknoten zurück oder null, wenn er nicht gefunden wird.
Hinweis: Diese beiden Methoden weisen Kompatibilitätsprobleme auf und werden nur von IE9 und höher unterstützt.
5.node.children[0]
5.node.children[node.children.length - 1]
Hinweis: Es gibt kein Kompatibilitätsproblem mit der tatsächlichen Entwicklungsschreibmethode.
<ul>
<li>Ich bin Li</li>
<li>Ich bin Li</li>
<li>Ich bin Li</li>
<li>Ich bin Li</li>
</ul>
<Skript>
var ul = document.querySelector('ul');
// 1. Ob es sich um einen Textknoten oder einen Elementknoten handelt console.log(ul.firstChild);
console.log(ul.lastChild);
// 2. Den entsprechenden Selbstelementknoten zurückgeben. Nur IE9 und höher unterstützen console.log(ul.firstElementChild);
console.log(ul.lastElementChild);
// 3. Es gibt kein Kompatibilitätsproblem console.log(ul.children[0]);
console.log(ul.children[ul.children.length - 1]);
</script> 
1.nächsterGeschwister
nextSibling gibt den nächsten Geschwisterknoten des aktuellen Elements zurück oder null, wenn er nicht gefunden wird. Ebenso sind alle Knoten enthalten.
2.Knoten.VorherigerGeschwister
previousSibling gibt den vorherigen Geschwisterknoten des aktuellen Elements zurück oder null, wenn er nicht gefunden wird. Ebenso sind alle Knoten enthalten.
3.node.nextElementSibling
nextElementSibling gibt den nächsten Geschwisterelementknoten des aktuellen Elements zurück. Wenn er nicht gefunden wird, wird null zurückgegeben.
4. Knoten. previousElementSibling
previousElementSibling gibt den vorherigen Geschwisterelementknoten des aktuellen Elements zurück oder null, wenn er nicht gefunden wird.
Hinweis: Diese beiden Methoden weisen Kompatibilitätsprobleme auf und werden nur von IE9 und höher unterstützt.
Wie kann man also eine Funktion kapseln, die die Kompatibilität erfüllt und Geschwisterelementknoten finden kann?
function getNextElementSibling(element){
var el = Element;
while(el = el.nextSibling){
if(el.nodeType == 1){
Rückkehr el;
}
}
null zurückgeben;
} Der oben gekapselte Code kann gelöst werden, aber Sie müssen nicht zu viel nachdenken, da der IE-Browser bald nicht mehr bereitgestellt wird. Sie müssen sich also nur den Knoten nextElementSibling merken und müssen sich keine Sorgen um die Kompatibilität machen Probleme.
document.createElement (' tagName ').
Die Methode document.createElenent () erstellt das durch tagName angegebene Í TML-Element. Da diese Elemente ursprünglich nicht existierten und basierend auf meinen Anforderungen dynamisch generiert wurden, werden wir auch als dynamisch erstellte Elementknoten bezeichnet.
1.node.appendChild(child)
Die Methode node.appendChild () fügt einen Knoten am Ende der Liste der untergeordneten Knoten des angegebenen übergeordneten Knotens hinzu. Ähnlich dem After-Pseudoelement in CSS.
2.node.insertBefore(child, angegebenes Element)
<ul></ul>
<Skript>
var ul = document.querySelector("ul");
var li =document.createElement("li");
var span = document.createElement("span")
ul.appendChild(li);
ul.insertBefore(span,ul.children[0]);
</script> 
node.removeChild(child)
Die Methode node.removeChild(child) löscht einen untergeordneten Knoten aus dem DOM und gibt den gelöschten Knoten zurück.
<ul>
<li>aniu</li>
<li>heiraten</li>
<li>Tom</li>
</ul>
<Skript>
var ul = document.querySelector("ul");
ul.removeChild(ul.children[2]);
</script> 
node.cloneNode()
Die Methode node.cloneNode() gibt eine Kopie des Knotens zurück, der diese Methode aufgerufen hat. Wird auch als Klonknoten/Kopierknoten bezeichnet
1. Wenn der Klammerparameter leer oder falsch ist, handelt es sich um eine flache Kopie, d. h. nur der Knoten selbst wird geklont und die darin enthaltenen untergeordneten Knoten werden nicht geklont.
2. Wenn der Klammerparameter wahr ist, handelt es sich um eine tiefe Kopie, die den Knoten selbst und alle seine untergeordneten Knoten kopiert.
<ul>
<li>aniu</li>
<li>heiraten</li>
<li>Tom</li>
</ul>
<Skript>
var ul = document.querySelector("ul");
var li1 = ul.children[0].cloneNode(); //Flache Kopie var li2 = ul.children[0].cloneNode(true); //Tiefe Kopie ul.appendChild(li1);
ul.appendChild(li2);
</script> 