Il modo migliore per ottenere nodi figlio

Mi chiedevo, JavaScript offre una varietà di metodi per ottenere il primo elemento figlio da qualsiasi elemento, ma qual è il migliore? Per meglio, intendo: la maggior parte compatibile con più browser, più veloce, più completa e prevedibile quando si tratta di comportamento. Un elenco di metodi / proprietà che utilizzo come alias:

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

Questo funziona per entrambi i casi:

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

Questo è in caso di forme o <div>iterazioni. Se potessi incontrare elementi di testo:

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

Per quanto ne so, firstChildusa la NodeList childNodese firstElementChildusa children. Sto basando questo presupposto sul riferimento MDN:

childNodeè un riferimento al primo elemento figlio del nodo elemento, o nullse non ce n'è uno.

Immagino che, in termini di velocità, la differenza, se presente, non sarà quasi nulla, dal momento che firstElementChildè effettivamente un riferimento a children[0], e l' childrenoggetto è già in memoria comunque.

Ciò che mi lancia è l' childNodesoggetto. L'ho usato per dare un'occhiata a un modulo, in un elemento tabella. Mentre childrenelenca tutti gli elementi del modulo, childNodessembra includere anche gli spazi bianchi dal codice HTML:

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

Entrambi i registri <TextNode textContent="\n ">

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

Tutti i log <input type="text"... >. Come mai? Comprenderei che un oggetto mi consentirebbe di lavorare con il codice HTML "grezzo", mentre l'altro si attacca al DOM, ma l' childNodeselemento sembra funzionare su entrambi i livelli.

Per tornare alla mia domanda iniziale, la mia ipotesi sarebbe: se voglio l'oggetto più completo, childNodesè la strada da percorrere, ma a causa della sua completezza, potrebbe non essere il più prevedibile in termini di restituzione dell'elemento che voglio / aspettarsi in qualsiasi momento. Il supporto cross-browser potrebbe anche rivelarsi una sfida in quel caso, anche se potrei sbagliarmi.

Qualcuno potrebbe chiarire la distinzione tra gli oggetti a portata di mano? Se c'è una differenza di velocità, per quanto trascurabile, vorrei saperlo anche io. Se vedo tutto sbagliato, sentiti libero di educarmi.

PS: Per favore, per favore, mi piace JavaScript, quindi sì, voglio occuparmi di questo genere di cose. Risposte come "jQuery si occupa di questo per te" non sono quello che sto cercando, quindi nojquery etichetta.

Sembra che tu ci stia pensando troppo. Hai osservato la differenza tra childNodese children, che childNodescontiene tutti i nodi, inclusi i nodi di testo costituiti interamente da spazi bianchi, mentre childrenè una raccolta di soli nodi figlio che sono elementi. Questo è davvero tutto ciò che c'è da fare.

Non c'è nulla di imprevedibile in entrambe le raccolte, anche se ci sono un paio di problemi da tenere presente:

• IE <= 8 non include nodi di testo solo spazi vuoti childNodesmentre altri browser lo fanno
• IE <= 8 include nodi di commento all'interno childrenmentre altri browser hanno solo elementi

children, firstElementChildE gli amici sono solo comodità, che presentano una visualizzazione filtrata del DOM limitato a pochi elementi.

firstElementChild potrebbe non essere disponibile in IE <9 (solo firstChild)

su IE <9 firstChild è il firstElementChild perché MS DOM (IE <9) non memorizza nodi di testo vuoti. Ma se lo fai su altri browser restituiranno nodi di testo vuoti ...

la mia soluzione

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

questo darà al primo figlio anche su IE <9

Il modo cross browser da fare è utilizzare childNodesper ottenere NodeList, quindi creare un array di tutti i nodi con 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/

Ciò è particolarmente semplice se si utilizza una libreria di utilità come lodash :

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

Futuro:

È possibile utilizzare querySelectorAllin combinazione con la :scopepseudo-classe (corrisponde all'elemento che rappresenta il punto di riferimento del selettore):

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

Al momento della stesura di questo :scopeè supportato in Chrome, Firefox e Safari.

Solo per aggiungere alle altre risposte, ci sono ancora differenze notevoli qui, in particolare quando si tratta di <svg>elementi.

Ho usato entrambi .childNodese .childrenho preferito lavorare con il HTMLCollectionconsegnato dal .childrengetter.

Oggi, tuttavia, ho riscontrato problemi con IE / Edge non riusciti durante l'utilizzo .childrensu un <svg>. Sebbene .childrensia supportato in IE su elementi HTML di base, non è supportato su frammenti di documento / documento o elementi SVG .

Per me, sono stato in grado di afferrare semplicemente gli elementi necessari .childNodes[n]perché non ho nodi di testo estranei di cui preoccuparmi. Potresti essere in grado di fare lo stesso, ma come menzionato altrove sopra, non dimenticare che potresti imbatterti in elementi inaspettati.

Spero che questo sia utile per qualcuno che si gratta la testa cercando di capire perché .childrenfunziona altrove nei loro js su IE moderno e non riesce su documenti o elementi SVG.

Ehi ragazzi non lasciatevi ingannare dagli spazi bianchi. prova questo in un browser console. usa javascript nativo. Ecco un esempio con due set 'ul' con la stessa classe. Non è necessario avere l'elenco 'ul' tutto in una riga per evitare lo spazio bianco, basta usare il conteggio dell'array per saltare sullo spazio bianco.

Come ottenere spazio intorno bianco con querySelector()allora childNodes[]JS collegamento 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>