Ausführliche Erklärung zum Erstellen, Verwenden und Löschen von Dom-Knoteninstanzen in JavaScript-js-Tutorial-php.cn

Ausführliche Erklärung zum Erstellen, Verwenden und Löschen von Dom-Knoteninstanzen in JavaScript

伊谢尔伦

Freigeben： 2017-07-20 13:26:38

Original

1370 Leute haben es durchsucht

Knoten erstellen

Um einen neuen Knoten zu erstellen, können Sie createElement und createTextNode verwenden. Wenn die neue Erstellung abgeschlossen ist, können Sie appendChild() zum Hinzufügen verwenden der Knoten zum DOM-Baum.

Erstellen Sie ein Element P und legen Sie das innerHTML-Attribut fest

var myp = document.createElement(&#39;p&#39;); 
myp.innerHTML = &#39;yet another&#39;;

Nach dem Login kopieren

Nachdem das Element P erstellt wurde, können Sie unter ändern und Attribute hinzufügen will

myp.style.border = &#39;2px dotted blue&#39;

Nach dem Login kopieren

Als nächstes können Sie appendChild verwenden, um neue Knoten zum DOM-Baum hinzuzufügen.

document.body.appendChild(myp)

Nach dem Login kopieren

So verwenden Sie DOM
Die Verwendung der innerHTML-Methode ist in der Tat sehr einfach. Wir können die reine Dom-Methode verwenden, um die obige Funktion zu erreichen .

Erstellen Sie einen neuen Textknoten (noch einen weiteren)
Erstellen Sie einen neuen Absatz
Platzieren der Textknoten Zum Absatz hinzufügen.
Fügen Sie den Absatz zum Textkörper hinzu

// 创建p 
var myp = document.createElement(&#39;p&#39;); 
// 创建一个文本节点 
var myt = document.createTextNode(&#39;one more paragraph&#39;) 
myp.appendChild(myt); 
// 创建一个STRONG元素 
var str = document.createElement(&#39;strong&#39;); 
str.appendChild(document.createTextNode(&#39;bold&#39;)); 
// 把STRONG元素添加到P中 
myp.appendChild(str); 
// 把P元素添加到BODY中 
document.body.appendChild(myp); 
//结果<p>one more paragraph<strong>bold</strong></p> 
 cloneNode()

Nach dem Login kopieren

Eine andere Möglichkeit, einen neuen Knoten zu erstellen, ist , können wir cloneNode verwenden, um einen Knoten zu kopieren. cloneNode() kann einen booleschen Parameter übergeben. Wenn „true“, bedeutet dies eine tiefe Kopie, einschließlich ihrer untergeordneten Knoten, wenn „false“, kopiert es nur sich selbst.

Besorgen Sie sich zunächst das zu kopierende Element.

var el = document.getElementsByTagName(&#39;p&#39;)[1];//<p><em>second</em> paragraph</p>

Nach dem Login kopieren

Noch ist kein tiefes Kopieren erforderlich.

document.body.appendChild(el.cloneNode(false))

Nach dem Login kopieren

Wir haben festgestellt, dass sich die Seite nicht geändert hat, da nur das Element p kopiert wurde. Derselbe Effekt wie unten.

document.body.appendChild(document.createElement(&#39;p&#39;));

Nach dem Login kopieren

Wenn Sie Deep Copy verwenden, werden alle untergeordneten Knoten einschließlich p unten kopiert. Natürlich inklusive Textknoten und EM-Elementen.

document.body.appendChild(el.cloneNode(true))

Nach dem Login kopieren

insertBefore()
Verwenden Sie appendChild, um das Element am Ende hinzuzufügen. Die insertBefore-Methode kann die Position eingefügter Elemente genauer steuern.

elementNode.insertBefore(new_node,existing_node)

Nach dem Login kopieren

Instanz

document.body.insertBefore( 
 document.createTextNode(&#39;boo!&#39;), 
 document.body.firstChild 
);

Nach dem Login kopieren

bedeutet, einen neuen Textknoten zu erstellen und ihn als Textkörper zu verwenden Element erster Knoten.
Knoten entfernen

Um einen Knoten aus dem DOM-Baum zu löschen, können wir einen Blick auf den HTML-Code werfen, um

<🎜 zu bedienen >

<body> 
 <p class="opener">first paragraph</p> 
 <p><em>second</em> paragraph</p> 
 <p id="closer">final</p> 
 <!-- and that&#39;s about it --> 
</body>

Nach dem Login kopieren

Sehen wir uns den folgenden Code an. Löschen Sie den zweiten Absatz

var myp = document.getElementsByTagName(&#39;p&#39;)[1]; 
var removed = document.body.removeChild(myp);

Nach dem Login kopieren

Der entfernte Knoten ist der gelöschte Knoten. Der gelöschte Knoten kann auch in Zukunft weiterhin verwendet werden.

Wir können auch die Methode replaceChild() verwenden. Diese Methode löscht einen Knoten und ersetzt ihn durch einen anderen Knoten. Nach der Durchführung des letzten Knotenlöschvorgangs sind die Ergebnisse wie folgt:

<body> 
 <p class="opener">first paragraph</p> 
 <p id="closer">final</p> 
 <!-- and that&#39;s about it --> 
</body>

Nach dem Login kopieren

Werfen wir einen Blick auf die Verwendung von replaceChild. Wir ersetzen den letzten gelöschten Knoten durch das zweite p

var replaced = document.body.replaceChild(removed, p);

Nach dem Login kopieren

, was mit der Rückgabe von „removeChild“ identisch ist. Ersetzt wird der entfernte Knoten. Das Ergebnis ist nun

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zum Erstellen, Verwenden und Löschen von Dom-Knoteninstanzen in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!