Javascript - дочерний node счет

<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>

Мне нужно получить длину дочернего элемента node, используя идентификатор элемента. Мой код возвращает 7 в результате, но у меня есть только 3 узла.

Ответы

Ответ 1

То, что вы хотите, это .children.length или .childElementCount (не рекомендуется), поскольку childNodes получает все childNodes, а также текстовые узлы, которые в вашем случае 4 (разрывы строк).

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

Ответ 2

childNodes возвращает 3 элемента списка, их текстовое содержимое и пробел между ними (но не во всех браузерах). Три варианта:

FF и Chrome: elem.childElementCount (вернется 3)
IE (& FF AFAIK): elem.childNodes.length (=== 3)
Старый IE: elem.children.length

Ответ 3

Свойство childrenNodes включает все типы узлов: TEXT_NODE, ELEMENT_NODE, COMMEN_NODE и т.д.

Вам нужно подсчитать количество элементов, здесь примерное решение на основе 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