Je me demandais, JavaScript offre une variété de méthodes pour obtenir le premier élément enfant à partir de n'importe quel élément... mais lequel est le meilleur? Par meilleur, je veux dire: la plupart de la croix-navigateur compatible, plus rapide, plus complète et plus prévisible quand il s'agit d'un comportement. Une liste des méthodes/propriétés-je utiliser comme alias:
var elem = document.getElementById('container');
var child = elem.children[0];
var child = elem.firstElementChild;//== children[0]
Cela fonctionne pour les deux cas:
var child = elem.childNodes[0];//or childNodes[1], see below
C'est dans le cas des formes, ou des div itération. Si je pouvais rencontrer des éléments de texte:
var child = elem.childNodes;//treat as Nodelist
var child = elem.firstChild;
Aussi loin que je peux travailler, firstChild utilise la Nodelist de childNodes, et firstElementChild utilise children. Je suis fonder cette hypothèse sur le MDN référence:
childNode est une référence au premier élément enfant de l'élément de nœud, ou null si il n'existe pas.
Je suppose que, en termes de vitesse de la différence, le cas échéant, sera à côté de rien du tout, depuis firstElementChild est effectivement une référence à l' children[0], et l' children objet est déjà dans la mémoire de toute façon.
Ce qui ne me jeter est l' childNodes objet. Je l'ai utilisé pour prendre un coup d'oeil à une forme, à un élément de tableau. Alors qu' children répertorie tous les éléments de formulaire, childNodes semble également inclure les espaces du code html:
console.log(elem.childNodes[0]);
console.log(elem.firstChild);
à la fois journal <TextNode textContent="\n ">
console.log(elem.childNodes[1]);
console.log(elem.children[0]);
console.log(elem.firstElementChild);
Tous les log <input type="text"... Comment ça se fait? Je comprendrais qu'un objet puisse me permettre de travailler avec les "brutes" code HTML, alors que les autres bâtons pour les DOM, mais l' childNodes élément semble fonctionner sur les deux niveaux.
Pour revenir à ma question initiale: je dirais: si je veux le plus complet de l'objet, childNodes est le chemin à parcourir, mais à cause de son exhaustivité, il pourrait ne pas être le plus prévisible en termes de retour à l'élément que je veux/s'attendre à un moment donné. La croix-prise en charge du navigateur peut aussi s'avérer être un défi en ce cas, bien que j'ai peut-être tort.
Quelqu'un pourrait-il clarifier la distinction entre les objets à portée de main? Si il y a une différence de vitesse, cependant négligeable, je voudrais savoir, aussi. Si je le vois tous mal, n'hésitez pas à m'instruire :-).
PS: s'il vous plaît, s'il vous plaît, j'aime le JavaScript, donc oui, je veux faire face à ce genre de chose. des réponses comme "jQuery traite de cela pour vous' ne sont pas ce que je cherche, donc pas de jQuery tag.
