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

Question

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

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

499 3

javascript dom

3 ответов:

Comments

Ничего не найдено.

Raynos · Accepted Answer · 2011-10-29 02:05:28

.children является собственностью элемент. Только элементы имеют дочерние элементы, и эти дочерние элементы все типа элемента.
.childNodes является собственностью узел. .childNodes может содержать любой узел.
так что конкретный пример будет
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 потому что обычно вы не хотите перебирать текстовые узлы или комментарии в своей манипуляции DOM.

если вы хотите манипулировать TextNodes вы, вероятно, хотите .

Matthew Flaschen · Accepted Answer · 2011-10-29 01:59:14

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

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

Csaba · Accepted Answer · 2018-08-26 13:05:38

хорошие ответы до сих пор, я хочу только добавить, что вы можете проверить тип узла с помощью nodeType:

yourElement.nodeType

Это даст вам целое число: (взято из здесь)

| Value |             Constant             |                          Description                          |  |
|-------|----------------------------------|---------------------------------------------------------------|--|
|    1  | Node.ELEMENT_NODE                | An Element node such as <p> or <div>.                         |  |
|    2  | Node.ATTRIBUTE_NODE              | An Attribute of an Element. The element attributes            |  |
|       |                                  | are no longer implementing the Node interface in              |  |
|       |                                  | DOM4 specification.                                           |  |
|    3  | Node.TEXT_NODE                   | The actual Text of Element or Attr.                           |  |
|    4  | Node.CDATA_SECTION_NODE          | A CDATASection.                                               |  |
|    5  | Node.ENTITY_REFERENCE_NODE       | An XML Entity Reference node. Removed in DOM4 specification.  |  |
|    6  | Node.ENTITY_NODE                 | An XML <!ENTITY ...> node. Removed in DOM4 specification.     |  |
|    7  | Node.PROCESSING_INSTRUCTION_NODE | A ProcessingInstruction of an XML document                    |  |
|       |                                  | such as <?xml-stylesheet ... ?> declaration.                  |  |
|    8  | Node.COMMENT_NODE                | A Comment node.                                               |  |
|    9  | Node.DOCUMENT_NODE               | A Document node.                                              |  |
|   10  | Node.DOCUMENT_TYPE_NODE          | A DocumentType node e.g. <!DOCTYPE html> for HTML5 documents. |  |
|   11  | Node.DOCUMENT_FRAGMENT_NODE      | A DocumentFragment node.                                      |  |
|   12  | Node.NOTATION_NODE               | An XML <!NOTATION ...> node. Removed in DOM4 specification.   |  |

обратите внимание, что согласно Mozilla:

следующие константы устарели и не должны использоваться больше: узел.ATTRIBUTE_NODE, узел.ENTITY_REFERENCE_NODE, узел.ENTITY_NODE, Узел.NOTATION_NODE