JS高級---遍歷DOM樹

時間 2020-01-14

標籤高級遍歷 dom 欄目 JavaScript 简体版

原文原文鏈接

遍歷DOM樹

第一個函數: 給我根節點, 我會找到全部的子節點: forDOM(根節點)

獲取這個根節點的子節點

var children=根節點的.children

調用第二個函數

第二個函數: 給我全部的子節點, 我把每一個子節點的名字顯示出來(children)

for(var i=0;i<children.length;i++){

每一個子節點

var child=children[i];

f1(child); 給我節點, 我顯示該節點的名字

child是子節點,可是若是child裏面還有子節點,此時child就是爹了

child.children&&第一個函數(child)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>遍歷DOM樹</title>
</head>

<body>
<h1>遍歷 DOM 樹</h1>
<p style="color: green;">Tip: 能夠在遍歷的回調函數中任意定製需求</p>
<div>
  <ul>
    <li>123</li>
    <li>456</li>
    <li>789</li>
  </ul>
  <div>
    <div>
      <span>haha</span>
    </div>
  </div>
</div>
<div id="demo_node">
  <ul>
    <li>123</li>
  </ul>
  <p>hello</p>
  <h2>world</h2>
  <div>
    <p>dsa</p>
    <h3>
      <span>dsads</span>
    </h3>
  </div>
</div>
<script>

  //獲取頁面中的根節點--根標籤
  var root=document.documentElement;//html
  //函數遍歷DOM樹
  //根據根節點,調用fn的函數,顯示的是根節點的名字
  function forDOM(root1) {
    //調用f1,顯示的是節點的名字
   // f1(root1);
    //獲取根節點中全部的子節點
    var children=root1.children;
    //調用遍歷全部子節點的函數
    forChildren(children);
  }
  //給我全部的子節點,我把這個子節點中的全部的子節點顯示出來
  function forChildren(children) {
    //遍歷全部的子節點
    for(var i=0;i<children.length;i++){
      //每一個子節點
      var child=children[i];
      //顯示每一個子節點的名字
      f1(child);
      //判斷child下面有沒有子節點,若是還有子節點,那麼就繼續的遍歷
      child.children&&forDOM(child);
    }
  }
  //函數調用,傳入根節點
  forDOM(root);
  function f1(node) {
    console.log("節點的名字:"+node.nodeName);
  }

  //節點:nodeName,nodeType,nodeValue


</script>
</body>

</html>

相關標籤/搜索

每日一句

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