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遍历

回答

相关问题