cari

Rumah >hujung hadapan web >tutorial js >JavaScript中如何创建、使用和删除dom节点实例详解

JavaScript中如何创建、使用和删除dom节点实例详解

伊谢尔伦
伊谢尔伦asal
2017-07-20 13:26:381353semak imbas

创建节点

为了创建一个新的节点，可以使用createElement和createTextNode.如果新建完成，可以用appendChild()把节点添加到DOM树中。

创建一个元素P，并把设置innerHTML属性


var myp = document.createElement('p'); 
myp.innerHTML = 'yet another';

元素P建完成了，就可以随意修改添加属性了


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

 接下来可以用appendChild把新的节点添加到DOM树中的。


document.body.appendChild(myp)

使用DOM的方法
用innerHTML方法的确很简单，我们可以用纯的dom方法来实现上面的功能。

  • 新建一个文本节点(yet another)

  • 新建一个段落

  • 把文本节点添加到段落中。

  • 把段落添加到body中


// 创建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()

另一种新建节点的方法是，我们可以用cloneNode来复制一个节点。cloneNode()可以传入一个boolean参数。如果为true就是深度复制，包括他的子节点，false，仅仅复制自己。
 
首先获取要复制的元素。


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

先不用深度复制。


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

我们发现页面并没有变化，因为仅仅复制的是元素p。和下面的效果一样。


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

如果用深度复制，包括p下面所有的子节点都会被复制。当然包括文本节点和EM元素。


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

insertBefore()
用appendChild，就是把元素添加到最后。而insertBefore方法可以更精确控制插入元素的位置。


elementNode.insertBefore(new_node,existing_node)

实例


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

意思就是新建一个文本节点，把它作为body元素的第一个节点。
删除节点

要从DOM树删除一个节点，我们可以使用removeChild().我们来看看要操作的HTML


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

来看看下面代码，删除第二段


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

removed节点就是删除的节点。以后还可以用这删除的节点。
 
我们也可以用replaceChild()方法。这个方法是删除一个节点，并用另一个节点替代。当执行上个删除节点操作之后，结果如下


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

 我们来看看replaceChild的使用。我们把上一个删除节点来替代第二个p


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

 和removeChild返回一样。replaced就是移除的节点。现在结果为


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

Atas ialah kandungan terperinci JavaScript中如何创建、使用和删除dom节点实例详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：JavaScript中如何遍历和修改dom实例详解Artikel seterusnya：JavaScript教程之如何更新、插入、修改dom节点实例代码详解

Artikel berkaitan

Lihat lagi