JavaScript Dasar | #5 DOM (Document Object Model)

pada tanggal


DOM (Document Object Model) dalam JavaScript

Pengenalan DOM

Document Object Model (DOM) adalah representasi berbasis objek dari struktur halaman web. DOM memungkinkan JavaScript untuk mengakses dan memanipulasi dokumen HTML atau XML secara dinamis.

Dengan menggunakan DOM, kita dapat mengubah konten, struktur, dan gaya dari elemen di halaman web tanpa perlu memuat ulang halaman.

Contoh Kode:


// Mengakses elemen body dari DOM
console.log(document.body);

Mengambil Elemen dari DOM

JavaScript menyediakan beberapa metode untuk mengambil elemen dari DOM, di antaranya:

  • getElementById(): Mengambil elemen berdasarkan ID.
  • getElementsByClassName(): Mengambil elemen berdasarkan nama kelas (class).
  • getElementsByTagName(): Mengambil elemen berdasarkan nama tag.
  • querySelector(): Mengambil elemen pertama yang sesuai dengan selektor CSS.
  • querySelectorAll(): Mengambil semua elemen yang sesuai dengan selektor CSS.

Contoh Kode:


// Mengambil elemen berdasarkan ID
const elementById = document.getElementById("myElement");
console.log(elementById);

// Mengambil elemen berdasarkan class
const elementsByClass = document.getElementsByClassName("myClass");
console.log(elementsByClass);

// Mengambil elemen berdasarkan tag
const elementsByTag = document.getElementsByTagName("div");
console.log(elementsByTag);

// Mengambil elemen pertama dengan querySelector
const firstElement = document.querySelector(".myClass");
console.log(firstElement);

// Mengambil semua elemen yang cocok dengan querySelectorAll
const allElements = document.querySelectorAll("p");
console.log(allElements);

Manipulasi Elemen (style, class, atribut)

Setelah kita mengambil elemen dari DOM, kita bisa memanipulasi gaya, kelas, atribut, dan konten dari elemen tersebut.

  • Manipulasi style: Mengubah gaya elemen secara langsung.
  • Manipulasi classList: Menambah atau menghapus kelas dari elemen.
  • Manipulasi setAttribute(): Menambahkan atau memodifikasi atribut dari elemen.

Contoh Kode:


// Mengubah gaya elemen
elementById.style.color = "blue";
elementById.style.fontSize = "20px";

// Menambah kelas baru ke elemen
elementById.classList.add("newClass");

// Menghapus kelas dari elemen
elementById.classList.remove("oldClass");

// Menambahkan atribut baru ke elemen
elementById.setAttribute("data-id", "123");

// Mengambil nilai atribut dari elemen
const dataId = elementById.getAttribute("data-id");
console.log(dataId);

Event Handling (Event Listener)

Event handling adalah proses menangani aksi pengguna seperti klik, ketikan, atau gerakan mouse pada elemen. Kita bisa menggunakan addEventListener() untuk menambahkan event listener ke elemen.

  • click: Mendengarkan klik pada elemen.
  • input: Mendengarkan perubahan pada elemen input.
  • mouseover: Mendengarkan ketika kursor mouse melewati elemen.

Contoh Kode:


// Menangani event klik pada elemen
elementById.addEventListener("click", function() {
  alert("Elemen diklik!");
});

// Menangani perubahan pada input
const inputElement = document.querySelector("input");
inputElement.addEventListener("input", function(event) {
  console.log("Input berubah:", event.target.value);
});

Contoh Event dengan Fungsi Arrow:


elementById.addEventListener("click", () => {
  console.log("Arrow function: Elemen diklik!");
});

Komentar

Posting Komentar