JavaScript中的children和childNodes有什么区别？

Question

JavaScript中的children和childNodes有什么区别？

Joh*_*ohn 279 javascript dom

我发现自己使用JavaScript和我对面跑去childNodes和children性能.我想知道它们之间的区别是什么.另一个是另一个优先选择？

Answer 1

Ray*_*nos 300

.children是元素的属性.只有Elements有子节点,这些子节点都是Element类型.

但是Node .children的属性.可以包含任何节点..childNodes

所以一个具体的例子就是

let el = document.createElement("div");
el.textContent = "foo";

el.childNodes.length === 1; // Contains a Text node child.
el.children.length === 0;   // No Element children.

Run Code Online (Sandbox Code Playgroud)

当然.childNodes是DOM4所以浏览器支持是不稳定的,但是如果你使用DOM-shim,你的跨浏览器问题就会消失!

大多数时候你想使用,.children因为通常你不想在DOM操作中循环遍历TextNodes或Comments.

如果您确实想要操作TextNodes,则可能需要.textContent.

实际上,children是parentnode接口的属性,而不是element.http://usonsci.wordpress.com/2014/09/30/html-children-vs-childnodes/ (4认同)
只在使用XML节点的Microsoft Edge上遇到此问题.看来Microsoft Edge不喜欢孩子.这很好,我不希望浏览器再现. (4认同)
是的,IE似乎有一些问题:http://www.quirksmode.org/dom/w3c_core.html#t71 (3认同)
“元素与节点”的自然后续：http://stackoverflow.com/questions/132564/whats-the-difference-between-an-element-and-a-node-in-xml (2认同)

Answer 2

Mat*_*hen 21

Element.children仅返回元素子元素,同时Node.childNodes返回所有节点子元素.请注意,元素是节点,因此两者都可以在元素上使用.

我相信childNodes更可靠.例如,MDC(上面链接)指出,IE仅children在IE 9中正确使用.浏览 childNodes器实现者提供的错误空间较小.

@minitech确实有效(对于某些工作价值).显然`.children`不会过滤注释节点,但会过滤掉文本节点. (3认同)
该死，如果这仅适用于 IE 6-8，那将是梦想成真。 (2认同)
@Raynos:完全 - 与`.getElementsByTagName('*')`相同.IE有时候会很烦人...... (2认同)

Answer 3

Csa*_*aba 7

到目前为止，很好的答案是，我只想补充一点，您可以使用来检查节点的类型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.   |  |

Run Code Online (Sandbox Code Playgroud)

请注意，根据Mozilla：

以下常量已被弃用，不再应使用：Node.ATTRIBUTE_NODE，Node.ENTITY_REFERENCE_NODE，Node.ENTITY_NODE，Node.NOTATION_NODE

归档时间：	14 年，1 月前
查看次数：	97752 次
最近记录：	6 年，4 月前