Petua dan Teknik DOM: Ibu Bapa, Anak, dan Saudara

Aplikasi web moden sering melibatkan HTML yang kaya, markup. Perpustakaan seperti JQuery memudahkan manipulasi DOM, menawarkan keserasian penyemak imbas dan pelbagai ciri. Walau bagaimanapun, API DOM asli meningkat dengan ketara berbanding beberapa tahun yang lalu, menjadikannya alternatif yang berdaya maju dalam banyak kes. Artikel ini meneroka ciri -ciri utama DOM untuk memanipulasi HTML, memberi tumpuan kepada hubungan ibu bapa, anak, dan saudara kandung. Walaupun jQuery kekal sebagai pilihan yang popular kerana ketidakkonsistenan sejarah, memahami kaedah DOM asli adalah penting untuk pembangunan yang cekap.

<p> Konsep Utama:

<ul> dengan cekap mengira unsur-unsur kanak-kanak menggunakan sifat

dan children, mengelakkan kemasukan nod bukan elemen (sebagai childElementCount mungkin). childNodes.length

Gunakan

untuk memeriksa mana -mana nod kanak -kanak, termasuk Whitespace (jenis nod yang sah). hasChildNodes()

tambah atau reposisi elemen dengan

dan keluarkannya menggunakan appendChild() atau removeChild(). ChildNode.remove()

dengan lancar menggantikan unsur -unsur kanak -kanak menggunakan

, membolehkan elemen bertukar dan menetapkan semula. replaceChild()

sasaran kanak -kanak khusus dengan

, firstElementChild, lastElementChild, dan nextElementSibling untuk manipulasi DOM yang tepat. previousElementSibling

<p> Mengira nod kanak -kanak:

Pertimbangkan contoh HTML ini (digunakan sepanjang artikel):

<ul id="myList">
  <li>Example one</li>
  <li>Example two</li>
  <li>Example three</li>
  <li>Example four</li>
  <li>Example five</li>
  <li>Example six</li>
</ul>

untuk mengira elemen dalam <p> : <ul>

var myList = document.getElementById('myList');
console.log(myList.children.length); // 6
console.log(myList.childElementCount); // 6

<p> dan children.length menghasilkan hasil yang sama (6). childElementCount sering disukai untuk kejelasannya. Menggunakan childElementCount akan mengembalikan nombor yang lebih tinggi, kerana ia termasuk semua jenis nod, termasuk ruang putih. childNodes.length

<p> Memeriksa nod kanak -kanak:

<p> mengembalikan boolean yang menunjukkan kehadiran nod kanak -kanak: hasChildNodes()

console.log(myList.hasChildNodes()); // true

walaupun <p> kosong dengan ruang putih akan kembali <ul>. Hanya true (tidak ada ruang kosong) yang benar -benar kosong) akan kembali <ul>. false

<p> Menambah dan mengeluarkan unsur:

Menambah baru atau bergerak elemen sedia ada. Sebagai contoh, menggerakkan <p> : appendChild() <ul>

// ... (Assuming a containing div with id "container") ...
var myList = document.getElementById('myList');
document.getElementById('container').appendChild(myList);

Mengeluarkan nod kanak -kanak. <p> menyediakan alternatif yang lebih ringkas (tidak disokong pada IE yang lebih tua). removeChild() ChildNode.remove()

Menggantikan Elements: <p>

menggantikan satu anak dengan yang lain:

replaceChild()

Ini menggantikan

var myPar = document.getElementById('par'),
    myDiv = document.createElement('div');
myDiv.textContent = 'New element';
document.body.replaceChild(myDiv, myPar);

dengan <p> yang baru. <p id="par"></p>

mensasarkan kanak -kanak tertentu:

firstElementChild, lastElementChild, nextElementSibling, dan previousElementSibling membenarkan penargetan tepat kanak -kanak tertentu.

Menyuntik kandungan:

<p> Masukkan elemen sebelum adik yang ditentukan. insertBefore() menawarkan kawalan yang lebih tepat ke atas titik sisipan (, insertAdjacentHTML(), beforebegin, ). afterbegin beforeend afterend Sokongan penyemak imbas:

Kebanyakan kaedah mempunyai sokongan penyemak imbas yang sangat baik, termasuk versi IE yang lebih tua. tidak mempunyai sokongan pada lebih tua iaitu.

ChildNode.remove() Kesimpulan:

Walaupun JQuery memudahkan manipulasi DOM, memahami API DOM asli adalah penting untuk pembangunan web yang cekap dan moden. Ujian menyeluruh adalah penting untuk mengambil kira ketidakkonsistenan penyemak imbas yang berpotensi.

Atas ialah kandungan terperinci Petua dan Teknik DOM: Ibu Bapa, Anak, dan Saudara. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!