在使用JavaScript

Question

我想一個區間內計算節點數量的DOM節點和空白的號碼，我得到這個：

function whatChildren(e) 
{ 
    var Cnodes= e.target.childNodes; 

    document.write(e.target.nodeName + " number of nodes " + Cnodes.length); 
} 

但是，當我試圖讓節點的數量：

如果我得到這個：

<section> 
     <h2>Text</h2> 
     <p>Text</p> 
</section> 

我得到5個節點的長度。當我真的有4個節點。

但如果我把它放在這樣：

<section><h2>Text</h2><p>Text</p></section> 

我得到2個節點的長度...它是從上面同樣的事情...

我不知道什麼是問題......我認爲這是與空白有關的東西，但我不知道如何刪除以獲得正確數量的節點與此。

有什麼建議嗎？

Answer 1

childNodes包含所有節點，即包含TextNodes。這裏有兩個元素和三個文本節點

<section><TextNode>\n</TextNode> 
     <h2>Text</h2><TextNode>\n</TextNode> 
     <p>Text</p><TextNode>\n</TextNode> 
</section> 

使用縮小版本，您只有兩個元素。

<section><h2>Text</h2><p>Text</p></section> 

既然你說你有4個節點我想你的意思h2，文本，p，文字，如果你想你的函數是遞歸的，你應該讓遞歸。

function whatChildren(e) { 
    var nodes= [].slice.call(this.childNodes), 
     len = nodes.length; 

    for (var i = 0; i < len; i++) { 
     var node = nodes[i], 
      childNodes = node.childNodes || [], 
      nodesLength = childNodes.length; 

     nodes = nodes.concat(childNodes); 
     len += nodesLength; 
    } 

    console.log(this.nodeName + " number of nodes " + len); 
} 

Live Example

Answer 2

你可以指望用下面的代碼正確的子號：

function whatChildren(e) 
{ 
    var kids = e.target.childNodes.length; 
    var realKids = 0; 
    var parent = e.target; 
    var i = 0; 

    while(i < kids){ 
     if(parent.childNodes[i].nodeType != 3){ 
     realKids++; 
     } 
     i++; 
    } 

    document.write(e.target.nodeName + " number of nodes " + realKids); 
} 

看看這篇文章的更多詳細信息：

• http://blog.tegneblokken.net/2009/08/counting-childnodes-with-javascript-the-whitespace-incident/

我希望這有助於:-)