Eu queria saber, JavaScript oferece uma variedade de métodos para obter o primeiro elemento filho de qualquer elemento, mas qual é o melhor? Pelo melhor, quero dizer: a maioria dos cross-browser compatível, mais rápida, mais abrangente e previsível quando se trata de comportamento. Uma lista de métodos / propriedades que uso como aliases:

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

Isso funciona nos dois casos:

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

Isso é no caso de formulários ou<div> iteração. Se eu puder encontrar elementos de texto:

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

Tanto quanto eu posso trabalhar,firstChild usa o NodeList dechildNodesefirstElementChild usachildren. Estou baseando essa suposição na referência do MDN:

childNode é uma referência ao primeiro elemento filho do nó do elemento ounull se não houver um.

Eu estou supondo que, em termos de velocidade, a diferença, se houver, será quase nada, já quefirstElementChild é efetivamente uma referência achildren[0], e aschildren objeto já está na memória de qualquer maneira.

O que me atira, é ochildNodes objeto. Eu usei para dar uma olhada em um formulário, em um elemento de tabela. Enquantochildren lista todos os elementos do formulário,childNodes também parece incluir espaço em branco do 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 o log<input type="text"…>. Por quê? Eu entendo que um objeto me permitiria trabalhar com o código HTML "bruto", enquanto o outro ficava no DOM, mas ochildNodes elemento parece funcionar em ambos os níveis.

Para voltar à minha pergunta inicial, meu palpite seria: se eu quiser o objeto mais abrangente,childNodes é o caminho a percorrer, mas por causa de sua abrangência, pode não ser o mais previsível em termos de retornar o elemento que desejo / espero em qualquer momento. O suporte entre navegadores também pode ser um desafio nesse caso, embora eu possa estar errado.

Alguém poderia esclarecer a distinção entre os objetos em mãos? Se houver uma diferença de velocidade, no entanto insignificante, também gostaria de saber. Se estou vendo tudo errado, sinta-se à vontade para me instruir.

PS: Por favor, por favor, eu gosto de JavaScript, então sim, eu quero lidar com esse tipo de coisa. Respostas como "jQuery lida com isso para você" não são o que eu estou procurando, portanto, nãojquery tag.