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

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

Dies funktioniert in beiden Fällen:

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

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

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

So weit ich kann,firstChild Verwendet die NodeList vonchildNodes, undfirstElementChild Verwendetchildren. Ich stütze diese Annahme auf die MDN-Referenz:

childNode ist ein Verweis auf das erste untergeordnete Element des Elementknotens odernull wenn es keinen gibt.

Ich vermute, dass der Unterschied, wenn überhaupt, in Bezug auf die Geschwindigkeit so gut wie nichts sein wirdfirstElementChild ist effektiv ein Verweis aufchildren[0], und daschildren Objekt ist sowieso schon im Speicher.

Was mich wirft, ist daschildNodes Objekt. Ich habe es verwendet, um ein Formular in einem Tabellenelement zu betrachten. Währendchildren listet alle Formularelemente auf,childNodes scheint auch Leerzeichen aus dem HTML-Code zu enthalten:

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

Beide protokollieren<TextNode textContent="\n ">

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

Alle protokollieren<input type="text"…>. Woher? Ich verstehe, dass ein Objekt es mir ermöglichen würde, mit dem "rohen" HTML-Code zu arbeiten, während das andere am DOM festhält, das andere jedochchildNodes Element scheint auf beiden Ebenen zu funktionieren.

Um auf meine ursprüngliche Frage zurückzukommen, lautet meine Vermutung: Wenn ich das umfassendste Objekt haben möchte,childNodes Dies ist der richtige Weg, aber aufgrund seiner Vollständigkeit ist es möglicherweise nicht der vorhersehbarste, wenn es darum geht, das Element wiederzugeben, das ich zu einem bestimmten Zeitpunkt möchte / erwarte. 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 Gegenständen klarstellen? Wenn es einen Geschwindigkeitsunterschied gibt, der jedoch vernachlässigbar ist, würde ich gerne auch wissen. Wenn ich das alles falsch sehe, kannst du mich gerne aufklären.

PS: Bitte, bitte, ich mag JavaScript, also ja, ich möchte mit so etwas umgehen. Antworten wie "jQuery kümmert sich darum" sind nicht das, wonach ich suche, daher neinjquery Etikett.