Cara terbaik untuk mendapatkan simpul anak

Saya bertanya-tanya, JavaScript menawarkan berbagai metode untuk mendapatkan elemen anak pertama dari elemen apa pun, tetapi mana yang terbaik? Maksud saya, sebagian besar browser yang kompatibel, tercepat, terlengkap, dan dapat diprediksi dalam hal perilaku. Daftar metode / properti yang saya gunakan sebagai alias:

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

Ini berfungsi untuk kedua kasus:

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

Itu dalam hal bentuk, atau <div>iterasi. Jika saya mungkin menemukan elemen teks:

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

Sejauh yang saya bisa, firstChildgunakan NodeList dari childNodes, dan firstElementChildgunakan children. Saya mendasarkan asumsi ini pada referensi MDN:

childNodeadalah referensi ke elemen anak pertama dari simpul elemen, atau nulljika tidak ada.

Saya menduga bahwa, dalam hal kecepatan, perbedaannya, jika ada, akan hampir tidak ada, karena firstElementChildsecara efektif referensi children[0], dan childrenobjek sudah ada dalam memori pula.

Apa yang melemparku, adalah childNodesobjeknya. Saya telah menggunakannya untuk melihat formulir, di elemen tabel. Sementara childrendaftar semua elemen bentuk, childNodesjuga tampaknya termasuk spasi dari kode HTML:

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

Keduanya log <TextNode textContent="\n ">

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

Semua log <input type="text"... >. Bagaimana bisa? Saya mengerti bahwa satu objek akan memungkinkan saya untuk bekerja dengan kode HTML "mentah", sementara yang lain menempel pada DOM, tetapi childNodeselemen tampaknya bekerja di kedua level.

Untuk kembali ke pertanyaan awal saya, tebakan saya adalah: jika saya ingin objek yang paling komprehensif, childNodesadalah cara untuk pergi, tetapi karena kelengkapannya, itu mungkin bukan yang paling dapat diprediksi dalam hal mengembalikan elemen yang saya inginkan / harapkan pada saat tertentu. Dukungan lintas-browser mungkin juga terbukti menjadi tantangan dalam kasus itu, meskipun saya bisa saja salah.

Adakah yang bisa menjelaskan perbedaan antara benda-benda yang ada? Jika ada perbedaan kecepatan, betapapun bisa diabaikan, saya juga ingin tahu. Jika saya melihat ini semua salah, jangan ragu untuk mendidik saya.

PS: Tolong, saya suka JavaScript, jadi ya, saya mau berurusan dengan hal semacam ini. Jawaban seperti "penawaran jQuery dengan ini untuk Anda" bukan yang saya cari, karenanya tidakjquery menandai.

Sepertinya Anda terlalu memikirkannya. Anda telah mengamati perbedaan antara childNodesdan children, yang childNodesberisi semua simpul, termasuk simpul teks yang seluruhnya terdiri dari spasi, sedangkan childrenkumpulan hanya simpul anak yang merupakan elemen. Hanya itu yang ada di sana.

Tidak ada yang tak terduga tentang koleksi mana pun, meskipun ada beberapa masalah yang harus diperhatikan:

• IE <= 8 tidak menyertakan simpul teks khusus spasi putih di dalamnya childNodessementara browser lain melakukannya
• IE <= 8 termasuk node komentar di dalam childrensementara browser lain hanya memiliki elemen

children, firstElementChilddan teman hanyalah kenyamanan, menghadirkan tampilan DOM yang disaring terbatas pada elemen adil.

firstElementChild mungkin tidak tersedia di IE <9 (hanya firstChild)

pada IE <9 firstChild adalah firstElementChild karena MS DOM (IE <9) tidak menyimpan node teks kosong. Tetapi jika Anda melakukannya di browser lain, mereka akan mengembalikan node teks kosong ...

solusi saya

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

ini akan memberikan anak pertama bahkan pada IE <9

Cara lintas browser yang harus dilakukan adalah menggunakan childNodesuntuk mendapatkan NodeList, lalu membuat array semua node dengan 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/

Ini sangat mudah jika Anda menggunakan perpustakaan utilitas seperti lodash :

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

Masa depan:

Anda dapat menggunakan querySelectorAlldalam kombinasi dengan :scopepseudo-class (cocok dengan elemen yang merupakan titik referensi pemilih):

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

Pada saat penulisan ini :scopedidukung di Chrome, Firefox dan Safari.

Hanya untuk menambah jawaban lain, masih ada perbedaan yang patut diperhatikan di sini, khususnya ketika berhadapan dengan <svg>elemen.

Saya telah menggunakan keduanya .childNodesdan .childrenlebih suka bekerja dengan yang HTMLCollectiondisampaikan oleh .childrenpengambil.

Namun hari ini, saya mengalami masalah dengan IE / Edge gagal saat digunakan .childrenpada Windows Vista <svg>. Meskipun .childrendidukung di IE pada elemen HTML dasar, itu tidak didukung pada dokumen / fragmen dokumen, atau elemen SVG .

Bagi saya, saya dapat dengan mudah mengambil elemen yang dibutuhkan melalui .childNodes[n]karena saya tidak memiliki simpul teks yang asing untuk dikhawatirkan. Anda mungkin dapat melakukan hal yang sama, tetapi seperti yang disebutkan di tempat lain di atas, jangan lupa bahwa Anda mungkin mengalami elemen yang tidak terduga.

Semoga ini bisa membantu seseorang menggaruk-garuk kepala mencoba mencari tahu mengapa .childrenbekerja di tempat lain di js mereka pada IE modern dan gagal pada dokumen atau elemen SVG.

Hei teman-teman jangan biarkan ruang putih menipu Anda. coba saja ini di browser konsol. gunakan javascript asli. Berikut adalah dan contoh dengan dua set 'ul' dengan kelas yang sama. Anda tidak perlu memiliki daftar 'ul' Anda semua dalam satu baris untuk menghindari ruang putih cukup gunakan jumlah array Anda untuk melompati ruang putih.

Cara mendapatkan ruang di sekitar putih dengan querySelector()kemudian childNodes[]js Link biola: 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>