Beranda
JavaScript

Javascript DOM API dan Cara Menggunakanya

DOM API adalah jembatan antara JavaScript dan HTML, memungkinkan kalian untuk mengontrol dan merespons interaksi pengguna dengan halaman web
Kode Violet
Javascript DOM API dan Cara Menggunakanya

Hai teman-teman! Kalian mungkin pernah dengar tentang istilah DOM saat belajar HTML, CSS, atau JavaScript. Nah, pada kesempatan ini kodeviolet.com akan membahas tentang Apa itu DOM API? dan Bagaimana Cara Menggunakannya. Artikel ini cocok banget buat kalian yang ingin mulai memahami bagaimana JavaScript bisa "berinteraksi" dengan halaman web kalian.

Apa Itu DOM API?

DOM merupakan singkatan dari Document Object Model. Sederhananya, DOM adalah representasi struktur dari halaman web dalam bentuk objek, yang bisa dimanipulasi oleh JavaScript. DOM bukan bagian dari JavaScript itu sendiri, tetapi merupakan antarmuka (API) yang disediakan oleh browser agar JavaScript bisa bekerja dengan elemen-elemen HTML.

DOM API adalah sekumpulan method dan properti yang memungkinkan kalian untuk:

  • Mengakses elemen HTML
  • Mengubah konten teks
  • Menambah atau menghapus elemen
  • Menangani event (seperti klik, hover, dll)

Struktur DOM

Saat browser memuat halaman, ia membangun struktur DOM sebagai pohon hierarkis dari node:

<html>
  <head>
    <title>Judul Halaman</title>
  </head>
  <body>
    <h1>Halo Dunia</h1>
    <p>Paragraf pertama</p>
  </body>
</html>

Struktur di atas akan diterjemahkan ke dalam DOM tree di mana setiap elemen menjadi node yang bisa diakses dan dimanipulasi.

Cara Menggunakan DOM API

Untuk berinteraksi dengan DOM, kalian bisa menggunakan berbagai method bawaan JavaScript. Berikut ini beberapa method umum:

Method DOM API Fungsi
document.getElementById() Mengambil elemen berdasarkan ID
document.querySelector() Mengambil elemen pertama yang cocok dengan selector CSS tertentu
element.innerText Mengambil atau mengubah teks dalam elemen
element.innerHTML Mengambil atau mengubah HTML di dalam elemen
element.setAttribute() Menambahkan atau mengubah atribut pada elemen
document.createElement() Membuat elemen HTML baru
parent.appendChild() Menambahkan elemen baru ke dalam elemen induk

Mengakses Elemen Tertentu dengan DOM

Kalian bisa mengakses elemen HTML berdasarkan ID, class, tag, atau selector CSS. Berikut adalah beberapa contoh:

// Mengakses elemen berdasarkan ID
const judul = document.getElementById("judul");

// Mengakses elemen berdasarkan class
const paragraf = document.getElementsByClassName("paragraf")[0];

// Mengakses elemen berdasarkan tag
const semuaParagraf = document.getElementsByTagName("p");

// Menggunakan querySelector (mirip seperti selector CSS)
const tombol = document.querySelector("button");

// Menggunakan querySelectorAll untuk semua elemen yang cocok
const semuaList = document.querySelectorAll("ul li");

Dengan cara ini, kalian bisa menargetkan dan memanipulasi bagian tertentu dari halaman sesuai kebutuhan.

Menghapus Elemen dengan DOM API

Selain menambah, DOM API juga memungkinkan kalian untuk menghapus elemen dari halaman. Caranya adalah dengan menggunakan method removeChild() atau remove().

Berikut contohnya:

// Menghapus elemen dengan removeChild
const parent = document.getElementById("container");
const child = document.getElementById("hapus-me");
parent.removeChild(child);

// Atau cara yang lebih sederhana:
document.getElementById("hapus-me").remove();

Pastikan elemen yang ingin dihapus sudah dimuat dalam DOM agar tidak terjadi error.

Contoh Penggunaan

<!DOCTYPE html>
<html>
<head>
  <title>Contoh DOM API</title>
</head>
<body>
  <h1 id="judul">Selamat Datang</h1>
  <button onclick="ubahJudul()">Klik Aku</button>

  <script>
    function ubahJudul() {
      const elemenJudul = document.getElementById("judul");
      elemenJudul.innerText = "Judul Telah Diubah!";
    }
  </script>
</body>
</html>

Ketika tombol diklik, fungsi ubahJudul() akan mengganti teks dari elemen <h1>.

Kesimpulan

Jadi, DOM API adalah jembatan antara JavaScript dan HTML, memungkinkan kalian untuk mengontrol dan merespons interaksi pengguna dengan halaman web secara dinamis. Dengan menguasai DOM API, kalian bisa membuat website yang lebih interaktif dan responsif.

Itulah tadi artikel dari kodeviolet.com tentang Apa itu DOM API? dan Bagaimana Cara Menggunakannya. Jangan ragu untuk eksplorasi lebih lanjut dan coba langsung di proyek kalian ya!

Posting Komentar