Ich habe mich bei der Verwendung von JavaScript wiedergefunden und bin auf childNodes y children Eigenschaften. Ich frage mich, was der Unterschied zwischen ihnen ist. Und ist das eine dem anderen vorzuziehen?
Antworten
Zu viele Anzeigen?
Verstehen Sie, dass .children ist eine Eigenschaft eines Element . 1 Nur Elemente haben .children , und diese Kinder sind alle vom Typ Element. 2
Allerdings, .childNodes ist eine Eigenschaft von Knotenpunkt . .childNodes kann jeden 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.Die meiste Zeit wollen Sie die .children weil man in der Regel keine Schleife über Text o Kommentar Knoten in Ihrer DOM-Manipulation.
Wenn Sie Textknoten manipulieren wollen, sollten Sie wahrscheinlich .textContent stattdessen. 4
1. Technisch gesehen ist es ein Attribut von ParentNode , ein Mixin, das von Element.
2. Sie sind alle Elemente, weil .children ist eine HTMLCollection , die nur Elemente enthalten kann.
3. Ähnlich, .childNodes kann jeden beliebigen Knoten enthalten, da es sich um eine NodeList .
4. Oder .innerText . Siehe die Unterschiede aquí o aquí .
Matthew Flaschen
Punkte
266507
Element.children nur Retouren Element Kinder, während Node.childNodes gibt alle Knoten Kinder. Beachten Sie, dass es sich bei Elementen um Knoten handelt, so dass beide auf Elementen verfügbar sind.
Ich glaube childNodes zuverlässiger ist. MDC (oben verlinkt) stellt zum Beispiel fest, dass der IE nur children rechts im IE 9. childNodes bietet weniger Spielraum für Fehler der Browser-Implementierer.
Csa77
Punkte
549
Gute Antworten bis jetzt, ich möchte nur hinzufügen, dass man den Typ eines Knotens überprüfen könnte, indem man nodeType :
yourElement.nodeType
Dies ergibt eine ganze Zahl: (entnommen aus aquí )
| 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 nach Mozilla :
Die folgenden Konstanten sind veraltet und sollten nicht mehr verwendet werden nicht mehr verwendet werden: Node.ATTRIBUTE_NODE, Node.ENTITY_REFERENCE_NODE, Node.ENTITY_NODE, Node.NOTATION_NODE
