24 
<ul>
    <li>Array1</li>
    <li>Array2</li>
    <li id="element">Array3</li>
</ul>
<script>
   var temp = document.getElementById('element').parentNode;
   child = temp.childNodes;
   console.log(temp.length);
</script>

要素 ID を使用して子ノードの長さを取得する必要があります。私のコードは結果として 7 を返しますが、ノードは 3 つしかありません。

4

4 に答える 4

27

childNodesテキスト ノードを含むすべての既存の childNode を取得します。マークアップの例では、3 つの「通常のノード」と 4 つのテキスト ノード (改行) があり、合計 7 つの子ノードになります。

代わりに、「実際の」ノードのみをフェッチする.children.lengthor (IE<9 ではサポートされていません) が必要です。.childElementCount

let temp = document.getElementById('element').parentNode;
console.log(temp.children.length);
// or the following
console.log(temp.childElementCount);
于 2012-08-02T11:52:34.660 に答える
6

childNodes3つのリスト項目、それらのテキストコンテンツ、およびそれらの間の空白を返します（ただし、すべてのブラウザーにあるわけではありません）。3つの選択肢：

  1. FFとChrome: elem.childElementCount(3を返します）

  2. IE（&& FF AFAIK）：elem.childNodes.length（=== 3）

  3. 古いIE：elem.children.length

于 2012-08-02T11:42:13.630 に答える
2

childrenNodes プロパティには、TEXT_NODE、ELEMENT_NODE、COMMEN_NODE など、すべてのタイプのノードが含まれます。

要素の数を数える必要があります。すべてのエンジンで機能する DOM に基づくソリューションの例を次に示します。

var temp = document.getElementById('element').parentNode;
var children = temp.childNodes;
console.log(children.length); // 7

function countElements(children) {
  var count=0;
  for (var i=0, m=children.length; i<m; i++) 
     if (children[i].nodeType===document.ELEMENT_NODE) 
         count++;
  return count;
}
console.info(countElements (children));​ // 3

編集

同様に、DOM のみを使用してすべての子要素を取得する関数が必要な場合は、次の関数を使用します。

function childElements(node) {
  var elems = new Array();
  var children = node.childNodes;

    for (var i=0,i < children.length ; i++) {
         if (children[i].nodeType===document.ELEMENT_NODE) {
             elems.push(children[i]);
             return elems;
          }
         }
     }

console.info(childElements(temp).length);​ //3
于 2012-08-02T11:50:55.627 に答える