Menguasai Manipulasi DOM dalam JavaScript Vanila: Mengapa Ia Masih Penting

Dalam dunia yang penuh dengan rangka kerja dan perpustakaan seperti React, Vue dan Angular, adalah mudah untuk mengabaikan kepentingan menguasai manipulasi DOM dalam JavaScript vanila. Tetapi memahami asas Model Objek Dokumen (DOM) dan cara bekerja dengannya secara langsung masih boleh menjadi sangat berharga. Dalam panduan ini, kami akan meneroka asas manipulasi DOM, kaedah utama dan sebab ia patut diketahui, walaupun dengan begitu banyak rangka kerja di sekelilingnya.

Pengenalan: Manipulasi DOM Seperti Menyusun Semula Perabot

Bayangkan halaman web anda ialah sebuah bilik, dan setiap elemen ialah perabot. Manipulasi DOM adalah seperti menyusun semula perabot itu—anda menukar susun atur secara langsung, mengalihkan sesuatu, menambah elemen baharu atau mengalih keluarnya. Menguasai perubahan ini adalah penting untuk memahami cara halaman web anda dibina dan dipaparkan kepada pengguna.

Frameworks boleh mengendalikan perubahan ini untuk anda, tetapi mengetahui cara memanipulasi DOM sendiri memberi anda lebih kawalan dan pemahaman yang lebih mendalam tentang cara perkara berfungsi di sebalik tabir.

Kaedah Biasa untuk Manipulasi DOM

getElementById, querySelector dan Lagi

JavaScript menawarkan pelbagai kaedah terbina dalam untuk berinteraksi dengan DOM. Mari lihat beberapa yang paling biasa digunakan dan lihat cara ia berfungsi.

1. getElementById

Cara paling mudah untuk memilih elemen dalam DOM ialah dengan IDnya. Kaedah ini mengembalikan elemen pertama dengan ID yang ditentukan.

const element = document.getElementById('myElement');
element.style.color = 'blue'; // Changes the text color to blue
element.textContent = 'Hello, world!'; // Updates the text content

2. querySelector dan querySelectorAll

Kaedah ini membolehkan anda memilih elemen menggunakan pemilih CSS. querySelector mengembalikan elemen pertama yang sepadan dengan pemilih, manakala querySelectorAll mengembalikan NodeList semua elemen yang sepadan.

const singleElement = document.querySelector('.myClass'); // Selects first element with myClass
singleElement.style.fontSize = '20px'; // Changes font size

const multipleElements = document.querySelectorAll('.myClass'); // Selects all elements with myClass
multipleElements.forEach(element => {
  element.style.backgroundColor = 'lightgray'; // Sets background color for each element
});

3. createElement, appendChild, dan insertBefore

Untuk menambah elemen baharu pada halaman, gunakan createElement untuk membuat elemen DOM baharu dan appendChild untuk menambahkannya pada elemen sedia ada. Anda juga boleh menggunakan insertBefore untuk menambah elemen pada kedudukan tertentu.

const newElement = document.createElement('p');
newElement.textContent = 'This is a new paragraph!';
document.body.appendChild(newElement); // Adds the new paragraph at the end of body

// Inserting an element before another
const container = document.getElementById('container');
const newDiv = document.createElement('div');
newDiv.textContent = 'Inserted before existing content';
container.insertBefore(newDiv, container.firstChild); // Inserts newDiv before the first child

4. keluarkanAnak dan keluarkan

Untuk mengalih keluar elemen, anda boleh menggunakan removeChild jika anda mempunyai rujukan kepada elemen induk atau menggunakan kaedah alih keluar terus pada elemen.

// Using removeChild
const parent = document.getElementById('parentElement');
const child = document.getElementById('childElement');
parent.removeChild(child); // Removes childElement from parentElement

// Using remove directly
const elementToRemove = document.getElementById('removeMe');
elementToRemove.remove(); // Removes the element directly

5. Mengubahsuai Atribut

Anda juga boleh memanipulasi atribut dengan kaedah seperti setAttribute, getAttribute dan removeAttribute.

const link = document.querySelector('a');
link.setAttribute('href', 'https://www.example.com'); // Sets the href attribute
link.setAttribute('target', '_blank'); // Opens link in a new tab
console.log(link.getAttribute('href')); // Retrieves the href attribute
link.removeAttribute('target'); // Removes the target attribute

6. Menukar Gaya Secara Terus

Untuk menukar gaya CSS elemen, anda boleh menggunakan sifat gaya.

const element = document.getElementById('myElement');
element.style.color = 'blue'; // Changes the text color to blue
element.textContent = 'Hello, world!'; // Updates the text content

7. Menambah Pendengar Acara

Pendengar acara menjadikan halaman anda interaktif dengan membenarkan elemen bertindak balas kepada tindakan pengguna.

const singleElement = document.querySelector('.myClass'); // Selects first element with myClass
singleElement.style.fontSize = '20px'; // Changes font size

const multipleElements = document.querySelectorAll('.myClass'); // Selects all elements with myClass
multipleElements.forEach(element => {
  element.style.backgroundColor = 'lightgray'; // Sets background color for each element
});

Bila Menggunakan Manipulasi DOM

Senario Praktikal Di Mana Manipulasi Vanila DOM Bersinar

Walaupun rangka kerja mengendalikan kebanyakan pengangkatan berat, ada kalanya manipulasi DOM vanila lebih mudah dan cekap:

• Projek Kecil: Untuk halaman mudah atau projek kecil, menggunakan JavaScript vanila selalunya lebih pantas dan lebih ringan daripada memuatkan keseluruhan rangka kerja.
• Pembelajaran dan Percubaan: Menguasai manipulasi DOM membantu anda memahami cara web berfungsi, memberikan anda asas untuk rangka kerja pembelajaran kemudian hari.
• Pengoptimuman Prestasi: Manipulasi DOM langsung kadangkala boleh menjadi lebih pantas daripada kemas kini dipacu rangka kerja, terutamanya untuk perubahan khusus sekali sahaja.

Contoh: Katakan anda mempunyai satu butang yang menunjukkan atau menyembunyikan beberapa teks. Untuk tugasan yang begitu mudah, JavaScript vanila adalah lebih cekap:

const newElement = document.createElement('p');
newElement.textContent = 'This is a new paragraph!';
document.body.appendChild(newElement); // Adds the new paragraph at the end of body

// Inserting an element before another
const container = document.getElementById('container');
const newDiv = document.createElement('div');
newDiv.textContent = 'Inserted before existing content';
container.insertBefore(newDiv, container.firstChild); // Inserts newDiv before the first child

Dengan rangka kerja, ini memerlukan penyediaan keadaan dan logik pemaparan semula, yang berlebihan untuk tugas kecil seperti ini.

Alternatif: React, Vue dan Mengapa Vanila Masih Ada Tempat

Rangka Kerja lwn. JavaScript Vanila

Rangka kerja seperti React, Vue dan Angular menjadikan manipulasi DOM lebih mudah dengan mengendalikan kemas kini dan menyatakan perubahan untuk anda. Mereka menggunakan DOM maya untuk mengurus proses dengan lebih cekap, mengemas kini hanya perkara yang perlu diubah.

Tetapi inilah perkaranya: rangka kerja disertakan dengan overhed. Jika anda membina projek kecil, berat tambahan itu mungkin tidak berbaloi. Selain itu, memahami manipulasi DOM vanila menjadikan anda pembangun yang lebih baik, walaupun anda bekerja terutamanya dengan rangka kerja. Mengetahui perkara yang berlaku di bawah hud membantu anda menyelesaikan masalah, mengoptimumkan dan membuat keputusan termaklum.

Contoh: Bayangkan anda ingin menambah petua alat pada elemen. Begini cara anda boleh melakukannya dengan JavaScript vanila:

// Using removeChild
const parent = document.getElementById('parentElement');
const child = document.getElementById('childElement');
parent.removeChild(child); // Removes childElement from parentElement

// Using remove directly
const elementToRemove = document.getElementById('removeMe');
elementToRemove.remove(); // Removes the element directly

Dengan JavaScript vanila, anda mendapat kawalan tepat ke atas kedudukan dan kelakuan petua alat tanpa sebarang kebergantungan rangka kerja.

Kesimpulan: Kembali Kepada Yang Asas untuk Kefahaman Yang Lebih Baik

Menguasai manipulasi DOM dalam JavaScript vanila adalah seperti mempelajari asas memasak sebelum menggunakan gajet mewah. Ia memberi anda asas yang kukuh, menjadikan anda lebih serba boleh dan membantu anda menghargai fungsi rangka kerja untuk anda. Walaupun rangka kerja memudahkan manipulasi DOM, mengetahui cara bekerja dengan DOM secara langsung boleh menjadi tidak ternilai untuk penyahpepijatan, pengoptimuman dan membina projek yang lebih kecil.

Jadi, lain kali anda tergoda untuk mendapatkan rangka kerja, cuba JavaScript vanila. Anda mungkin terkejut melihat betapa hebat dan ringkasnya.

---

Bersedia untuk menggunakan manipulasi DOM? Cuba teknik ini dalam projek anda yang seterusnya dan lihat sejauh mana yang anda boleh capai dengan hanya JavaScript vanila!

---

Jika anda menyukai artikel ini, pertimbangkan untuk menyokong kerja saya:

• Beli saya kopi
• Tempah panggilan untuk bimbingan atau nasihat kerjaya
• Ikuti saya di Twitter
• Sambung di LinkedIn

Atas ialah kandungan terperinci Menguasai Manipulasi DOM dalam JavaScript Vanila: Mengapa Ia Masih Penting. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!