web-dev-qa-db-fra.com

Quelle est la différence entre les enfants et les noeuds d'enfants en JavaScript?

Je me suis retrouvé avec JavaScript et j'ai rencontré les propriétés childNodes et children. Je me demande quelle est la différence entre eux. Est-ce que l'un est préféré à l'autre?

javascriptdom
268
John

Comprenez que .children est une propriété d'un Element . 1 Seuls les éléments ont _.children_, et ces enfants sont tous de type Element. 2

Cependant, .childNodes est une propriété de Node . _.childNodes_ peut contenir n’importe quel nœud. 3

Un exemple concret serait:

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

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

La plupart du temps, vous souhaitez utiliser _.children_ car vous ne voulez généralement pas boucler sur les nœuds Text ou Comment de votre manipulation DOM.

Si vous souhaitez manipuler des nœuds de texte, vous préférez probablement .textContent . 4

1. Techniquement, il s'agit d'un attribut de ParentNode , un mixin inclus par Element.
2. Ils sont tous des éléments car _.children_ est un HTMLCollection , qui ne peut contenir que des éléments.
3. De même, _.childNodes_ peut contenir n’importe quel nœud car il s’agit d’un NodeList .
4. Ou .innerText . Voir les différences ici ou ici .

283
Raynos

Element.children ne retourne que les éléments enfants, tandis que Node.childNodes renvoie tous les enfants du nœud. Notez que les éléments sont des nœuds, les deux sont donc disponibles sur les éléments.

Je crois que childNodes est plus fiable. Par exemple, MDC (lien ci-dessus) note que IE n'a que children à droite dans IE 9. childNodes laisse moins de place aux erreurs des développeurs du navigateur.

19
Matthew Flaschen

Bonnes réponses jusqu'à présent, je veux seulement ajouter que vous pouvez vérifier le type d'un nœud en utilisant nodeType:

yourElement.nodeType

Cela vous donnera un entier: (tiré de ici )

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

Notez que selon Mozilla :

Les constantes suivantes sont obsolètes et ne doivent plus être utilisées: Node.ATTRIBUTE_NODE, Node.ENTITY_REFERENCE_NODE, Node.ENTITY_NODE, Node.NOTATION_NODE

5
Csaba