Quelle est la différence entre les enfants et childNodes en JavaScript?
Je me suis retrouvé à utiliser JavaScript et j'ai couru à travers childNodes et children propriétés. Je me demande Quelle est la différence entre eux. Est également un préféré à l'autre?
3 réponses
.children est une propriété d'une Élément de. Seuls les éléments ont des enfants, et ces enfants sont tous de type élément.
Cependant .childNodes est une propriété de Node. .childNodes peut contenir n'importe quel nœud.
, Donc un exemple concret serait
var el = document.createElement("div");
el.textContent = "foo"
el.childNodes.length === 1; // TextNode is a node child
el.children.length === 0; // no Element children
Bien sûr .children est DOM4 donc le support du navigateur est fragile, mais si vous utilisez le DOM-shim , vos problèmes de navigateur vont disparaître!
La plupart du temps vous voulez utiliser .children parce que généralement, vous ne voulez pas faire de boucle sur les TextNodes ou les commentaires dans votre manipulation DOM.
Si vous voulez manipuler TextNodes, vous voulez probablement .textContent à la place.
Element.children retourne seul élément d'enfants, alors que Node.childNodes renvoie tous les enfants du nœud. Notez que les éléments sont des nœuds, donc les deux sont disponibles sur les éléments.
Je crois que childNodes est plus fiable. Par exemple, MDC (lié ci-dessus) note que IE n'a obtenu children que dans IE 9. childNodes fournit moins de marge d'erreur par les implémenteurs du navigateur.
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 ont été dépréciées et ne doivent pas être utilisées plus: Nœud.ATTRIBUTE_NODE, noeud.ENTITY_REFERENCE_NODE, noeud.ENTITY_NODE, noeud.NOTATION_NODE