Quelle est la différence entre les enfants et les childNodes en JavaScript?

J'ai trouvé moi-même à l'aide de JavaScript et j'ai couru à travers childNodes et children propriétés. Je me demande quelle est la différence entre eux est. Est également un préféré à l'autre?

InformationsquelleAutor John | 2011-10-28
  1. 306

    Comprendre que .enfants est une propriété d'une Élément. 1 Seuls les Éléments ont .children, et ces enfants sont tous de type Élément. 2

    Cependant, .childNodes est une propriété de Nœud. .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 parce que généralement, vous ne voulez pas faire une boucle sur Texte ou Commentaire des noeuds dans votre manipulation du DOM.

    Si vous ne souhaitez manipuler les nœuds de Texte, vous voulez probablement .textContent à la place. 4

    1. Techniquement, c'est un attribut de ParentNode, un mixin inclus par Élément.

    2. Ils sont tous les éléments parce que .children est un HTMLCollection, qui ne peut contenir que des éléments.

    3. De même, .childNodes peut contenir n'importe quel nœud parce que c'est un NodeList.

    4. Ou .innerText. Voir les différences ici ou ici.

    InformationsquelleAutor Raynos
  2. 21

    Élément .enfants retourne seul élément d'enfants, alors que Nœud.childNodes renvoie tous les enfants du nœud. Notez que les éléments sont des nœuds, de sorte que les deux sont disponibles sur les éléments.

    Je crois childNodes est plus fiable. Par exemple, MDC (lien ci-dessus) note que IE seul a children droit dans IE 9. childNodes fournit de moins en moins de place à l'erreur par navigateur réalisateurs.

    • Darn, si seulement cette travaillé sur IE 6 à 8, ce serait un rêve devenu réalité.
    • il ne fonctionne pas (pour une certaine valeur de travail). Apparemment .children ne filtre pas les nœuds de commentaires, mais il exclut les nœuds de texte.
    • Exactement - même avec .getElementsByTagName('*'). C'est à dire peut être gênant parfois...
    • Il y a de cale/polyfill implémentations de children qui prennent en charge IE.
    InformationsquelleAutor Matthew Flaschen
  3. 7

    De bonnes réponses pour l'instant, je veux seulement ajouter que, vous pouvez vérifier le type d'un nœud à l'aide de nodeType:

    yourElement.nodeType

    Ce sera vous donnez un nombre entier: (prises 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.   |  |

    Note que, selon Mozilla:

    Les constantes suivantes ont été déprécié et ne doit pas être utilisé
    plus: Nœud.ATTRIBUTE_NODE, Nœud.ENTITY_REFERENCE_NODE, Nœud.ENTITY_NODE, Nœud.NOTATION_NODE

    InformationsquelleAutor Csaba