JavaScript 隐藏基于子节点列表的 div 不起作用

Question

我试图隐藏容器 div 部分中的所有 div，但第一个除外。

这是我的 html:

<div id="main">
    <div id="first">
        First div
    </div>
    <div id="second">
        Second div
    </div>
    <div id="third">
        Third div
    </div>
</div>

这是我的 JavaScript:

function hide(){
    var target = document.getElementById("main"),
        childList = target.childNodes,
        i = 1;
    for( ; i < childList.length; i++){
        if(childList[i].nodeName !== "#text"){
            childList[i].style.display = 'none';
        };
    };
}

这似乎应该有效并隐藏所有 div，但第一个除外……但事实并非如此。它隐藏了所有元素。控制台没有错误。

我该如何解决这个问题？

谢谢。

Answer 1

您正在使用子节点而不是子节点。在这种情况下，您应该使用子项。

childList = target.children

看看这个答案:What is the difference between children and childNodes in JavaScript?