Penjelasan DOM Manipulation

Referensi

 

Penjelasan DOM Manipulation

Hal paling umum yang kalian perlukan sebagai pengembang web, adalah sarana untuk memanipulasi struktur dokumen dengan cara tertentu tanpa banyak kesulitan. Untuk tujuan ini, kita menggunakan DOM. Document Object Model atau disingkat DOM adalah sebuah interface yang memungkinkan kalian untuk memanipulasi halaman web secara dinamis tanpa harus memuat ulang halaman tersebut. Misalnya, dengan DOM JavaScript, kalian dapat menambahkan atau menghapus elemen dari halaman web, mengubah nilai atribut, dan memperbarui konten teks di dalam halaman web. DOM sendiri tidak hanya ada di Javascript saja, namun bisa juga kalian temukan di bahasa pemrograman lain.

 

DOM JavaScript terdiri dari tiga bagian utama, yaitu:

1. Dokumen: Ini adalah representasi dari halaman web yang sedang dibuka dalam browser. Dokumen memiliki elemen, atribut, dan teks yang membentuk struktur halaman web.
2. Objek: Setiap elemen, atribut, dan teks di dalam dokumen direpresentasikan sebagai objek dalam DOM JavaScript. Objek-objek ini dapat dimanipulasi dan dimodifikasi menggunakan JavaScript.
3. Node: Setiap elemen, atribut, dan teks dalam dokumen juga direpresentasikan sebagai node dalam DOM JavaScript. Setiap node memiliki properti dan metode yang dapat diakses dan dimanipulasi melalui JavaScript.

 

DOM Javascript memiliki point-point yang penting yaitu:

1. Element manipulation

Element manipulation adalah proses memodifikasi elemen HTML yang terdapat dalam dokumen web secara dinamis menggunakan JavaScript.

 

Dalam element manipulation, JavaScript dapat digunakan untuk menambahkan, menghapus, atau mengubah elemen dan atribut HTML pada halaman web, serta mengubah nilai dari elemen input seperti input teks, checkbox, radio, dan sebagainya.

 

Beberapa contoh teknik element manipulation pada DOM meliputi:

a.      Mengubah isi teks dari sebuah elemen HTML menggunakan metode innerHTML atau textContent.

b.      Menambahkan atau menghapus elemen HTML menggunakan metode createElement, appendChild, insertBefore, atau removeChild.

c.       Mengubah atribut dari sebuah elemen HTML menggunakan metode getAttribute, setAttribute, atau removeAttribute.

d.      Mengubah gaya atau tampilan dari sebuah elemen HTML menggunakan metode style.

 

 

Pada program diatas, kita dapat memasukkan program JavaScript di body pada struktur HTML. Untuk source bisa kita namain dengan nama file yang sudah disimpan. Program main.js berisi perintah untuk mengubah isi pada title dan body pada HTML. Document.title = Latihan DOM adalah perintah untuk memberi judul halaman web dengan nama Latihan DOM. Sedangkan body.append(Hello World) adalah perintah untuk menampilkan Hello World pada halaman web.

Pada program javascript diatas, kita dapat membuat perintah untuk menambahkan elemen HTML dengan berisi teks menggunakan createElement dengan metode innerHTML, innerText, dan textContent. Perbedaan dari ketiga metode tersebut adalah:

Properti	Konten	Menampilkan Tag HTML	Menampilkan Teks
innerHTML	Konten HTML dari sebuah elemen	Ya	Ya
innerText	Teks dari sebuah elemen, mengabaikan tag HTML	Tidak	Ya
textContent	Teks dari sebuah elemen, mengabaikan tag HTML	Tidak	Ya

 

innerHTML menampilkan konten HTML dari sebuah elemen, termasuk tag HTML yang terdapat di dalamnya. Sedangkan innerText dan textContent hanya menampilkan teks dari sebuah elemen, tanpa menampilkan tag HTML yang terdapat di dalamnya. Perbedaan antara innerText dan textContent adalah bahwa innerText akan mengabaikan elemen yang tersembunyi dengan CSS, sedangkan textContent akan menampilkan semua teks yang terdapat pada sebuah elemen, termasuk yang tersembunyi dengan CSS.

2. Data selector

No.	Method	Keterangan
1	getElementById(<id>)	Mengembalikan object yang merepresentasikan elemen yang ditangkap dan properti id-nya cocok dengan tag HTML yang dituju.
2	getElementsByClassName(<names>)	Mengembalikan HTMLCollection dari seluruh elemen yang memiliki class name sesuai.
3	getElementByTagsName(<name>)	Mengembalikan HTMLCollection of object dari seluruh elemen dengan nama elemen (tag element) yang sesuai.
4	querySelector(<query_selector>)	Mengembalikan elemen pertama di dalam dokumen yang cocok dengan selector spesifik. Jika tidak, akan mengembalikan nilai null.
5	querySelectorAll(<query_selector>)	Mengembalikan kumpulan node (NodeList) di dalam dokumen sesuai dengan selector yang spesifik.

 

Pada program diatas, kita menggunakan getElementById dan querySelector untuk memilih elemen HTML. Perbedaan dalam menggunakan kedua metode tersebut pengambilan elemennya. Jika getElementById hanya dapat mengambil satu argumen saja, yaitu ID dari elemen yang ingin dipilih, dan dipanggil pada objek document. Contohnya: document.getElementById("btn1"). Sebaliknya, querySelector mengambil sebuah selector CSS sebagai argumen, yang dapat cocok dengan elemen apa saja pada halaman, dan dapat dipanggil pada elemen mana saja atau objek document. Contohnya: document.querySelector(".btn2").

3. JavaScript Styling

JavaScript styling pada DOM manipulation adalah teknik untuk mengubah gaya atau tampilan elemen HTML melalui manipulasi DOM menggunakan JavaScript. Dengan teknik ini, kita dapat mengubah properti CSS pada elemen HTML secara dinamis berdasarkan kondisi tertentu atau interaksi pengguna pada halaman web.

 

Pada program javascript diatas, kita bisa mengubah gaya pada tampilan web menggunakan properti style pada elemen btn1 untuk mengubah border, padding, fontsize, dan background.

4. Event

Event pada DOM adalah tindakan yang terjadi pada sebuah elemen HTML di halaman web, seperti klik mouse, pergerakan mouse, pengisian formulir, atau pemutaran video. Ketika event terjadi pada sebuah elemen HTML, JavaScript dapat menangkap event tersebut dan menjalankan kode yang terkait dengan event tersebut.

Pada program diatas, kita bisa menambahkan event pada HTML menggunakan onclick=clickSaya(). Metode ini sama saja seperti saat kita memprogram di JavaScript yaitu dengan menambahkan addEventListener. Saat Klik Saya mendapatkan trigger dari pengguna, maka HTML akan mencari function yang terdapat di main.js yaitu merubah background dari Klik Saya menjadi warna tomato.

Pada program diatas kita bisa menambahkan mouse event menggunakan onmouseover dan onmouseout untuk membuat saat mouse diarahkan pada elemen HTML maka function ubahText( text ) yang ada di main.js akan berjalan yaitu merubah isi dari elemen btn2.textContent menjadi string text.

 

Tugas: Buatlah tampilan web menggunakan DOM Manipulation, saat cursor diarahkan pada button warna button akan berganti dan saat cursor diarahkan keluar warna kembali seperti semua. Saat button diklik akan memunculkan sebuah elemen p bertuliskan Halo apa kabar, <nama kalian>.

 

 

 

 

 

 

Referensi

Apa itu DOM? Pengertian, Fungsi, dan Cara Menggunakannya (Lengkap) (makinrajin.com)