在文档对象模型 (DOM) 中,每个节点都是一个对象。DOM 节点有三个重要的属性 :
1. nodeName : 节点的名称
2. nodeValue :节点的值
3. nodeType :节点的类型
节点类型:元素 1 ,属性 2 ,文本 3 ,注释 8,文档 9。
一、添加和删除节点(HTML 元素)
1、创建节点
1)创建该元素(元素节点);
2)向一个已存在的元素追加该元素。
语法:appendChild(newnode)
eg:
1 <div id="div1"> 2 <p id="p1">这是一个段落</p> 3 <p id="p2">这是另一个段落</p> 4 </div> 5 6 <script> 7 var para=document.createElement("p"); 8 var node=document.createTextNode("这是新段落。"); 9 para.appendChild(node); 10 11 var element=document.getElementById("div1"); 12 element.appendChild(para); 13 </script>
document.createElement("标签名"); // 创建元素节点
document.createTextNode("文本"); //创建文本节点
appendChild(); //方法向节点添加最后一个子节点。也可以使用 appendChild() 方法从一个元素向另一个元素中移动元素。 用法:a.appendChild(b),把b添加到a内。
2.添加节点
appendChild(); //在指定节点的最后一个子节点列表之后添加一个新的子节点。
语法,eg:同上。
insertBefore(); //insertBefore() 方法可在已有的子节点前插入一个新的子节点。
语法:insertBefore(newnode,node);
eg:
1 <ul id="test"> 2 <li>JavaScript</li> 3 <li>HTML</li> 4 </ul> 5 6 <script type="text/javascript"> 7 var otest = document.getElementById("test"); 8 var newli = document.createElement("li"); 9 newli.innerHTML="php"; 10 //otest.insertBefore(newli,otest.lastChild); 11 otest.insertBefore(newli,otest.childNodes[1]); 12 </script>
3.删除节点
removeChild() //removeChild() 方法从子节点列表中删除某个节点。如删除成功,此方法可返回被删除的节点,如失败,则返回 NULL。
语法:nodeObject.removeChild(node)
eg:
1 <div id="div1"> 2 <p id="p1">这是一个段落。</p> 3 <p id="p2">这是另一个段落。</p> 4 </div> 5 6 <script> 7 var parent=document.getElementById("div1"); 8 var child=document.getElementById("p1"); 9 parent.removeChild(child); 10 </script>
DOM 需要清楚需要删除的元素,以及它的父元素。先找到希望删除的子元素,然后使用其 parentNode 属性来找到父元素。
4.替换节点
replaceChild //把一个给定父元素里面的一个子节点替换为另一个子节点。
语法:referencre = element.replaceChild(newChild,oldChild); //newChild: 必需,用于替换 oldChild的对象。 oldChild: 必需,被 newChild替换的对象。
eg:
1 <div> 2 <b id="oldnode">JavaScript</b>是一个很常用的技术,为网页添加动态效果。</div> 3 <a href="javascript:replaceMessage()"> 将加粗改为斜体</a> 4 5 <script type="text/javascript"> 6 function replaceMessage(){ 7 var b=document.getElementById("oldnode"); 8 var newNode=document.createElement("i"); 9 newNode.innerHTML=b.innerHTML; 10 b.parentNode.replaceChild(newNode,b); 11 } 12 </script>
注意:当 oldnew 被替换时,所有与之相关的属性内容都将被移除。 newChild必须先被建立。
5.访问子节点
childNodes //访问选定元素节点下的所有子节点的列表,返回的值可以看作是一个数组,他具有length属性。
语法:elementNode.childNodes //可用childNodes[i]数组的形式表示第几个子元素
eg:
1 <div> 2 javascript 3 <p>javascript</p> 4 <div>jQuery</div> 5 <h5>PHP</h5> 6 </div> 7 <script type="text/javascript"> 8 var int=document.getElementsByTagName("div")[0].childNodes; 9 for (var i=0;i<int.length;i++) 10 { 11 document.write("名字:"+int[i].nodeName+"<br>"); 12 } 13 document.write("子节点个数:"+int.length+"<br>"); 14 </script>
6.访问子节点的第一和最后项
firstChild
//返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点,则该属性返回 NULL。
语法:node.firstChild //与elementNode.childNodes[0]是同样的效果。
lastChild
//返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点,则该属性返回 NULL。
语法:node.lastChild //与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。
eg:
1 <div id="con"> 2 <p>javascript</p> 3 <div>jQuery</div> 4 <h5>PHP</h5> 5 </div> 6 <script type="text/javascript"> 7 var x=document.getElementById("con"); 8 document.write("第一个子节点:"+x.firstChild.nodeName+"<br>"); 9 document.write("最后一个子节点:"+x.lastChild.nodeName); 10 </script>
7.访问父节点
parentNode //获取指定节点的父节点
语法:elementNode.parentNode
eg:
1 <div id="text"> 2 <p id="con"> parentNode 获取指点节点的父节点</p> 3 </div> 4 <script type="text/javascript"> 5 var mynode= document.getElementById("con"); 6 document.write(mynode.parentNode.nodeName); 7 </script>
注意: 父节点只有一个,浏览器兼容问题,chrome、firefox等浏览器标签之间的空白也算是一个文本节点。
8.访问兄弟节点
nextSibling //可返回某个节点之后紧跟的节点(处于同一树层级中)。
语法:nodeObject.nextSibling
previousSibling //可返回某个节点之前紧跟的节点(处于同一树层级中)。
语法:nodeObject.previousSibling
eg:
1 <ul id="myList"> 2 <li id="item1">Coffee</li> 3 <li id="item2">Tea</li> 4 </ul> 5 <p id="demo">点击按钮来获得首个项目的下一个同胞。</p> 6 <button οnclick="myFunction()">试一下</button> 7 <script> 8 function myFunction() 9 { 10 var x=document.getElementById("demo"); 11 x.innerHTML=document.getElementById("item1").nextSibling.innerHTML; 12 } 13 </script>
注意: 如果无此节点,则该属性返回 null。两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点(例如,换行符号),而其它浏览器不会忽略。
解决问题方法:判断节点nodeType是否为1, 如是为元素节点,跳过。