javaScript之节点操做

时间 2019-12-13

标签 javascript 节点栏目 JavaScript 繁體版

原文原文链接

javaScript程序员避免不了要操做页面中的DOM，除了常用的：javascript

appendChild()向childNodes列表的末尾添加一个节点。html

insertBefore()，接受两个参数，要插入的节点和做为参照的节点。java

replaceChild()，接受两个参数，要插入的节点和要替换的节点。node

removeChild()，移除某个节点，接受一个参数，即为要删除的节点。程序员

cloneNode()，克隆节点，接受一个布尔值，表示是否执行深复制。在参数为true状况下，执行深复制，复制其所有子节点。app

咱们还须要对网页中的节点进行遍历或颠倒，以下所示：spa

对页面节点遍历code

<!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节点计数htm

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);
}

颠倒页面节点blog

颠倒指定节点的直系子节点

<!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的基本操做方法能够实现巨大的功能！！！