JavaScript HTML DOM元素 节点操作汇总

前言

在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性 ：

1. nodeName : 节点的名称

2. nodeValue ：节点的值

3. nodeType ：节点的类型

节点类型：元素 1 ，属性 2 ，文本 3 ，注释 8，文档 9。

一、添加和删除节点（HTML 元素）

1、创建节点

1）创建该元素（元素节点）；

2）向一个已存在的元素追加该元素。

语法：appendChild(newnode)

eg:

<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(); //方法向节点添加最后一个子节点。也可以使用 appendChild() 方法从一个元素向另一个元素中移动元素。 用法：a.appendChild(b)，把b添加到a内。

2.添加节点

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

语法，eg:同上。

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

语法：insertBefore(newnode,node);

eg:

<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() //removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。

语法：nodeObject.removeChild(node)

eg:

<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: 必需，被 newChild替换的对象。

eg:

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