javaScript之节点操作
javaScript程序员避免不了要操作页面中的DOM，除了经常使用的：
appendChild()向childNodes列表的末尾添加一个节点。
insertBefore()，接受两个参数，要插入的节点和作为参照的节点。
replaceChild()，接受两个参数，要插入的节点和要替换的节点。
removeChild()，移除某个节点，接受一个参数，即为要删除的节点。
cloneNode()，克隆节点，接受一个布尔值，表示是否执行深复制。在参数为true情况下，执行深复制，复制其全部子节点。
我们还需要对网页中的节点进行遍历或颠倒，如下所示：
对页面节点遍历
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>遍历指定元素下所有类型节点</title> <script type="text/javascript"> window.onload=function(){ var wrapper=document.getElementById("wrapper"); var content=document.getElementById("content"); var root = document.documentElement; function findNodes(node){ var arr=[]; function done(node){ if(node.childNodes.length!=0){ var childrenNodes=node.childNodes; for(var index=0;index<childrenNodes.length;index++){ arr.push(childrenNodes[index]); done(childrenNodes[index]); } } } done(node) return arr; } // 遍历根节点下所有节点 console.log('根节点下所有节点'); console.log(findNodes(root)); // 遍历ID为content的所有节点 console.log('ID为content的所有节点'); console.log(findNodes(content)); } </script> </head> <body> <div id="wrapper"></div> <div id="content"> <div> <!-- 我是注释 --> <ul> <li>first li</li> <li>second li</li> <li>third li</li> </ul> </div> </div> </body> </html>
如果只想遍历Element类型节点，可以使用node.children。另外还可以实现对Element节点计数
function traverseNodes(node){ var countTeg = 0; function done(node){ if(node.nodeType == 1) countTeg++; var childrens = node.childNodes; for(var i=0; i<childrens.length;i++){ countTeg += done(childrens[i]) } return countTeg; } return done(node); }
颠倒页面节点
颠倒指定节点的直系子节点
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>遍历指定元素下所有节点</title> <script type="text/javascript"> function reserve(node){ var children = node.childNodes; var len = children.length; for(var i=len-1; i>=0; i--){ var temp = node.removeChild(children[i]); //从父节点node中从后向前一次删除子节点children[i] node.appendChild(temp); //把删除了的节点放到父节点node的末尾 } } </script> </head> <body> <!-- 我是注释 --> <div> <p>第一段</p> <p>第二段</p> <p>第三段</p> </div> <button onclick="reserve(document.body)">点击我</button> </body> </html>
颠倒指定节点的所有子孙节点
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>颠倒所有子孙节点</title> <script type="text/javascript"> function reserveNode(node){ //文本节点 if(node.nodeType == 3){//颠倒文本节点 var text = node.data; var retext = ""; for(var i=text.length-1; i>=0; i-- ){ retext += text.charAt(i); } node.data = retext; }else{ //非文本节点直接颠倒节点位置 var children = node.childNodes; var len = children.length; for(var i = len-1; i>=0; i--){ reserveNode(children[i]); node.appendChild(node.removeChild(children[i])); } } } </script> </head> <body> <!-- 我是注释 --> <div> <p>第一段</p> <p>第二段</p> <p>第三段</p> </div> <button onclick="reserveNode(document.body)">点击我</button> </body> </html>
总之，灵活用于DOM的基本操作方法可以实现巨大的功能！！！
