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的基本操做方法能夠實現巨大的功能！！！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。