JavaScriptの子とchildNodeの違いは何ですか？

305

私はJavaScriptを使用していることに気づきchildNodes、childrenプロパティに遭遇しました。それらの違いは何だろうと思っています。また、一方が他方よりも好ましいですか？

javascript dom

— ジョン
ソース

330

Elementの .childrenプロパティであることを理解してください。¹要素のみがを持ち、これらの子はすべて要素タイプです。².children

ただし、.childNodesはNodeのプロパティです。.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.

ほとんどの場合、使用したいのは.children、通常、DOM操作でTextノードまたはCommentノードをループしたくないためです。

Textノードを操作したい場合は、.textContent代わりに使用することをお勧めします。⁴

^{1.技術的には、Elementに含まれるミックスインであるParentNodeの属性です。}
^{2.ので、彼らはすべての要素が.childrenあるHTMLCollection要素のみを含めることができ、。}
^{3.同様に、NodeListである.childNodesため、任意のノードを保持できます。}
^{4.または.innerText。ここまたはここの違いを参照してください。}

— レイノス
ソース

3

はい、IEにはいくつかの問題があるようです：quirksmode.org/dom/w3c_core.html#t71

— Felix Kling

4

実際、子は要素ではなく、親ノードインターフェースのプロパティです。usonsci.wordpress.com/2014/09/30/html-children-vs-childnodes

— ビクター

iOS 8.3（たぶん他のもの？）は.childrenXMLドキュメントをサポートしていないようです：jsfiddle.net/fbwbjvch/1

— Saebekassebil

4

XMLノードのあるMicrosoft Edgeでのみ問題がありました。Microsoft Edgeは子供が好きではないようです。それは良いです、私はそのブラウザを再現させたくありません。

— Dan-Nolan

1

ナチュラルフォローアップ「要素対ノード」の：stackoverflow.com/questions/132564/...

— user1454265

23

Element.children要素の子のみをNode.childNodes返し、すべてのノードを返します子。要素はノードであるため、どちらも要素で使用できます。

私childNodesはより信頼できると信じています。たとえば、MDC（上記にリンク）は、IE childrenがIE 9でのみ正しく childNodes機能したことを示しており、ブラウザーの実装者によるエラーの余地が少なくなっています。

— マシュー・フラッシェン
ソース

2

くそー、これがIE 6-8でうまくいったなら、それは夢が叶うことになるだろう。

— Ry-

3

@minitechは機能します（ある程度の価値がある場合）。どうやら.childrenコメントノードは除外されませんが、テキストノードは除外されます。

— Raynos、2011年

2

@Raynos：まさに-と同じ.getElementsByTagName('*')です。IEはときどき迷惑なことがあります...

— Ry-

childrenIEをサポートするシム/ポリフィルの実装があります。

— 18年

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

注意に従っているのMozilla：

次の定数は廃止されており、今後は使用しないでください：Node.ATTRIBUTE_NODE、Node.ENTITY_REFERENCE_NODE、Node.ENTITY_NODE、Node.NOTATION_NODE

— ツァバ
ソース

0

あなたが探している方法に応じて選択してください！？

私は行きますParentNode.children：

それが提供したようnamedItemに私を可能にする方法を直接、すべての子どもたちをループまたは使用することを回避することなく、子要素のいずれかを取得するgetElementByIdなど

例えば

ParentNode.children.namedItem('ChildElement-ID'); // JS
ref.current.children.namedItem('ChildElement-ID'); // React
this.$refs.ref.children.namedItem('ChildElement-ID'); // Vue

私は行きますNode.childNodes：

それはforEach私が使用するときの方法を提供するので、window.IntersectionObserver 例えば

nodeList.forEach((node) => { observer.observe(node) })
// IE11 does not support forEach on nodeList, but easy to be polyfilled.

Chrome 83の場合

Node.childNodes提供しentries、forEach、item、keys、lengthおよびvalues

ParentNode.childrenはitem、lengthおよびnamedItem

— マックスマ
ソース