Проблема с использованием childNodes для обработки Javascript дочерних узлов

Question

Я пытаюсь отобразить none для всех дочерних узлов 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

Не все дочерние узлы являются элементами, некоторые являются текстовыми узлами в некоторых браузерах, а текстовые узлы не имеют свойства стиля.Попытка получить доступ к свойству несуществующего свойства приводит к ошибке.

Либо проверьте тип узла, либо у узла сначала есть (не ложное значение) его свойство стиля:

  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

попробуйте

<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();      

      }

Answer 3

Почему вы хотите скрыть все дочерние узлы.

Где вы можете спрятать родителя, и все дети будут автоматически прятаться.

Так будет просто:

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