Pengenalan Javascript DOM (Document Object Model) dan Fungsinya

Pernahkah kamu bertanya-tanya bagaimana sebuah browser mampu menampilkan situs web dengan elemen-elemen interaktif? Inilah peran penting dari JavaScript DOM! Dengan memanfaatkan DOM, kamu dapat mengubah tata letak, menambahkan CSS, atau bahkan menghapus elemen hanya dengan beberapa baris script.

Artikel ini akan membahas secara lengkap cara kerja DOM dan bagaimana kamu dapat menguasainya melalui tutorial sederhana. Bersiaplah untuk menghidupkan situs web dengan kekuatan DOM!

Baca Juga: JavaScript : Sejarah , Fungsi hingga Kelebihan dan Kekurangannya

Apa Itu DOM? (Pengertian DOM)  

DOM (Document Object Model) adalah API (Application Programming Interface) untuk dokumen HTML yang memetakan setiap elemen dalam halaman menjadi objek yang dapat diakses dan dimodifikasi oleh JavaScript.

DOM berfungsi sebagai penghubung antara bahasa pemrograman JavaScript dengan elemen-elemen statis seperti tag, style, dan atribut HTML. Dengan demikian, DOM memungkinkan perubahan dinamis pada halaman web, menjadikannya lebih interaktif dan responsif terhadap interaksi pengguna.

Fungsi utama DOM dalam JavaScript sangat beragam, antara lain dalam mengakses dan memanipulasi elemen-elemen HTML.  Selain itu, DOM memungkinkan JavaScript untuk mengontrol gaya (style) halaman secara langsung, seperti mengganti warna atau ukuran elemen.

Tidak hanya itu, DOM juga berperan penting dalam menangani event pengguna, seperti klik tombol atau pengisian formulir, untuk merespons interaksi tersebut secara real-time. 

Bagaimana DOM Bekerja dalam JavaScript? 

DOM (Document Object Model) memungkinkan kita untuk mengakses dan memodifikasi elemen HTML di halaman web dengan cara yang fleksibel dan dinamis.

Dengan DOM, kamu dapat berinteraksi langsung dengan elemen seperti tag, gambar (img), dan teks yang ada dalam halaman web. DOM menyediakan berbagai metode dan properti yang memungkinkan manipulasi elemen-elemen ini, menjadikan halaman web lebih interaktif.

Melalui DOM, JavaScript dapat mengakses dokumen dan memodifikasinya dengan berbagai cara, seperti menambah, mengubah, atau menghapus elemen-elemen HTML, serta mengubah atribut dan gaya. 

Untuk mengakses elemen HTML, kamu bisa menggunakan beberapa metode DOM, di antaranya:

• document.getElementById(): Mengambil elemen berdasarkan ID-nya. Misalnya, var elemen = document.getElementById(“id-elemen”);.
• document.getElementsByTagName(): Mengambil semua elemen berdasarkan nama tag-nya. Ini berguna untuk mengambil elemen img atau div.
• document.getElementsByClassName(): Mengambil elemen berdasarkan nama kelasnya. Misalnya, jika kamu ingin mengambil elemen dengan kelas “contoh”, kamu bisa menggunakan metode ini.
• document.querySelector(): Mengembalikan elemen pertama yang cocok dengan CSS Selector. Kamu bisa menggunakan ID, kelas, atau tag sebagai selector.
• document.querySelectorAll(): Mengembalikan semua elemen yang cocok dengan CSS Selector yang ditentukan.

Fungsi DOM dalam JavaScript

Berikut adalah beberapa cara bagaimana DOM bekerja dalam JavaScript untuk memanipulasi elemen-elemen tersebut.

Mengambil Elemen HTML

Untuk berinteraksi dengan elemen-elemen HTML, kamu perlu mengambilnya terlebih dahulu. DOM menyediakan berbagai metode untuk ini:

• getElementById(): Metode ini digunakan untuk mengambil elemen berdasarkan ID-nya. ID harus unik di dalam dokumen.
  
  let judul = document.getElementById(“judul-utama”);
  
• querySelector(): Mengambil elemen pertama yang sesuai dengan CSS selector yang diberikan.
  
  let paragrafPertama = document.querySelector(“p.intro”);
• querySelectorAll(): Mengambil semua elemen yang cocok dengan CSS selector. Ini mengembalikan NodeList.
  
  
  let semuaParagrafIntro = document.querySelectorAll(“p.intro”);
  

Mengubah Elemen HTML

Setelah kamu berhasil mengambil elemen, DOM memungkinkan kamu untuk mengubahnya sesuai kebutuhan:

• Mengubah Teks: Untuk mengganti teks dalam elemen HTML, kamu bisa menggunakan properti innerHTML. 
  
  let elemenParagraf = document.getElementById(“paragraf-contoh”); elemenParagraf.innerHTML = “Ini adalah teks baru.”;
  
  
• Mengubah Atribut: Kamu bisa memodifikasi atribut elemen, seperti mengubah sumber gambar menggunakan src. 
  
  let gambar = document.querySelector(“img”); gambar.src = “gambar-baru.jpg”;
  
  
• Mengubah Style: Untuk mengubah tampilan elemen, kamu bisa mengakses properti style.
  
  let judul = document.getElementById(“judul-utama”); judul.style.color = “blue”;

Menambah dan Menghapus Elemen HTML

DOM juga memungkinkan kamu untuk menambah dan menghapus elemen-elemen HTML dari halaman:

• createElement(): Digunakan untuk membuat elemen baru.
  let elemenParagrafBaru = document.createElement(“p”);
  
• appendChild(): Menambahkan elemen baru sebagai anak dari elemen lainnya.
  
  let elemenList = document.getElementById(“daftar-item”); let elemenItemBaru = document.createElement(“li”); elemenList.appendChild(elemenItemBaru);
  
• removeChild(): Menghapus elemen anak dari elemen induk.
  let elemenList = document.getElementById(“daftar-item”); let elemenItemPertama = elemenList.firstElementChild; elemenList.removeChild(elemenItemPertama);
  
  

Menggunakan Event Handlers di DOM

Event handler bekerja dengan cara “mendengarkan” event yang dipicu saat pengguna berinteraksi dengan elemen di halaman. Ketika event terjadi, seperti tombol diklik, DOM akan memicu event handler yang telah ditetapkan.

Dengan demikian, kamu bisa mengubah elemen halaman atau merespons tindakan pengguna secara langsung menggunakan JavaScript. 

Untuk memberi gambaran yang lebih jelas, berikut contoh penggunaan event handler yang menambah item baru ke dalam daftar ketika tombol diklik:

<!DOCTYPE html> <html> <head> <title>Contoh Event Handlers</title> </head> <body> <h1>Daftar Item</h1> <ul id=”daftarItem”> </ul> <button id=”tambahItem”>Tambah Item</button> <script> let tombolTambah = document.getElementById(“tambahItem”); let daftarItem = document.getElementById(“daftarItem”); tombolTambah.addEventListener(“click”, function() { let itemBaru = document.createElement(“li”); itemBaru.textContent = “Item Baru”; daftarItem.appendChild(itemBaru); }); </script> </body> </html>

Pada contoh ini, ketika tombol “Tambah Item” diklik, event handler akan menambahkan elemen li baru ke dalam daftar.

Contoh Penggunaan DOM di JavaScript

Menyediakan beberapa contoh kode untuk menunjukkan bagaimana cara menggunakan DOM untuk:

• Mengambil elemen dan mengubah kontennya (misalnya mengubah teks pada elemen).
• Menambah dan menghapus elemen dari halaman secara dinamis.
• Menangani event menggunakan event handlers (misalnya menangani klik tombol untuk mengubah warna latar belakang halaman).

QuerySelector vs QuerySelectorAll

Metode querySelector mengembalikan elemen pertama yang cocok dengan CSS Selector yang diberikan. Ini sangat berguna jika kamu hanya ingin memilih satu elemen yang memenuhi kriteria tertentu. Jika tidak ada elemen yang sesuai, metode ini akan mengembalikan null.

Di sisi lain, querySelectorAll mengembalikan semua elemen yang cocok dengan CSS Selector yang diberikan dalam bentuk NodeList, yang mirip dengan array. Kamu bisa mengakses dan memanipulasi banyak elemen sekaligus. Ini sangat berguna jika kamu perlu mengubah beberapa elemen di halaman web.

Belajar JavaScript DOM sangat penting dalam Front-End Development dan Web Development

Kesimpulannya, mempelajari JavaScript DOM adalah langkah krusial dalam pengembangan front-end dan web development. DOM memungkinkan pengembang untuk mengakses, mengubah, menambah, dan menghapus elemen HTML secara dinamis, yang membuat halaman web lebih interaktif.

Untuk meningkatkan keterampilan dalam memanipulasi elemen dengan JavaScript, sangat disarankan untuk mendalami DOM API lebih lanjut. Jika kamu ingin belajar lebih dalam, ikuti Kursus FullStack Web Developer online di ITBOX.

Nikmati belajar fleksibel dengan materi up-to-date mulai dari pemula hingga mahir, akses saran forum, serta konsultasi gratis melalui Zoom bagi yang mengambil paket bundle. Dapatkan sertifikat gratis setelah menyelesaikan kursus!

FAQ

• Apa itu DOM dalam JavaScript?
  DOM (Document Object Model) adalah antarmuka yang memungkinkan JavaScript untuk mengakses dan memanipulasi elemen HTML dan CSS di halaman web.
• Bagaimana cara menggunakan querySelector di DOM?
  
  querySelector digunakan untuk memilih elemen pertama yang cocok dengan CSS Selector yang diberikan. Contoh: 
  
  let headerElement = document.querySelector(“#header”);
  
• Apa yang dimaksud dengan node dalam konteks DOM?
  Node adalah komponen dalam struktur dokumen HTML, seperti elemen HTML, atribut, teks, atau komentar.
  
• Apa perbedaan antara querySelector dan getElementById?
  querySelector: Memilih elemen dengan CSS Selector, mengembalikan elemen pertama yang cocok. getElementById: Memilih elemen berdasarkan ID, mengembalikan elemen yang sesuai atau null.