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 - 子節點數

回答

相關問題