Welche Möglichkeiten gibt es, Knoten in Javascript zu erstellen?

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");

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);

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元素下

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)

• Die Parameterdaten stellen eine Zeichenfolge dar.

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);

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)

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 b390322fe69e754cc2d7247050226b6d 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>

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>

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"
}

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>

Ä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!