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的基本操作方法可以实现巨大的功能！！！

posted on 2017-07-05 20:54 公子小苏阅读(259) 评论(0) 编辑收藏举报

刷新页面返回顶部

花信

javaScript之节点操作

导航

公告