suchen

Heim >Web-Frontend >js-Tutorial >Ausführliche Erklärung zum Erstellen, Verwenden und Löschen von Dom-Knoteninstanzen in JavaScript

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

伊谢尔伦
伊谢尔伦Original
2017-07-20 13:26:381354Durchsuche

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('p'); 
myp.innerHTML = 'yet another';

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


myp.style.border = '2px dotted blue'

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


document.body.appendChild(myp)

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

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>

Noch ist kein tiefes Kopieren erforderlich. 


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

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

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

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)

Instanz


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

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 


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

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Ausführliche Erklärung zum Durchlaufen und Ändern von Dom-Instanzen in JavaScriptNächster Artikel：Ausführliche Erklärung zum Durchlaufen und Ändern von Dom-Instanzen in JavaScript

In Verbindung stehende Artikel

Mehr sehen