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.

Konsep Utama:

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

Mengira nod kanak -kanak:

Pertimbangkan contoh HTML ini (digunakan sepanjang artikel):

<code class="language-html"><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></code>

untuk mengira elemen dalam <p> </p>: <ul></ul>

<code class="language-javascript">var myList = document.getElementById('myList');
console.log(myList.children.length); // 6
console.log(myList.childElementCount); // 6</code>

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

Memeriksa nod kanak -kanak:

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

<code class="language-javascript">console.log(myList.hasChildNodes()); // true</code>

walaupun

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

Menambah dan mengeluarkan unsur:

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

<code class="language-javascript">// ... (Assuming a containing div with id "container") ...
var myList = document.getElementById('myList');
document.getElementById('container').appendChild(myList);</code>

Mengeluarkan nod kanak -kanak.

menyediakan alternatif yang lebih ringkas (tidak disokong pada IE yang lebih tua). removeChild() ChildNode.remove()

Menggantikan Elements:

menggantikan satu anak dengan yang lain:

replaceChild()

Ini menggantikan

<code class="language-javascript">var myPar = document.getElementById('par'),
    myDiv = document.createElement('div');
myDiv.textContent = 'New element';
document.body.replaceChild(myDiv, myPar);</code>

dengan

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

mensasarkan kanak -kanak tertentu:

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

Menyuntik kandungan:

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!