Detaillierte Erläuterung der DOM-Operationen in JavaScript

1. Was ist DOM

JavaScript besteht aus drei Teilen: ECMAScript, DOM und BOM stellt die Methode und Schnittstelle zur Beschreibung von Webinhalten dar ist das Dokumentobjektmodell (Dokumentobjektmodell). Auf einer Webseite sind die Objekte, die die Seite (oder das Dokument) organisieren, in einer Baumstruktur organisiert. Das Standardmodell, das zur Darstellung der Objekte im Dokument verwendet wird, wird DOM genannt, und die Baumstruktur wird oft als DOM-Baum bezeichnet.

Die Einführung von DOM in Wikipedia ist genauer: DOM ist eine plattformübergreifende und sprachunabhängige Anwendungsprogrammierschnittstelle, die aktuelle HTML-, XHTML- oder XML-Dokumente als Baumstruktur verarbeitet, in der jeder Knoten ein Objekt ist , jeder Knoten repräsentiert einen Teil des Dokuments.

2. DOM-Knoten

1. Knotentypen

Der DOM-Baum besteht aus vielen verschiedenen Knotentypen, und diese Knotentypen haben einen nodeType-Wert. Mithilfe des nodeType-Werts können wir bestimmen, ob wir einen Knoten des entsprechenden Typs erhalten oder benötigen.

节点类型	元素节点(标签节点)	属性节点	文本节点(空格、换行、文字)	注释节点	document节点
nodeType值	1	2	3	8	9

Zusätzlich zur Beurteilung des Typs anhand des nodeType-Werts können wir auch die Knotennamen von Elementknoten und Attributknoten über nodeName anzeigen und nadeValue verwenden, um die Attributwerte von Attributknoten anzuzeigen.

2. Holen Sie sich den Elementknoten

document.getElementById(id);
document.getElementByTagName(tagname);
document.getElementByClassName(classname);

Normalerweise Sie Wenn Sie ändern oder Elementknoten in HML in JavaScript verwenden, müssen diese vor dem Aufruf abgerufen werden. Dann erhalten wir sie, indem wir das Id-Attribut oder das Class-Attribut des Elements festlegen oder den Tag-Namen verwenden. Beachten Sie jedoch, dass die Methode getElementById() in XML nicht funktioniert. In XML-Dokumenten müssen Suchen mit dem id-Attribut durchgeführt werden und dieser Typ muss in der XML-DTD deklariert werden.

Nachdem wir den gewünschten Knoten erhalten haben, können wir auch andere Knoten über die Beziehung der Knoten bedienen. Hier nehmen wir als Beispiel das p-Element als anfänglichen Elementknoten.

　2.1 Untergeordnete Knoten

p.children();
p.childNodes();

Rufen Sie die untergeordneten Knoten unter p ab, während p.children() nur die untergeordneten Knoten von Elementknoten abrufen kann, während p.childNodes() alle Arten von untergeordneten Knoten abrufen wird, was bedeutet, dass leere Textknoten analysiert werden.

　2.2 Übergeordneter Knoten

p.parentNode();
p.offsetParent();

Holen Sie sich den übergeordneten Knoten von p.offsetParent() ruft den Vorgängerknoten mit Positionierungsattribut ab, d. h. ausgehend vom übergeordneten Knoten, wenn der übergeordnete Knoten vorhanden ist Es gibt kein Positionierungsattribut. Durchsuchen Sie dann den übergeordneten Knoten des übergeordneten Knotens, bis ein Knoten mit Positionierungsattributen gefunden wird.

　2.3 Geschwisterknoten

//下一个兄弟节点 p.nextElementSibling();
p.nextSibling();//上一个兄弟节点 p.previousElementSibling();
p.previousSibling();

Ob es hier ein Element gibt, ist entscheidend. Genau wie beim Abrufen untergeordneter Knoten analysieren p.nextSibling() und p. previousSibling() leere Knoten und get Geben Sie das Leerzeichen unter p ein oder drücken Sie die Eingabetaste.

　2.4 Kopf- und Schwanz-Kindknoten

//获取p的第一个子节点p.firstElementChild();
p.firstChild();//获取p的最后一个子节点p.lastElementChild();
p.lastElementChild();

Der Unterschied ist der gleiche wie oben.

3. Knotenoperationen

Neben dem Hinzufügen und Löschen von Änderungsknoten in HTML können wir auch Knoten in JavaScript bedienen.

　3.1 Knoten erstellen

//创建节点/创建文本节点createElement();
createTextNode()；

Das Erstellen von Textknoten wird im Allgemeinen verwendet, um Inhalt zu Elementknoten hinzuzufügen. Es erstellt statischen Text und kann kein HTML-Format wie innerHTML haben, daher ist innerText sicherer wieder.

　3.2 Knoten hinzufügen

　Der von uns erstellte Knoten wird nicht automatisch zu HTML hinzugefügt, wir müssen den erstellten Knoten bedienen.

//向尾部添加子节点 appendChild(); 
//向目标节点之前添加insertBefore(newElement,targetElement);

Der zweite Parameter von insertBefore() ist ein optionaler Parameter. Wenn Sie den zweiten Parameter nicht schreiben, wird er standardmäßig am Ende hinzugefügt entspricht appendChild() ;

　3.3 Ersetzung

//将旧节点换为新节点replaceChild(newElement,oldElement);

p.replaceChild(newElement,oldElement), unabhängig davon, ob es sich um einen neuen oder einen alten Knoten handelt, muss es ein untergeordneter Knoten von p sein.

　3.4 Löschen

removeChild();

Beachten Sie, dass die untergeordneten Knoten gelöscht werden.

　3.5 Klonen/Kopieren

//深复制或浅复制cloneNode(boolean);

tief, wenn der boolesche Wert des Parameters wahr ist Beim Kopieren werden der Knoten selbst und alle darunter liegenden untergeordneten Knoten kopiert.

Wenn der boolesche Wert des Parameters falsch ist, handelt es sich um eine flache Kopie und nur der Knoten selbst wird kopiert.

　3.6 Bestimmen Sie, ob untergeordnete Knoten vorhanden sind, und geben Sie einen booleschen Wert zurück.

　

3.7 Eigenschaften

hasChildNode();

//获取节点属性getAttribute();//设置节点属性setAttribute();//删除节点属性removeAttribute();

 　要注意的一点就是class属性不能通过setAttribute(); 设置。

三、DOM的优缺点

　　DOM的优点主要表现在：易用性强，并且遍历简单，支持XPath，增强了易用性。

　　DOM的缺点主要表现在：效率低，解析速度慢，内存占用量过高。

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der DOM-Operationen in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!