Количество узлов и пробелов в DOM с JavaScript

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, Текст, 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);
}

Живой пример

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/

Надеюсь, это поможет: -)