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

Question

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?

Answer 1

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

Toutefois .childNodes est une propriété de Nœud. .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 prise en charge du navigateur est fragile, toutefois, si vous utilisez les DOM-shim, votre navigateur croix problèmes vont s'en aller!

La plupart du temps que vous souhaitez utiliser .children parce que généralement, vous ne voulez pas faire une boucle sur TextNodes ou des Commentaires dans votre manipulation du DOM.

Si vous ne souhaitez manipuler TextNodes vous voulez probablement, .textContent à la place.

Answer 2

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

Answer 3

children sera de retour immédiat de l'enfant-éléments, tout en childNodes sera de retour tous les nœuds enfants, profondément imbriquées trop, et le texte aussi.

Vérifiez le jsFiddle exemple: http://jsfiddle.net/xRqPv/