Question

我正在尝试计算一个部分中的节点数，我得到了这个：

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，Text，p，Text，如果你希望你的函数是递归的，你应该让它递归。

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/

我希望这会有所帮助： - ）

使用javascript在DOM中的节点数和空白数

2 个答案: