В чем разница между детьми и childNodes в JavaScript?

Я нашел себя с помощью JavaScript, и я наткнулся на childNodes и children свойства. Мне интересно, какая разница между ними. Также является предпочтительным для другого?

Ответ 1

.children является свойством Element. Только у Элементов есть дети, и эти дети - все типа Элемента.

Однако .childNodes является свойством Node. .childNodes может содержать любой node.

Таким образом, конкретным примером может быть

var el = document.createElement("div");
el.textContent = "foo"
el.childNodes.length === 1; // TextNode is a node child
el.children.length === 0; // no Element children

Конечно, .children - DOM4, поэтому поддержка браузера нестабильна, однако если вы используете DOM-shim, ваши проблемы с перекрестным браузером пойдут прочь!

В большинстве случаев вы хотите использовать .children, потому что обычно вы не хотите перебирать TextNodes или комментарии в вашей DOM-манипуляции.

Если вы хотите манипулировать TextNodes, вы, скорее всего, захотите .textContent.

Ответ 2

Element.children возвращает только дочерние элементы, а Node.childNodes возвращает всех детей node. Обратите внимание, что элементы являются узлами, поэтому оба доступны на элементах.

Я считаю, что childNodes более надежный. Например, MDC (связанный выше) отмечает, что IE только получил children прямо в IE 9. childNodes предоставляет меньше возможностей для ошибок разработчиками браузера.