Melhor maneira de obter nós filhos

Eu queria saber, o JavaScript oferece uma variedade de métodos para obter o primeiro elemento filho de qualquer elemento, mas qual é o melhor? Pelo melhor, quero dizer: mais compatível com vários navegadores, mais rápido, mais abrangente e previsível quando se trata de comportamento. Uma lista de métodos / propriedades que eu uso como alias:

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

Isso funciona para os dois casos:

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

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

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

Tanto quanto eu posso trabalhar, firstChildusa o NodeList de childNodes, e firstElementChildusa children. Estou baseando essa suposição na referência MDN:

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

Eu estou supondo que, em termos de velocidade, a diferença, se houver, será quase nula, já que firstElementChildé efetivamente uma referência children[0]e o childrenobjeto já está na memória de qualquer maneira.

O que me joga, é o childNodesobjeto. Eu usei para dar uma olhada em um formulário, em um elemento de tabela. Enquanto childrenlista todos os elementos do formulário, childNodestambém parece incluir espaço em branco no código HTML:

console.log(elem.childNodes[0]);
console.log(elem.firstChild);

Ambos log <TextNode textContent="\n ">

console.log(elem.childNodes[1]);
console.log(elem.children[0]);
console.log(elem.firstElementChild);

Todos os log <input type="text"... >. Por quê? Eu entenderia que um objeto me permitiria trabalhar com o código HTML "bruto", enquanto o outro adere ao DOM, mas o childNodeselemento parece funcionar nos dois níveis.

Para voltar à minha pergunta inicial, meu palpite seria: se eu quero o objeto mais abrangente, childNodesé o caminho a percorrer, mas, devido à sua abrangência, pode não ser o mais previsível em termos de retorno do elemento que eu quero / esperar a qualquer momento. O suporte a vários 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 questão? Se houver uma diferença de velocidade, ainda que insignificante, eu também gostaria de saber. Se eu estiver vendo tudo errado, sinta-se à vontade para me educar.

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

Parece que você está pensando demais. Você observou a diferença entre childNodese children, que childNodescontém todos os nós, incluindo os nós de texto que consistem inteiramente em espaço em branco, enquanto childrené uma coleção apenas dos nós filhos que são elementos. Isso é realmente tudo o que existe.

Não há nada imprevisível em nenhuma das coleções, embora haja alguns problemas a serem observados:

• O IE <= 8 não inclui nós de texto somente em espaço em branco, childNodesenquanto outros navegadores
• O IE <= 8 inclui nós de comentários, childrenenquanto outros navegadores têm apenas elementos

children, firstElementChilde amigos são apenas conveniências, apresentando uma exibição filtrada do DOM restrita a apenas elementos.

firstElementChild pode não estar disponível no IE <9 (apenas firstChild)

no IE <9 firstChild é o firstElementChild porque o MS DOM (IE <9) não está armazenando nós de texto vazios. Mas se você fizer isso em outros navegadores, eles retornarão nós de texto vazios ...

minha solução

child=(elem.firstElementChild||elem.firstChild)

isso dará o primeiro filho mesmo no IE <9

A maneira de fazer vários navegadores é usar childNodespara obter NodeListe criar uma matriz de todos os nós com nodeType ELEMENT_NODE .

/**
 * Return direct children elements.
 *
 * @param {HTMLElement}
 * @return {Array}
 */
function elementChildren (element) {
    var childNodes = element.childNodes,
        children = [],
        i = childNodes.length;

    while (i--) {
        if (childNodes[i].nodeType == 1) {
            children.unshift(childNodes[i]);
        }
    }

    return children;
}

http://jsfiddle.net/s4kxnahu/

Isso é especialmente fácil se você estiver usando uma biblioteca de utilitários como o lodash :

/**
 * Return direct children elements.
 *
 * @param {HTMLElement}
 * @return {Array}
 */
function elementChildren (element) {
    return _.where(element.childNodes, {nodeType: 1});
}

Futuro:

Você pode usar querySelectorAllem combinação com a :scopepseudo-classe (corresponde ao elemento que é o ponto de referência do seletor):

parentElement.querySelectorAll(':scope > *');

No momento da redação deste artigo, isso :scopeé suportado no Chrome, Firefox e Safari.

Apenas para adicionar outras respostas, ainda existem diferenças notáveis ​​aqui, especificamente ao lidar com <svg>elementos.

Eu usei ambos .childNodese .childrenpreferi trabalhar com os HTMLCollectionentregues pelo .childrengetter.

Hoje, no entanto, tive problemas com o IE / Edge com falha ao usar .childrenum <svg>. Embora .childrenseja suportado no IE em elementos HTML básicos, ele não é suportado em fragmentos de documento / documento ou elementos SVG .

Para mim, eu pude simplesmente pegar os elementos necessários, .childNodes[n]porque não tenho nós de texto estranhos para me preocupar. Você pode fazer o mesmo, mas, como mencionado acima, não se esqueça de que pode encontrar elementos inesperados.

Espero que isso seja útil para alguém coçando a cabeça tentando descobrir por que .childrenfunciona em outros lugares em seus js no IE moderno e falha nos elementos de documento ou SVG.

Ei, pessoal, não deixe o espaço em branco te enganar. basta testar isso em um navegador de console. use javascript nativo. Aqui está e exemplo com dois conjuntos 'ul' com a mesma classe. Você não precisa ter sua lista 'ul' em uma linha para evitar o espaço em branco; basta usar a contagem de matrizes para pular o espaço em branco.

Como chegar espaço em torno branco com querySelector()então childNodes[]js ligação violino: https://jsfiddle.net/aparadise/56njekdo/

var y = document.querySelector('.list');
var myNode = y.childNodes[11].style.backgroundColor='red';

<ul class="list">
    <li>8</li>
    <li>9</li>
    <li>100</li>
</ul>

<ul class="list">
    <li>ABC</li>
    <li>DEF</li>
    <li>XYZ</li>
</ul>