Belajar JavaScript Lanjutan dan Pengenalan DOM Manipulation
JavaScript
Lanjutan - DOM Manipulation
JavaScript
adalah bahasa pemrograman yang digunakan untuk memberikan interaktivitas dan
dinamika pada halaman web. Salah satu konsep paling penting dalam pengembangan
web modern adalah DOM Manipulation (Manipulasi Model Objek Dokumen). DOM
adalah representasi struktural dari halaman web, yang memungkinkan pengembang
untuk mengakses dan memanipulasi konten HTML dan CSS menggunakan JavaScript.
Pengenalan
DOM (Document Object Model)
DOM adalah singkatan dari Document
Object Model, yaitu representasi pohon (tree structure) dari elemen-elemen
di dalam halaman web. Setiap elemen HTML di halaman web diwakili oleh objek
yang dapat diakses dan dimodifikasi menggunakan JavaScript.
DOM
adalah antarmuka pemrograman aplikasi (API) yang memungkinkan JavaScript untuk
berinteraksi dengan elemen-elemen di dalam dokumen HTML. DOM menggambarkan
halaman sebagai struktur pohon dengan elemen-elemen HTML sebagai node. Setiap
elemen HTML, atribut, dan teks yang ada di dalam halaman dapat diakses dan
dimanipulasi menggunakan DOM.
Struktur DOM:
- Dokumen adalah node paling atas dalam
pohon.
- Elemen (seperti <div>,
<p>, <ul>)
adalah node anak dari dokumen.
- Atribut (seperti id,
class) adalah properti elemen yang dapat dimanipulasi.
- Teks adalah konten dalam elemen
HTML yang dapat diubah.
Contoh representasi DOM dari halaman
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Dokumen Contoh</title>
</head>
<body>
<div
id="content">
<h1>Selamat Datang di Halaman Web</h1>
<p>Ini
adalah paragraf pertama.</p>
</div>
</body>
</html>
Struktur DOM
untuk HTML di atas:
- Document
- html
- head
- title
- body
- div#content
- h1
- p
Manipulasi
Elemen DOM Menggunakan JavaScript
Dengan menggunakan JavaScript, kita
dapat mengakses, mengubah, dan memanipulasi elemen HTML di dalam DOM untuk
membuat halaman web lebih dinamis. Beberapa metode JavaScript yang sering
digunakan untuk manipulasi DOM adalah:
- Akses Elemen DOM:
- document.getElementById(id): Mengambil elemen berdasarkan ID.
- document.getElementsByClassName(className): Mengambil elemen berdasarkan
kelas.
- document.getElementsByTagName(tagName): Mengambil elemen berdasarkan
nama tag HTML.
- document.querySelector(selector): Mengambil elemen pertama
yang cocok dengan selector CSS.
- document.querySelectorAll(selector): Mengambil semua elemen yang
cocok dengan selector CSS.
Contoh:
let element =
document.getElementById("content");
// Mengakses elemen dengan ID 'content'
let paragraphs =
document.getElementsByTagName("p"); // Mengakses semua elemen
<p>
- Mengubah Konten dan Atribut:
- element.innerHTML: Mengubah konten HTML dalam elemen.
- element.textContent: Mengubah konten teks dalam elemen.
- element.setAttribute(attrName, value): Mengubah atau menambah
atribut elemen.
- element.style.property: Mengubah gaya CSS elemen secara langsung.
Contoh:
let header = document.querySelector("h1");
header.textContent = "Judul Baru"; // Mengubah
teks dalam elemen <h1>
let paragraph = document.querySelector("p");
paragraph.style.color = "blue"; // Mengubah warna
teks menjadi biru
let div = document.getElementById("content");
div.setAttribute("class", "highlight");
// Menambahkan kelas 'highlight' pada elemen div
- Menambah dan Menghapus Elemen:
- document.createElement(tagName): Membuat elemen baru.
- parentElement.appendChild(childElement): Menambahkan elemen anak ke
dalam elemen induk.
- parentElement.removeChild(childElement): Menghapus elemen anak dari
elemen induk.
Contoh:
let newParagraph = document.createElement("p");
newParagraph.textContent = "Paragraf baru!";
let container =
document.getElementById("content");
container.appendChild(newParagraph); // Menambahkan elemen paragraf baru ke dalam
div#content
container.removeChild(newParagraph); // Menghapus paragraf baru
- Manipulasi Kelas CSS:
- element.classList.add(className): Menambahkan kelas ke elemen.
- element.classList.remove(className): Menghapus kelas dari elemen.
- element.classList.toggle(className): Menambahkan kelas jika belum
ada, atau menghapusnya jika sudah ada.
Contoh:
let element = document.getElementById("content");
element.classList.add("highlight"); // Menambahkan
kelas 'highlight'
element.classList.remove("highlight"); //
Menghapus kelas 'highlight'
element.classList.toggle("active"); // Menambahkan
kelas 'active' jika belum ada, atau menghapusnya jika sudah ada
Event
Handling di JavaScript
JavaScript memungkinkan kita untuk
menangani berbagai jenis interaksi atau peristiwa (events) dari pengguna,
seperti klik, input, submit, hover, dan lainnya. Event handling adalah cara
untuk merespons dan menangani interaksi tersebut.
Cara
Menangani Event
- Menambahkan Event Listener:
- element.addEventListener(event, function): Menambahkan event listener
pada elemen yang akan menanggapi event tertentu.
Contoh:
let button = document.getElementById("myButton");
button.addEventListener("click", function() {
alert("Button
diklik!");
});
- Menangani Event dengan Inline
Event Handler (Tidak direkomendasikan): Cara lain untuk menangani event adalah dengan
menambahkan handler langsung di HTML, meskipun ini kurang fleksibel dan
tidak dianjurkan pada praktik modern.
Contoh:
<button onclick="alert('Button
diklik!')">Klik Saya</button>
Jenis-jenis
Event
- Event Klik (click): Event ini terjadi ketika
pengguna mengklik elemen tertentu (misalnya tombol, gambar, dll).
let button = document.querySelector("button");
button.addEventListener("click", function() {
console.log("Tombol diklik!");
});
- Event Input (input): Event ini terjadi ketika
pengguna memasukkan teks ke dalam elemen input atau textarea.
let input = document.querySelector("input");
input.addEventListener("input", function() {
console.log("Teks dimasukkan:", input.value);
});
- Event Submit (submit): Event ini terjadi saat
pengguna mengirimkan formulir (form).
let form = document.querySelector("form");
form.addEventListener("submit", function(event) {
event.preventDefault(); //
Mencegah pengiriman form
console.log("Form dikirim!");
});
- Event Hover (mouseover,
mouseout): Event
ini terjadi ketika pengguna mengarahkan kursor ke elemen (mouseover) atau
menghilangkan kursor dari elemen (mouseout).
let box = document.querySelector(".box");
box.addEventListener("mouseover", function() {
box.style.backgroundColor = "blue";
});
box.addEventListener("mouseout", function() {
box.style.backgroundColor = "";
});
- Event Focus dan Blur: Event ini terjadi ketika
elemen mendapat fokus (focus) atau kehilangan fokus (blur), umumnya
digunakan untuk elemen form seperti input dan textarea.
let input = document.querySelector("input");
input.addEventListener("focus", function() {
console.log("Input terfokus!");
});
input.addEventListener("blur", function() {
console.log("Input kehilangan fokus!");
});
Menggunakan
Event Object
Saat menangani event, kita dapat
menggunakan objek event yang menyediakan informasi tambahan
mengenai event yang terjadi, seperti elemen yang dipicu, tombol yang diklik,
dan lain-lain.
Contoh:
let button = document.querySelector("button");
button.addEventListener("click", function(event) {
console.log("Elemen yang diklik:", event.target); // Elemen yang diklik
console.log("Posisi X:", event.clientX); // Posisi X mouse saat klik
});
Kesimpulan
Manipulasi
DOM menggunakan JavaScript adalah teknik yang sangat penting dalam pengembangan
web dinamis. Dengan memahami DOM dan kemampuan manipulasi elemen DOM,
pengembang dapat membuat perubahan interaktif pada halaman web, seperti
mengubah konten, menambah atau menghapus elemen, serta memodifikasi atribut dan
gaya CSS. Selain itu, event handling memungkinkan halaman web untuk
merespons interaksi pengguna secara real-time, yang sangat penting untuk
memberikan pengalaman pengguna yang interaktif dan responsif. Dengan menguasai
teknik-teknik ini, pengembang dapat membangun aplikasi web yang lebih interaktif,
dinamis, dan responsif.
Comments
Post a Comment