Asas -asas manipulasi Dom di vanila JavaScript (tidak ada jQuery)

Artikel ini, sebahagian daripada Anthology moden JavaScript , meneroka keupayaan vanila JavaScript untuk manipulasi DOM, menunjukkan bahawa ia adalah alternatif yang mantap untuk jQuery. Akses antologi lengkap melalui SitePoint Premium.

Walaupun jQuery sering menjadi manipulasi DOM, vanila JavaScript menawarkan kaedah asli yang cekap. Artikel ini merangkumi tugas manipulasi DOM utama: menanyakan dan mengubahsuai DOM, mengurus kelas dan atribut, pengendalian acara, dan animasi. Akhirnya, kami akan membina Perpustakaan Dom Custom Ringan.

Takeaways utama:

vanila JavaScript menyediakan alat manipulasi DOM yang kuat, terutamanya relevan dengan sokongan IE yang berkurangan.
• dan .querySelector() menawarkan pemilihan elemen yang cekap; Yang pertama mengembalikan perlawanan pertama, sementara yang terakhir mengembalikan semua perlawanan sebagai nodel. .querySelectorAll()
Ubah suai kelas elemen dan atribut secara langsung menggunakan kaedah
• dan .classList, memahami implikasi prestasi memanipulasi atribut DOM versus HTML. .setAttribute()
Gunakan
• untuk pengendalian acara, membolehkan pelbagai pendengar pelbagai jenis pada satu elemen, menawarkan lebih banyak fleksibiliti daripada .addEventListener(). .onclick
Meningkatkan prestasi dan kejelasan kod dengan mewujudkan fungsi penolong atau libraries mini untuk mengendalikan tugas-tugas DOM yang berulang, mereplikasi kemudahan jQuery menggunakan JavaScript asli.

manipulasi dom: menanyakan dom

(Nota: Artikel ini memberikan gambaran keseluruhan peringkat tinggi Vanilla DOM API. Untuk butiran komprehensif, rujuk kepada Rangkaian Pemaju Mozilla.)

Gunakan

dengan pemilih CSS untuk menyasarkan elemen: .querySelector()

<code class="language-javascript">const myElement = document.querySelector('#foo > div.bar');</code>

Ini memilih elemen sepadan pertama.

memeriksa jika elemen sepadan dengan pemilih: .matches()

<code class="language-javascript">myElement.matches('div.bar') === true;</code>

mengambil semua elemen yang sepadan: .querySelectorAll()

<code class="language-javascript">const myElements = document.querySelectorAll('.bar');</code>

pertanyaan dalam elemen induk meningkatkan prestasi:

<code class="language-javascript">const myChildElement = myElement.querySelector('input[type="submit"]');</code>

Tidak seperti koleksi langsung dari kaedah seperti

, getElementsByTagName() mengembalikan nodelist statik, yang tidak mengemas kini secara dinamik. Ini memberi kesan kepada prestasi dan memerlukan lelaran eksplisit. .querySelectorAll()

Bekerja dengan nodelists

Mengembalikan nodel, bukan array. Tukar ke array untuk kaedah array standard: .querySelectorAll()

<code class="language-javascript">const myElement = document.querySelector('#foo > div.bar');</code>

sifat nodelist seperti children, firstElementChild, nextElementSibling, dan lain -lain, memberikan akses mudah kepada nod yang berkaitan. Ingat bahawa childNodes termasuk semua jenis nod, bukan hanya elemen. Gunakan nodeType atau instanceof untuk memeriksa jenis nod.

Mengubah Kelas dan Atribut

menggunakan .classList kaedah untuk manipulasi kelas yang cekap:

<code class="language-javascript">myElement.matches('div.bar') === true;</code>

mengakses dan mengubah suai sifat elemen secara langsung:

<code class="language-javascript">const myElements = document.querySelectorAll('.bar');</code>

.getAttribute(), .setAttribute(), dan .removeAttribute() secara langsung mengubah suai atribut HTML, mencetuskan redraws penyemak imbas. Gunakan ini dengan berhati -hati, terutamanya untuk atribut yang tidak mempunyai setara harta DOM atau apabila berterusan perubahan merentasi operasi seperti pengklonan.

Menambah gaya CSS

Gunakan gaya menggunakan nama harta bersatu unta:

<code class="language-javascript">const myChildElement = myElement.querySelector('input[type="submit"]');</code>

.window.getComputedStyle() mengambil nilai gaya yang dikira:

<code class="language-javascript">Array.from(myElements).forEach(doSomethingWithEachElement);</code>

Mengubah dom

Gunakan appendChild(), insertBefore(), dan removeChild() untuk manipulasi elemen. cloneNode() mencipta salinan; Gunakan hujah Boolean untuk pengklonan yang mendalam. Buat elemen baru dengan createElement() dan teks nod dengan createTextNode().

Properties Element: InnerHTML dan TextContent

.innerHTML dan .textContent menguruskan HTML dan kandungan teks biasa, masing -masing. Mengubahsuai .innerHTML menggantikan kandungan sepenuhnya; Memperolehi menggunakan .innerHTML = kurang efisien daripada memupuk nod individu. Gunakan DocumentFragment untuk mengoptimumkan pelbagai tambahan.

Mendengarkan peristiwa

lebih suka .addEventListener() secara langsung menyerahkan kepada sifat peristiwa (mis., onclick) Untuk fleksibiliti dan pendengar berganda. Gunakan event.target untuk mengakses elemen yang dicetuskan. .preventDefault() menghalang tindakan lalai; .stopPropagation() berhenti peristiwa menggelegak. Hujah ketiga pilihan untuk addEventListener() menyediakan pilihan konfigurasi (capture, once, passive). Delegasi acara meningkatkan kecekapan dan mengendalikan elemen ditambah secara dinamik.

animasi

Gunakan requestAnimationFrame() untuk animasi yang lancar, mengelakkan susun atur susun atur.

Menulis kaedah penolong anda sendiri

Buat fungsi penolong tersuai untuk menyelaraskan manipulasi DOM, mencerminkan kemudahan JQuery. Contoh ini menunjukkan fungsi asas $ Custom:

<code class="language-javascript">myElement.classList.add('foo');
myElement.classList.remove('bar');
myElement.classList.toggle('baz');</code>

Ini membolehkan lebih banyak kod ringkas sambil mengekalkan manfaat vanila javascript.

Kesimpulan

Vanilla JavaScript menawarkan keupayaan manipulasi DOM yang mantap, sering menghapuskan keperluan untuk perpustakaan luaran. Walaupun sesetengah aspek mungkin memerlukan lebih banyak kod verbose daripada jQuery, mewujudkan fungsi penolong tersuai boleh merapatkan jurang ini, membolehkan manipulasi DOM yang cekap dan bersih. Pilihan bergantung kepada keperluan projek dan keutamaan pemaju.

(bahagian Soalan Lazim yang ditinggalkan untuk keringkasan, tetapi maklumat yang diberikan dalam input sudah dilindungi di atas.)

Atas ialah kandungan terperinci Asas -asas manipulasi Dom di vanila JavaScript (tidak ada jQuery). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!