Was ist der Unterschied zwischen Kindern und Kinderknoten in JavaScript?

305

Ich habe mich mit JavaScript gefunden und ich lief über childNodesund childrenEigenschaften. Ich frage mich, was der Unterschied zwischen ihnen ist. Auch ist einer dem anderen vorzuziehen?

javascript dom John
quelle

Antworten:

330

Verstehen Sie, dass dies .childreneine Eigenschaft eines Elements ist . 1 Nur Elemente haben .children, und diese Kinder sind alle vom Typ Element. 2

Ist .childNodesjedoch eine Eigenschaft von Node . .childNodeskann einen beliebigen Knoten enthalten. 3

Ein konkretes Beispiel wäre:

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

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

Meistens möchten Sie verwenden, .childrenda Sie bei Ihrer DOM-Manipulation im Allgemeinen keine Text- oder Kommentarknoten durchlaufen möchten .

Wenn Sie Textknoten bearbeiten möchten, möchten Sie wahrscheinlich .textContentstattdessen. 4

1. Technisch gesehen ist es ein Attribut von ParentNode , einem von Element enthaltenen Mixin.
2. Sie sind alle Elemente, da .childrenes sich um eine HTMLCollection handelt , die nur Elemente enthalten kann.
3. .childNodesKann in ähnlicher Weise jeden Knoten enthalten, da es sich um eine NodeList handelt .
4. Oder .innerText. Sehen Sie die Unterschiede hier oder hier .

Raynos
quelle
3
Ja, IE scheint einige Probleme zu haben: quirksmode.org/dom/w3c_core.html#t71
Felix Kling
4
Tatsächlich ist Kinder eine Eigenschaft der Elternknotenschnittstelle, kein Element. usonsci.wordpress.com/2014/09/30/html-children-vs-childnodes
Sieger
Scheint, dass iOS 8.3 (vielleicht andere?) XML-Dokumente nicht unterstützt.children : jsfiddle.net/fbwbjvch/1
Saebekassebil
4
Hatte nur Probleme damit auf Microsoft Edge mit XML-Knoten. Es scheint, dass Microsoft Edge keine Kinder mag. Das ist gut, ich möchte nicht, dass dieser Browser reproduziert wird.
Dan-Nolan
1
Natürliches Follow-up von "Element vs. Knoten": stackoverflow.com/questions/132564/…
user1454265
23

Element.childrenGibt nur untergeordnete Elemente zurück , während Node.childNodesalle untergeordneten Knoten zurückgegeben werden . Beachten Sie, dass Elemente Knoten sind, sodass beide für Elemente verfügbar sind.

Ich glaube childNodesist zuverlässiger. Beispielsweise stellt MDC (oben verlinkt) fest, dass der IE nur childrenin IE 9 richtig funktioniert hat. childNodesBrowser-Implementierer bieten weniger Fehler.

Matthew Flaschen
quelle
2
Verdammt, wenn dies nur auf IE 6-8 funktionieren würde, wäre ein Traum wahr geworden.
Ry-
3
@minitech es funktioniert (für einen gewissen Wert der Arbeit). Filtert anscheinend .childrenkeine Kommentarknoten heraus, aber es filtert Textknoten heraus.
Raynos
2
@ Raynos: Genau - das gleiche mit .getElementsByTagName('*'). IE kann manchmal so nervig sein ...
Ry-
Es gibt Shim / Polyfill-Implementierungen children, die IE unterstützen.
Wrlee
7

Bisher gute Antworten, ich möchte nur hinzufügen, dass Sie den Typ eines Knotens überprüfen können, indem Sie nodeType:

yourElement.nodeType

Dies gibt Ihnen eine ganze Zahl: (von hier genommen )

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

Beachten Sie, dass laut Mozilla :

Die folgenden Konstanten sind veraltet und sollten nicht mehr verwendet werden: Node.ATTRIBUTE_NODE, Node.ENTITY_REFERENCE_NODE, Node.ENTITY_NODE, Node.NOTATION_NODE

Csaba
quelle
0

Die Auswahl hängt von der Methode ab, nach der Sie suchen!?

Ich werde mit ParentNode.children gehen :

Da es eine namedItemMethode bietet , mit der ich eines der untergeordneten Elemente direkt abrufen kann, ohne alle untergeordneten Elemente zu durchlaufen oder die Verwendung getElementByIdusw. zu vermeiden .

z.B

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

Ich werde mit Node.childNodes gehen :

Da es forEachMethode bietet , wenn ich window.IntersectionObserver zB arbeite

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

Auf Chrome 83

Node.childNodes bietet entries, forEach, item, keys, lengthundvalues

ParentNode.children bietet item, lengthundnamedItem

Max Ma
quelle