JavaScript DOM节点创建、添加、移除、替换及复制操作实例

JavaScript DOM节点与列表操作详解

本文通过具体实例，系统梳理了JavaScript中针对DOM节点及列表的各项操作方法，旨在为读者提供清晰的参考与学习素材。

（1）创建新节点


createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点

（2）添加、移除、替换、插入


appendChild()
removeChild()
replaceChild()
insertBefore()

（3）查找


getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性

本节演示将基于以下HTML结构展开：


<ul id="myList">
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>

元素节点的创建与添加

1.创建元素节点

利用 document.createElement() 方法可以创建元素节点。该方法接收一个参数，即目标元素的标签名，执行后返回新创建的元素节点对象。


var div = document.createElement("div"); //创建一个div元素
div.id = "myDiv"; //设置div的id
div.className = "box"; //设置div的class

创建元素节点后，必须将其插入到文档树中才能生效。

2.添加元素节点

使用 appendChild() 方法可将指定节点添加到 childNodes 列表的末尾。该方法执行后返回被添加的节点引用。


var ul = document.getElementById("myList"); //获得ul
var li = document.createElement("li"); //创建li
li.innerHTML = "项目四"; //向li内添加文本
ul.appendChild(li); //把li 添加到ul子节点的末尾

添加后的HTML结构如下：


<ul id="myList">
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
<li>项目四</li>
</ul>

值得注意的是，appendChild() 同样适用于已存在的元素节点。若将已存在的节点传入该方法，该节点将从原位置移除并移动至新位置的末尾。


var ul = document.getElementById("myList"); //获得ul
ul.appendChild(ul.firstChild); //把ul的第一个元素节点移到ul子节点的末尾

在IE浏览器中运行后的效果如下：


<ul id="myList">
<li>项目二</li>
<li>项目三</li>
<li>项目一</li>
</ul>

若需将节点插入到非末尾的特定位置，应使用 insertBefore() 方法。该方法接收两个参数：第一个参数为待插入的节点，第二个参数为参照节点（新节点将插入到该参照节点之前），执行后返回被添加的节点。


var ul = document.getElementById("myList"); //获得ul
var li = document.createElement("li"); //创建li
li.innerHTML= "项目四"; //向li内添加文本
ul.insertBefore(li,ul.firstChild); //把li添加到ul的第一个子节点前

插入后的HTML结构如下：


<ul id="myList">
<li>项目四</li>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>


var ul = document.getElementById("myList"); //获得ul
var li = document.createElement("li"); //创建li
li.innerHTML= "项目四"; //向li内添加文本
ul.insertBefore(li,ul.lastChild); //把li添加到ul的子节点末尾

另一种插入场景如下：


<ul id="myList">
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
<li>项目四</li>
</ul>


var ul = document.getElementById("myList"); //获得ul
var li = document.createElement("li"); //创建li
li.innerHTML= "项目四"; //向li内添加文本
var lis = ul.getElementsByTagName("li") //获取ul中所有li的集合
ul.insertBefore(li,lis[1]); //把li添加到ul中的第二个li节点前

再一种插入场景如下：


<ul id="myList">
<li>项目一</li>
<li>项目四</li>
<li>项目二</li>
<li>项目三</li>
</ul>

节点的移除与替换

3.移除元素节点

使用 removeChild() 方法可从文档中移除指定节点。该方法接收一个参数，即要移除的节点，并返回被移除的节点对象。需注意，虽然节点从文档树中移除，但它仍保留在内存中，只是不再具有文档中的位置。


var ul = document.getElementById("myList"); //获得ul
var fromFirstChild = ul.removeChild(ul.firstChild); //移除ul第一个子节点
var ul = document.getElementById("myList"); //获得ul
var lis = ul.getElementsByTagName("li") //获取ul中所有li的集合
ul.removeChild(lis[0]); //移除第一个li，与上面不同，要考虑浏览器之间的差异

4.替换元素节点

使用 replaceChild() 方法可替换现有节点。该方法接收两个参数：第一个参数为用于替换的新节点，第二个参数为被替换的旧节点，执行后返回被替换的节点。


var ul = document.getElementById("myList"); //获得ul
var fromFirstChild = ul.replaceChild(ul.firstChild); //替换ul第一个子节点
var ul = document.getElementById("myList"); //获得ul;
var li = document.createElement("li"); //创建li
li.innerHTML= "项目四"; //向li内添加文本
var lis = ul.getElementsByTagName("li") //获取ul中所有li的集合
var returnNode = ul.replaceChild(li,lis[1]); //用创建的li替换原来的第二个li

节点的复制操作

5.复制节点

使用 cloneNode() 方法可复制节点。该方法接收一个布尔值参数：若为 true，表示执行深复制，即复制节点及其所有子节点；若为 false，表示执行浅复制，仅复制节点本身，不包含其子节点。


var ul = document.getElementById("myList"); //获得ul
var deepList = ul.cloneNode(true); //深复制
var shallowList = ul.cloneNode(false); //浅复制

以下提供一个完整的JavaScript实例，演示如何建立列表项目、复制子节点及复制整个节点树。

这段JavaScript代码展示了列表项目的显示与建立、子节点的复制以及节点树的复制功能，该示例极具实用价值，尤其在构建树形菜单时应用广泛。

运行效果如下图所示：

JavaScript DOM节点与列表操作详解

具体代码如下：


<html>
<head>
<title>建立列表项目</title>
<script language="JavaScript">
function printChilds(objNode) {
  var strMsg = "节点名称 =" + objNode.nodeName + "\n";
  if (objNode.hasChildNodes()){
   var nodeCount = objNode.childNodes.length;
   strMsg += "子节点数 = " + objNode.childNodes.length + "\n";
   for(var i = 0; i < nodeCount; i++)
     strMsg += "标记名称 = " + objNode.childNodes[i].nodeName + "\n";
   alert(strMsg);
  }
}
function copyNode(objNode, objDupNode, deep){
  var tempNode = objDupNode.cloneNode(deep);
  objNode.appendChild(tempNode);
}
</script>
</haed>
<body id="myBody">
<h2>建立列表项目</h2>
<hr>
<ul id="myUL">
  <li>项目1
  <li>项目2
   <ol id="myOL">
     <li>次项目1
     <li>次项目2
   </ol>
  <li>项目3
</ul>
<form>
<input type="button" value="显示列表的子节点" onclick="printChilds(myUL)">
<input type="button" value="复制节点" onclick="copyNode(myUL, myUL.childNodes[1], false)">
<input type="button" value="复制节点树" onclick="copyNode(myUL.lastChild, myOL, true)">
</form>
</body>
</html>

希望本文所述内容能对大家的JavaScript程序设计工作有所帮助。

JavaScript DOM节点与列表操作详解

JavaScript DOM节点与列表操作详解

元素节点的创建与添加

节点的移除与替换

节点的复制操作

实用工具推荐