Zastanawiałem się, czy JavaScript oferuje wiele metod, aby uzyskać pierwszy element potomny z dowolnego elementu, ale który jest najlepszy? Mam na myśli: najbardziej kompatybilny z wieloma przeglądarkami, najszybszy, najbardziej wszechstronny i przewidywalny, jeśli chodzi o zachowanie. Lista metod / właściwości, których używam jako aliasów:

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

Działa to w obu przypadkach:

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

Tak jest w przypadku formularzy lub<div> iteracja. Jeśli mogę napotkać elementy tekstowe:

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

O ile mogę to wypracować,firstChild używa listy węzłów zchildNodes, ifirstElementChild używachildren. Opieram to założenie na referencji MDN:

childNode jest odwołaniem do pierwszego elementu potomnego węzła elementu lubnull jeśli nie ma.

Zgaduję, że jeśli chodzi o szybkość, różnica, jeśli w ogóle, będzie prawie zerowa, ponieważfirstElementChild jest w rzeczywistości odniesieniem dochildren[0]ichildren obiekt i tak jest już w pamięci.

To, co mnie rzuca, tochildNodes obiekt. Użyłem go, aby przyjrzeć się formie w elemencie tabeli. Podczaschildren wyświetla wszystkie elementy formularza,childNodes wydaje się również zawierać białe znaki z kodu HTML:

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

Oba dzienniki<TextNode textContent="\n ">

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

Wszystkie dzienniki<input type="text"…>. Dlaczego? Rozumiem, że jeden obiekt pozwoliłby mi pracować z „surowym” kodem HTML, podczas gdy drugi trzyma się DOM, alechildNodes element wydaje się działać na obu poziomach.

Aby wrócić do mojego początkowego pytania, zgaduję, że jeśli chcę najbardziej wszechstronnego obiektu,childNodes jest droga, ale ze względu na jej wszechstronność, może nie być najbardziej przewidywalna pod względem zwrotu elementu, który chcę / oczekuję w danym momencie. Obsługa wielu przeglądarek może również okazać się wyzwaniem w tym przypadku, chociaż mogę się mylić.

Czy ktoś mógłby wyjaśnić różnicę między przedmiotami? Jeśli istnieje różnica prędkości, choćby nieistotna, chciałbym również wiedzieć. Jeśli widzę to wszystko źle, nie krępuj się mnie edukować.

PS: Proszę, proszę, lubię JavaScript, więc tak, chcę zajmować się tego rodzaju sprawami. Odpowiedzi takie jak „jQuery zajmuje się tym dla ciebie” nie są tym, czego szukam, stąd niejquery etykietka.