JavaScript DOM遍歷

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

據我了解，您正在嘗試從container .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>

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 個解決方案

解決方案1
3 2016-11-17 10:14:28

解決方案2
2 已采納 2016-11-17 10:16:03

JavaScript DOM遍歷

問題描述

2 個解決方案

解決方案1 3 2016-11-17 10:14:28

解決方案2 2 已采納 2016-11-17 10:16:03

解決方案1
3 2016-11-17 10:14:28

解決方案2
2 已采納 2016-11-17 10:16:03