Javascript - 子节点数

<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个节点。Javascript - 子节点数

来源

2012-08-02 Karthick V

可能重复（http://stackoverflow.com/questions/5685184/use-javascript-to-count-immediate-child-elements-of- an-element） - 请在您提出新问题之前使用搜索。 – 2012-08-02 12:04:28

我接受你..但我需要纯粹的javascript答案不是jquery – 2012-08-02 13:04:47

如果你仔细阅读答案，你会发现它并不全部使用jQuery/ – 2012-08-02 13:21:14

什么你想要的是.children.length或.childElementCount（不推荐），因为childNodes得到所有 childNodes，也是在你的情况（断行）4的文本节点。的[用javascript计算元素的直接子元素]

var temp = document.getElementById('element').parentNode; 
child = temp.children; 
console.log(child.length); 
// or the following 
console.log(temp.childElementCount);

来源

2012-08-02 11:52:34 Christoph

我在FF中得到错误getChildren不是函数 – 2012-08-02 11:57:24

@KarthickV使用'.children' this将返回一个html集合并有更好的支持。请参见[docu here]（https://developer.mozilla.org/en/DOM/Element.children） – Christoph 2012-08-02 11:59:25

@KarthickV一个重要的注意事项：儿童我们正确的使用，但它在较老的IE浏览器中是越野车 - 它计数评论节点' <！ - comment - >'太！所以要注意这一点。 – Christoph 2012-08-02 12:05:55

childNodes返回3个列表项，它们的文本内容和它们之间的空白（尽管在所有浏览器中都没有）。三个备选方案：

FF和Chrome：elem.childElementCount（将返回3）
IE（& & FF据我所知）：elem.childNodes.length（=== 3）
旧IE：elem.children.length

来源

2012-08-02 11:42:13

其工作正常在FF – 2012-08-02 11:50:52

@KarthickV：我检查了'childNodes。长度“，它不适用于铬版（不知道我在想什么）编辑了我的答案......还有：谁低估了我的答案，为什么？ – 2012-08-02 12:34:20

它适用于我（铬：temp.childElementCount）..不知道谁投了票..会给一个投票..感谢您的宝贵答案 – 2012-08-02 13:01:05

childrenNodes属性包括所有类型的节点：TEXT_NODE，EL EMENT_NODE，COMMEN_NODE等....

你需要计算元素的数量，这里是an example solution基于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-02 11:50:55

Javascript - 子节点数

回答

相关问题