Question

我正在努力让所有来自<article class="birds">的孩子，但是无法接触<li class="bird">Hawk中的这些孩子......我正试图通过递归来做这件事。

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>元素没有类attr吗？我得到的输出是：

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

Answer 1

根据我的理解，您正在尝试从容器li中获取所有.birds。如果是，您可以使用querySelectorAll而不是手动遍历DOM并手动搜索。

＆＃13;

function traverse(className, fetchElement){
  return document.querySelectorAll("."+className +" " + fetchElement)
}

console.log(traverse('birds', 'li'))

＆＃13;

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

＆＃13;

Answer 2

由于父li没有birds-list且您的导航代码依赖于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]);

JavaScript DOM遍历

2 个答案: