首页  >  文章  >  web前端  >  JavaScript中如何创建、使用和删除dom节点实例详解

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

伊谢尔伦
伊谢尔伦原创
2017-07-20 13:26:381337浏览

创建节点

为了创建一个新的节点,可以使用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>

以上是JavaScript中如何创建、使用和删除dom节点实例详解的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn