Methoden zum Erstellen von Knoten in JavaScript: 1. Die Methode createElement() kann Elementknoten erstellen. 2. Die Methode createTextNode() kann Textknoten erstellen. 3. Die Methode createAttribute() kann Attributknoten erstellen.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.
Methoden zum Erstellen von Knoten in Javascript
1. createElement()-Methode: Elementknoten erstellen
Verwenden Sie die createElement()-Methode des Dokumentobjekts, um einen neuen Elementknoten basierend auf dem angegebenen Labelnamen zu erstellen durch den Parameter und gibt einen Verweis auf das neu erstellte Element zurück. Die Verwendung ist wie folgt:
var element = document.getElement("tagName");Nach dem Login kopieren
Unter diesen stellt element die Referenz des neuen Elements dar, und createElement() ist eine Methode des Dokumentobjekts. Diese Methode verfügt nur über einen Parameter, der zur Angabe des Tag-Namens des verwendet wird erstelltes Element.
【Beispiel 1】Der folgende Code erstellt eine Absatzmarke p im aktuellen Dokument und speichert sie in der Variablen p. Da diese Variable einen Elementknoten darstellt, ist ihr Attributwert „nodeType“ gleich 1 und ihr Attributwert „nodeName“ gleich p.
var p = document.createElement("p"); //创建段落元素
var info = "nodeName:" + p.nodeName; //获取元素名称
info += ", nodeType:" + p.nodeType; //获取元素类型，如果为1则表示元素节点
console.log(info);Nach dem Login kopieren
Neue Elemente, die mit der Methode createElement() erstellt wurden, werden nicht automatisch zum Dokument hinzugefügt. Wenn Sie dieses Element zum Dokument hinzufügen möchten, müssen Sie außerdem die Methoden appendChild(), insertBefore() oder replaceChild() verwenden.
【Beispiel 2】Der folgende Code zeigt, wie das neu erstellte p-Element zum body-Element hinzugefügt wird. Wenn ein Element zum Dokumentenbaum hinzugefügt wird, wird es sofort angezeigt.
var p = document.createElement("p"); //创建段落元素
document.body.appendChild(p); //增加段落元素到body元素下Nach dem Login kopieren
2. Methode createTextNode(): Textknoten erstellen
Verwenden Sie die Methode createTextNode() des Dokumentobjekts, um einen Textknoten zu erstellen. Die Verwendung ist wie folgt:
document.createTextNode(data)
Nach dem Login kopieren
Beispiel
Das folgende Beispiel erstellt ein neues div-Element, setzt seinen Klassenwert auf rot und fügt es dann dem Dokument hinzu.
var element = document.createElement("div");
element.className = "red";
document.body.appendChild(element);Nach dem Login kopieren
Aufgrund von DOM-Operationen und anderen Gründen enthält ein Textknoten möglicherweise keinen Text, oder es können zwei Textknoten nacheinander erscheinen. Um diese Situation zu vermeiden, wird im Allgemeinen die Methode normalize() für das übergeordnete Element aufgerufen, um leere Textknoten zu löschen und benachbarte Textknoten zusammenzuführen.
3. Methode createAttribute(): Attributknoten erstellen
Verwenden Sie die Methode createAttribute() des Dokumentobjekts, um Attributknoten zu erstellen:
document.createAttribute(name)
Nach dem Login kopieren
Der Parametername stellt den Namen des neuen dar erstelltes Attribut.
Beispiel 1
Das folgende Beispiel erstellt einen Attributknoten mit dem Namen align und value center, legt dann das Attribut align für die Beschriftung
fest und verwendet schließlich drei Methoden, um den Wert von zu lesen das Attribut align .
<div id="box">document.createAttribute(name)</div>
<script>
var element = document.getElementById("box");
var attr = document.createAttribute("align");
attr.value = "center";
element.setAttributeNode(attr);
console.log(element.attributes["align"].value); //"center"
console.log(element.getAttributeNode("align").value); //"center"
console.log(element.getAttribute("align")); //"center"
</script>Nach dem Login kopieren
Attributknoten befinden sich im Allgemeinen im Head-Tag des Elements. Die Attributliste des Elements wird mit den Elementinformationen vorgeladen und in einem assoziativen Array gespeichert. Nehmen Sie zum Beispiel die folgende HTML-Struktur.
<div id="div1" title="div"></div>
Nach dem Login kopieren
Wenn das DOM geladen wird, generiert die Variable divElement, die das HTML-div-Element darstellt, automatisch eine zugehörige Sammlung, die diese Attribute als Name-Wert-Paare abruft.
divElement.attributes = {
id : "div1",
class : "style1",
lang : "en",
title : "div"
}Nach dem Login kopieren
Im herkömmlichen DOM wird die Punktsyntax häufig verwendet, um über Elemente wie img.src, a.href usw. direkt auf HTML-Attribute zuzugreifen. Obwohl diese Methode nicht Standard ist, wird sie von allen Browsern unterstützt.
Beispiel 2
Das img-Element hat ein src-Attribut und alle Bildobjekte haben ein src-Skriptattribut, das dem HTML-src-Attribut zugeordnet ist. Beide Verwendungen unten funktionieren gut in verschiedenen Browsern.
<img id="img1" src="" />
<script>
var img = document.getElementById("img1");
img.setAttribute("src", "http://www.w3.org"); //HTML 属性
img.src = "http://www.w3.org"; //JavaScript 属性
</script>Nach dem Login kopieren
Ähnliche sind Onclick, Style, Href usw. Um sicherzustellen, dass JavaScript-Skripte in verschiedenen Browsern gut funktionieren, wird empfohlen, die Standardverwendung zu übernehmen. Viele HTML-Attribute werden von JavaScript nicht zugeordnet und können daher nicht direkt über Skriptattribute gelesen und geschrieben werden.
【Empfohlenes Lernen: Javascript-Tutorial für Fortgeschrittene】
Das obige ist der detaillierte Inhalt vonWelche Möglichkeiten gibt es, Knoten in Javascript zu erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
