manipulasi DOM
Sebelumnya, Anda telah melihat bahwa kerangka kerja JavaScript memudahkan untuk mendapatkan elemen tertentu menggunakan penyeleksi dan traversal DOM . Namun, untuk mengubah konten dan tampilan elemen tertentu pada halaman web, Anda perlu memanipulasi DOM dan menerapkan perubahannya. Menggunakan JavaScript murni akan memakan banyak pekerjaan, tapi untungnya sebagian besar kerangka kerja JavaScript menyediakan fungsi berguna yang membuat hal ini menjadi mudah.
Misalkan Anda mempunyai sebuah kotak dengan ID the-box.
<div id="the-box">Pesan dikirim ke sini</div>
Gunakan jQuery untuk mengubah teksnya menjadi "Pesan masuk ke sini", yang dapat dengan mudah digunakan seperti ini:
$('#the-box').html('Ini pesan baru!');
Sebenarnya Anda bisa menggunakan kode HTML dalam fungsi dan akan diurai oleh browser, misalnya:
$('#the-box').html('Ini adalah pesan <strong>baru</strong>!');
Dalam contoh ini, konten di dalam elemen DIV terlihat seperti ini:
<div id="the-box">Ini adalah pesan <strong>baru</strong>!'</div>
Tentu saja, dalam contoh ini Anda perlu menggunakan karakter khusus seperti lebih besar dari atau kurang dari, daripada menentukan kode entitas HTML khusus. Anda dapat menggunakan fungsi teks jQuery sebagai gantinya:
$('#kotak').text('300 >200');
Kode setelah memperbarui elemen div adalah sebagai berikut:
<div id="kotak-kotak">300 > 200</div>
Pada contoh di atas, konten yang sudah ada diganti dengan konten baru. Bagaimana jika Anda hanya ingin menambahkan beberapa informasi ke teks? Untungnya, jQuery menyediakan fungsi append untuk tujuan ini.
$('#kotak').append(', ini dia pesan');
Setelah melakukan operasi di atas pada div asli, konten dalam elemen div terlihat seperti ini:
<div id="the-box">Pesan masuk ke sini, ini pesan masuk</div>
Daripada menambahkan, Anda dapat menambahkan konten di awal, menyisipkannya sebelum konten yang ada, bukan setelahnya. Selain itu, jQuery menyediakan fungsi untuk menyisipkan konten ke dalam elemen tertentu, baik sebelum atau sesudahnya. Ada juga fungsi untuk mengganti konten, menghapus konten, menghapus elemen, mengkloning elemen, dan banyak lagi.
Selain fungsi manipulasi DOM, kerangka JavaScript biasanya berisi beberapa fungsi untuk memanipulasi gaya dan kelas elemen. Misalnya, Anda memiliki tabel yang menyorot sebuah baris ketika mouse melewatinya. Anda dapat membuat kelas khusus bernama hover yang dapat Anda tambahkan secara dinamis ke baris. Dengan menggunakan YUI, Anda dapat menggunakan kode berikut untuk menentukan apakah baris tersebut memiliki nama kelas hover. Jika ya, maka akan diabaikan.
if(baris.hasClass('hover')) baris.removeClass('hover'); else baris.addClass('hover');
Demikian pula, sebagian besar kerangka JavaScript memiliki fungsi bawaan untuk memanipulasi CSS.