JavaScript DOM遍歷

我試圖從<article class="birds">獲得所有孩子，但無法到達這些在<li class="bird">Hawk中的孩子......我試圖用遞歸來實現。JavaScript DOM遍歷

function traverse (node){ 
    node = document.getElementsByClassName(node)[0]; 
    for(let i=0; i<node.childNodes.length; i++){ 
     let child = node.childNodes[i]; 
     if(child.nodeName == '#text'){ 
      continue; 
     }else{ 
      console.log(child.nodeName.toLowerCase() + 
         ": class=\"" + child.className +"\""); 
      if(child.nodeType === document.ELEMENT_NODE){ 
       traverse(child.className); 
      } 
     } 

    } 
} 
traverse('birds'); 

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title></title> 
</head> 
<body> 
    <header> 
     <h1>Living Creatures</h1> 
    </header> 
    <section> 
     <article class="birds"> 
      <h2 class="birds-heading">Birds</h2> 
      <ul class="birds-list"> 
       <li class="bird">Nightingale</li> 
       <li class="bird">Owl</li> 
       <li class="bird">Hawk 
        <ul> 
         <li class="sub-bird">Black Hawk</li> 
         <li class="sub-bird">Chicago Hawk</li> 
        </ul> 
       </li> 
       <li id="eagle" class="bird">Eagle</li> 
       <li class="bird">Sparrow</li> 
       <li class="bird">Falcon</li> 
       <li class="bird">Blackbird</li> 
      </ul> 
     </article> 
     <article class="mammals"> 
      <h2 class="mammal-heading">Mammals</h2> 
      <ol class="mammal-list"> 
       <li id="dolphin" class="mammal">Dolphin</li> 
       <li class="mammal">Elephant</li> 
       <li class="mammal">Hyena</li> 
      </ol> 
     </article> 

    </section> 
    <script type="text/javascript" src="testing.js"></script>> 
</body> 
</html>

是不是因爲<ul>元素沒有class attr？在輸出中我得到的是：

h2: class="birds-heading" 
ul: class="birds-list" 
li: class="bird"

來源

2016-11-17 Тома Томов

你不能給li與3210類，因爲父ul沒有class和您遍歷代碼依賴於class。

相反，你可以調整代碼來遍歷node。我已經對您的代碼進行了更改，並且它可以正常工作。

function traverse (node){ 
    for(let i=0; i<node.childNodes.length; i++){ 
     let child = node.childNodes[i]; 
     if(child.nodeName == '#text'){ 
      continue; 
     }else{ 
      console.log(child.nodeName.toLowerCase() + 
         ": class=\"" + child.className +"\""); 
      if(child.nodeType === document.ELEMENT_NODE){ 
       traverse(child); 
      } 
     } 

    } 
} 
traverse(document.getElementsByClassName('birds')[0]);

來源

2016-11-17 10:16:03

非常感謝！ –

按我的理解，你想從容器.birds獲取所有li秒。如果是，您可以使用querySelectorAll而不是手動遍歷DOM並手動搜索。

function traverse(className, fetchElement){ 
 
    return document.querySelectorAll("."+className +" " + fetchElement) 
 
} 
 

 
console.log(traverse('birds', 'li'))

<section> 
 
    <article class="birds"> 
 
    <h2 class="birds-heading">Birds</h2> 
 
    <ul class="birds-list"> 
 
     <li class="bird">Nightingale</li> 
 
     <li class="bird">Owl</li> 
 
     <li class="bird">Hawk 
 
     <ul> 
 
      <li class="sub-bird">Black Hawk</li> 
 
      <li class="sub-bird">Chicago Hawk</li> 
 
     </ul> 
 
     </li> 
 
     <li id="eagle" class="bird">Eagle</li> 
 
     <li class="bird">Sparrow</li> 
 
     <li class="bird">Falcon</li> 
 
     <li class="bird">Blackbird</li> 
 
    </ul> 
 
    </article> 
 
    <article class="mammals"> 
 
    <h2 class="mammal-heading">Mammals</h2> 
 
    <ol class="mammal-list"> 
 
     <li id="dolphin" class="mammal">Dolphin</li> 
 
     <li class="mammal">Elephant</li> 
 
     <li class="mammal">Hyena</li> 
 
    </ol> 
 
    </article> 
 

 
</section>

來源

2016-11-17 10:14:28 Rajesh

謝謝！我試圖通過每個元素，但你的方法是不知道的！非常感謝你！ –

JavaScript DOM遍歷

回答

相關問題