JavaScript DOM节点操作指南：创建、插入、删除、替换及子父兄弟节点访问

DOM节点基础属性

前言

在文档对象模型 (DOM) 中，每个节点都被视为一个对象。DOM 节点主要包含三个关键属性：

1. nodeName：表示节点的名称。

2. nodeValue：表示节点的值。

3. nodeType：表示节点的类型。

常见的节点类型包括：元素节点（类型为 1）、属性节点（类型为 2）、文本节点（类型为 3）、注释节点（类型为 8）以及文档节点（类型为 9）。

DOM节点的增删改操作

一、HTML 元素的添加与删除操作

1. 创建节点

1）创建元素节点；

2）将新创建的元素追加到已存在的元素中。

语法：appendChild(newnode)

示例：


<div id="div1">
  <p id="p1">这是一个段落</p>
  <p id="p2">这是另一个段落</p>
</div>

<script>
  var para=document.createElement("p");
  var node=document.createTextNode("这是新段落。");
  para.appendChild(node);

  var element=document.getElementById("div1");
  element.appendChild(para);
</script>

document.createElement("标签名"); // 用于创建元素节点

document.createTextNode("文本"); // 用于创建文本节点

appendChild() 方法用于向指定节点添加最后一个子节点。该方法也可用于将元素从一个父节点移动到另一个父节点。用法示例：a.appendChild(b)，表示将节点 b 添加到节点 a 内部。

2. 添加节点

appendChild()：在指定节点的最后一个子节点列表之后添加一个新的子节点。

语法及示例同上。

insertBefore()：该方法可在已有的子节点前插入一个新的子节点。

语法：insertBefore(newnode, node);

示例：


<ul id="test">
  <li>JavaScript</li>
  <li>HTML</li>
</ul> 
 
<script type="text/javascript">
   var otest = document.getElementById("test"); 
   var newli = document.createElement("li");
   newli.innerHTML="php";
   //otest.insertBefore(newli,otest.lastChild);
   otest.insertBefore(newli,otest.childNodes[1]);
</script>

3. 删除节点

removeChild()：该方法从子节点列表中删除指定的节点。若删除成功，返回被删除的节点；若失败，则返回 NULL。

语法：nodeObject.removeChild(node)

示例：


<div id="div1">
  <p id="p1">这是一个段落。</p>
  <p id="p2">这是另一个段落。</p>
</div>

<script>
  var parent=document.getElementById("div1");
  var child=document.getElementById("p1");
  parent.removeChild(child);
</script>

执行 DOM 删除操作时，需明确目标元素及其父元素。首先定位希望删除的子元素，然后利用其 parentNode 属性找到父元素，最后执行删除。

4. 替换节点

replaceChild：将给定父元素中的一个子节点替换为另一个子节点。

语法：referencre = element.replaceChild(newChild, oldChild); // newChild：必需，用于替换 oldChild 的新对象；oldChild：必需，被替换的旧对象。

示例：


<div>
  <b id="oldnode">JavaScript</b>是一个很常用的技术，为网页添加动态效果。</div>
  <a href="javascript:replaceMessage()" rel="external nofollow" > 将加粗改为斜体</a>
 
  <script type="text/javascript">
    function replaceMessage(){
    　　var b=document.getElementById("oldnode");
    　　var newNode=document.createElement("i");
    　　newNode.innerHTML=b.innerHTML;
    　　b.parentNode.replaceChild(newNode,b);
    }  
 </script>

注意：当 oldChild 被替换时，所有与之相关的属性内容都将被移除。此外，newChild 必须事先已创建。

DOM节点的遍历与访问

5. 访问子节点

childNodes：访问选定元素节点下的所有子节点列表，返回值可视为具有 length 属性的数组。

语法：elementNode.childNodes // 可通过 childNodes[i] 的形式访问第几个子元素

示例：


<div>
  javascript 
  <p>javascript</p>
  <div>jQuery</div>
  <h5>PHP</h5>
</div>
<script type="text/javascript">
   var int=document.getElementsByTagName("div")[0].childNodes;
   for (var i=0;i<int.length;i++)
   {
     document.write("名字："+int[i].nodeName+"<br>");
   }
   document.write("子节点个数："+int.length+"<br>");
</script>

6. 访问子节点的第一和最后项

firstChild：返回 'childNodes' 数组中的第一个子节点。若选定节点没有子节点，则该属性返回 NULL。

语法：node.firstChild // 效果等同于 elementNode.childNodes[0]。

lastChild：返回 'childNodes' 数组中的最后一个子节点。若选定节点没有子节点，则该属性返回 NULL。

语法：node.lastChild // 效果等同于 elementNode.childNodes[elementNode.childNodes.length-1]。

示例：


<div id="con">
  <p>javascript</p>
  <div>jQuery</div>
  <h5>PHP</h5>
</div>
<script type="text/javascript">
  var x=document.getElementById("con");
  document.write("第一个子节点："+x.firstChild.nodeName+"<br>");
  document.write("最后一个子节点："+x.lastChild.nodeName);
</script>

7. 访问父节点

parentNode：获取指定节点的父节点。

语法：elementNode.parentNode

示例：


<div id="text">
  <p id="con"> parentNode 获取指点节点的父节点</p>
</div> 
<script type="text/javascript">
  var mynode= document.getElementById("con");
  document.write(mynode.parentNode.nodeName);
</script>

注意：父节点通常只有一个。需注意浏览器兼容性问题，Chrome、Firefox 等浏览器将标签之间的空白视为文本节点。

8. 访问兄弟节点

nextSibling：返回某个节点之后紧跟的节点（处于同一树层级中）。

语法：nodeObject.nextSibling

previousSibling：返回某个节点之前紧跟的节点（处于同一树层级中）。

语法：nodeObject.previousSibling

示例：


<ul id="myList">
  <li id="item1">Coffee</li>
  <li id="item2">Tea</li>
</ul>
<p id="demo">点击按钮来获得首个项目的下一个同胞。</p>
<button onclick="myFunction()">试一下</button>
<script>
  function myFunction()
  {
    var x=document.getElementById("demo"); 
    x.innerHTML=document.getElementById("item1").nextSibling.innerHTML;
  }
</script>

注意：若不存在该节点，属性返回 null。这两个属性获取的是节点对象。Internet Explorer 会忽略节点间生成的空白文本节点（例如换行符号），而其他浏览器不会忽略。

解决兼容性问题方法：判断节点 nodeType 是否为 1，若为元素节点则跳过。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。

JavaScript DOM节点操作详解：增删改查与属性获取

DOM节点基础属性

DOM节点的增删改操作

DOM节点的遍历与访问

实用工具推荐