Me preguntaba si JavaScript ofrece una variedad de métodos para obtener el primer elemento secundario de cualquier elemento, pero ¿cuál es el mejor? Por mejor, quiero decir: más compatible con varios navegadores, más rápido, más completo y más predecible cuando se trata de comportamiento. Una lista de métodos / propiedades que uso como alias:

<code>var elem = document.getElementById('container');
var child = elem.children[0];
var child = elem.firstElementChild; // == children[0]
</code>

Esto funciona para ambos casos:

<code>var child = elem.childNodes[0]; // or childNodes[1], see below
</code>

Eso es en el caso de las formas, o<div> iteración. Si pudiera encontrar elementos de texto:

<code>var child = elem.childNodes; // treat as NodeList
var child = elem.firstChild;
</code>

Hasta donde puedo trabajar,firstChild utiliza la lista de nodos dechildNodesyfirstElementChild usoschildren. Estoy basando este supuesto en la referencia de MDN:

childNode es una referencia al primer elemento hijo del nodo de elemento, onull si no hay uno

Supongo que, en términos de velocidad, la diferencia, si la hay, será casi nula, ya quefirstElementChild es efectivamente una referencia achildren[0], y elchildren El objeto ya está en la memoria de todos modos.

Lo que me tira, es elchildNodes objeto. Lo he usado para echar un vistazo a un formulario, en un elemento de tabla. Mientraschildren enumera todos los elementos de formulario,childNodes También parece incluir espacios en blanco del código HTML:

<code>console.log(elem.childNodes[0]);
console.log(elem.firstChild);
</code>

Ambos log<TextNode textContent="\n ">

<code>console.log(elem.childNodes[1]);
console.log(elem.children[0]);
console.log(elem.firstElementChild);
</code>

Todo el registro<input type="text"…>. ¿Cómo? Comprendería que un objeto me permitiría trabajar con el código HTML "sin procesar", mientras que el otro se adhiere al DOM, perochildNodes El elemento parece funcionar en ambos niveles.

Para volver a mi pregunta inicial, mi conjetura sería: si quiero el objeto más completo,childNodes es el camino a seguir, pero debido a su amplitud, podría no ser lo más predecible en términos de devolver el elemento que quiero / espero en un momento dado. El soporte entre navegadores también podría ser un desafío en ese caso, aunque podría estar equivocado.

¿Alguien podría aclarar la distinción entre los objetos a mano? Si hay una diferencia de velocidad, aunque sea insignificante, también me gustaría saberlo. Si estoy viendo todo esto mal, siéntete libre de educarme.

PD: Por favor, por favor, me gusta JavaScript, así que sí, quiero lidiar con este tipo de cosas. Respuestas como "jQuery se ocupa de esto por usted" no son lo que estoy buscando, por lo tanto nojquery etiqueta.