childNodesを使用して子ノードを処理する際の問題javascript

Question

divのすべての子ノードに対して表示を行わないようにしようとしています。それは私が唯一のchild1の、child2の表示プロパティを操作したいのgetElementsByTagName（ '*'）

マイマークアップ

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

でうまく動作します。

 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

一部のブラウザではテキストノードであり、テキストノードではスタイルプロパティがありません。存在しないプロパティのプロパティにアクセスしようとすると、エラーが発生します。

いずれかのノードが最初のスタイルプロパティ（そのための非falsey値）を持っていることをノードタイプをテストするか：

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

     }