Question

我正在尝试为div的所有子节点显示none。它适用于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

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

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

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

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

e.g。

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

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

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

      }

使用childNodes处理childnodes javascript的问题

3 个答案: