使用 childNodes 处理子节点 javascript 时出现问题

Question

我试图让 div 的所有子节点都不显示。它与 getElementsByTagname('*') 配合良好。

我的标记

<div id="container">
    <div id="child1"></div>
    <div id"child2">
        <div id="inner-child"></div>
    </div>
</div>

我想仅操作 child1、child2 的显示属性。

      function hideAllChildren(){
        var elem = document.getElementById("container");
        var children = elem.childNodes;
        alert("children " + children.length)
        for (i=0; i < children.length ;i++)
        {
        children[i].style.display="none";// Error - children[i].style undefined
        }

      }

你能找出问题所在吗？

Answer 1

并非所有子节点都是元素，有些是某些浏览器中的文本节点，并且文本节点没有样式属性。尝试访问不存在的属性的属性会引发错误。

首先测试节点类型或节点是否具有（其非 false 值）样式属性：

  if (children[i].style) {
    children[i].style.display="none";
  }

但是，您可能会发现使用类和适当的 CSS 规则并将其添加到父元素会更好。

例如

<style type="text/css">

.hideAll * {
  display: none;
}

</style>

</script type="text/javascript">

<button onclick="
  document.getElementById('d0').className = 'hideAll';
">Hide all</button>
<button onclick="
  document.getElementById('d0').className = '';
">Show all</button>

<div id="d0">Here is the div
  <ul>
    <li class="item">apple
    <li class="item">orange
    <li class="item">banana
  </ul>
</div>

Answer 2

为什么要隐藏所有子节点。

您可以在其中隐藏父级，所有子级都会自动隐藏。

所以它会很简单：

function hideAllChildren(){
  var elem = document.getElementById("container");
  //alert("children " + children.length)
  elem.style.display="none";
}

Answer 3

试试这个

<div id="container">container
    <div id="child1">child1</div>
    <div id"child2">Child 2
        <div id="inner-child">inner-child</div>
    </div>
</div>
<div id="clickme">Click me</div>

/// java 脚本

$('#clickme').click(function() {
  hideAllChildren();
});

    function hideAllChildren(){
        var elem = document.getElementById("container");
        var children = elem.childNodes;
        alert("children " + children.length)
            $('#container').hide();      

      }