Der beste Weg, um untergeordnete Knoten zu erhalten

Ich habe mich gefragt, ob JavaScript eine Vielzahl von Methoden bietet, um das erste untergeordnete Element aus einem Element abzurufen. Aber welches ist das beste? Mit "am besten" meine ich: am meisten browserübergreifend kompatibel, am schnellsten, am umfassendsten und vorhersehbarsten, wenn es um Verhalten geht. Eine Liste der Methoden / Eigenschaften, die ich als Aliase verwende:

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

Dies funktioniert in beiden Fällen:

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

Dies ist bei Formularen oder <div>Iterationen der Fall . Wenn ich auf Textelemente stoßen könnte:

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

Soweit ich firstChilddas beurteilen kann, verwendet die NodeList von childNodesund firstElementChildverwendet children. Ich stütze diese Annahme auf die MDN-Referenz:

childNodeist eine Referenz auf das erste untergeordnete Element des Elementknotens oder nullwenn es keines gibt.

Ich vermute, dass in Bezug auf die Geschwindigkeit der Unterschied, wenn überhaupt, so gut wie nichts sein wird, da er firstElementChildeffektiv eine Referenz children[0]ist und das childrenObjekt ohnehin bereits im Speicher ist.

Was mich wirft, ist das childNodesObjekt. Ich habe es verwendet, um ein Formular in einem Tabellenelement zu betrachten. Während childrenalle Formularelemente aufgelistet werden, childNodesscheint es auch Leerzeichen aus dem HTML-Code zu geben:

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

Beide protokollieren <TextNode textContent="\n ">

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

Alle protokollieren <input type="text"… >. Woher? Ich würde verstehen, dass ein Objekt es mir ermöglichen würde, mit dem „rohen“ HTML-Code zu arbeiten, während das andere beim DOM bleibt, aber das childNodesElement scheint auf beiden Ebenen zu funktionieren.

Um auf meine ursprüngliche Frage zurückzukommen, würde ich raten: Wenn ich das umfassendste Objekt haben möchte, childNodesist dies der richtige Weg, aber aufgrund seiner Vollständigkeit ist es möglicherweise nicht das vorhersehbarste, wenn es das gewünschte Element zurückgibt. zu jedem Zeitpunkt erwarten. Die browserübergreifende Unterstützung könnte sich in diesem Fall ebenfalls als Herausforderung erweisen, obwohl ich mich irren könnte.

Könnte jemand die Unterscheidung zwischen den vorliegenden Objekten klarstellen? Wenn es einen Geschwindigkeitsunterschied gibt, wie vernachlässigbar er auch sein mag, würde ich gerne wissen. Wenn ich das alles falsch sehe, kannst du mich gerne erziehen.

PS: Bitte, bitte, ich mag JavaScript, also ja, ich möchte mich mit so etwas befassen. Antworten wie „jQuery kümmert sich für Sie darum“ sind nicht das, wonach ich suche, daher neinjquery Etikett.

Klingt so, als würden Sie es überdenken. Sie haben den Unterschied zwischen childNodesund beobachtet children, der childNodesalle Knoten enthält, einschließlich Textknoten, die vollständig aus Leerzeichen bestehen, während childrenes sich nur um eine Sammlung der untergeordneten Knoten handelt, die Elemente sind. Das ist wirklich alles.

An beiden Sammlungen ist nichts Unvorhersehbares, obwohl einige Punkte zu beachten sind:

• IE <= 8 enthält keine Nur-Leerzeichen-Textknoten, childNodeswährend andere Browser dies tun
• IE <= 8 enthält Kommentarknoten, childrenwährend andere Browser nur Elemente enthalten

children, firstElementChildUnd Freunde sind nur Komfort, eine gefilterte Ansicht des DOM beschränkt auf nur Elemente präsentieren.

firstElementChild ist möglicherweise nicht in IE <9 verfügbar (nur firstChild)

on IE <9 firstChild ist das firstElementChild, da MS DOM (IE <9) keine leeren Textknoten speichert. Wenn Sie dies jedoch in anderen Browsern tun, werden leere Textknoten zurückgegeben ...

meine Lösung

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

Dies gibt das erste Kind sogar auf IE <9

Die Cross - Browser - Art und Weise zu tun ist , zu verwenden , childNodeszu erhalten NodeList, dann einen Array aller Knoten mit machen 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/

Dies ist besonders einfach, wenn Sie eine Dienstprogrammbibliothek wie lodash verwenden :

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

Zukunft:

Sie können querySelectorAllin Kombination mit einer :scopePseudoklasse verwenden (entspricht dem Element, das der Referenzpunkt des Selektors ist):

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

Zum Zeitpunkt des Schreibens :scopewird dies in Chrome, Firefox und Safari unterstützt.

Um die anderen Antworten zu ergänzen, gibt es hier immer noch bemerkenswerte Unterschiede, insbesondere beim Umgang mit <svg>Elementen.

Ich habe beides benutzt .childNodesund .childrenes vorgezogen, mit dem HTMLCollectionvom .childrenGetter gelieferten zu arbeiten .

Heute stieß ich jedoch auf Probleme mit IE / Edge-Fehlern bei der Verwendung .childrenauf einem <svg>. Während .childrenes im IE für grundlegende HTML-Elemente unterstützt wird, wird es für Dokumente / Dokumentfragmente oder SVG-Elemente nicht unterstützt .

Für mich war es möglich, einfach die benötigten Elemente über zu erfassen, .childNodes[n]da ich keine überflüssigen Textknoten habe, über die ich mir Sorgen machen muss. Möglicherweise können Sie dasselbe tun, aber wie oben an anderer Stelle erwähnt, vergessen Sie nicht, dass Sie möglicherweise auf unerwartete Elemente stoßen.

.childrenIch hoffe, dies ist hilfreich für jemanden, der sich am Kopf kratzt und versucht herauszufinden, warum es an anderer Stelle in seinem js im modernen IE funktioniert und bei Dokumenten- oder SVG-Elementen fehlschlägt.

Hey Leute, lasst euch nicht vom Leerraum täuschen. Testen Sie dies einfach in einem Konsolenbrowser. Verwenden Sie natives Javascript. Hier ist ein Beispiel mit zwei 'ul'-Mengen mit derselben Klasse. Sie müssen Ihre 'ul'-Liste nicht in einer Zeile haben, um Leerzeichen zu vermeiden. Verwenden Sie einfach Ihre Array-Anzahl, um über Leerzeichen zu springen.

Wie um Leerraum zu bekommen , querySelector()dann childNodes[]Geige Link js: 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>