JavaTutorial DOM Skrip dengan Contoh

Oleh: James Hartman James Hartman
Hours Updated

⚡ Ringkasan Cerdas

JavaScript DOM dan Events memberi skrip kendali penuh atas halaman web, memungkinkan kode untuk membaca, mengubah, menambah, atau menghapus elemen apa pun yang ditampilkan oleh browser, lalu merespons secara instan setiap kali pengunjung mengklik, mengetik, atau menggulir.

  • 🌳 Jenis Node: Node elemen, teks, atribut, dan komentar masing-masing memainkan peran yang berbeda di dalam pohon DOM.
  • 🔍 Memilih Elemen: getElementById, querySelector, dan querySelectorAll menemukan node persis yang dibutuhkan oleh sebuah skrip.
  • ️ Memperbarui Konten: innerHTML, textContent, dan setAttribute menulis ulang apa yang sebenarnya dilihat pengunjung di layar.
  • 🧩 Node Bangunan: Fungsi `createElement` dan `appendChild` menyisipkan elemen baru tanpa memuat ulang halaman.
  • ️ Menghapus Node: removeChild dan remove menghapus elemen yang tidak diinginkan dari struktur pohon yang aktif.
  • ️ Penanganan Acara: addEventListener melampirkan handler klik, keyup, dan submit ke elemen apa pun.
  • 🔄 Delegasi Acara: Sebuah listener induk tunggal ditambah event.target mengelola klik untuk banyak elemen anak sekaligus.
  • 🤖 Debugging dengan Bantuan AI: Asisten pengkodean AI membantu tracMengidentifikasi masalah yang muncul dan menyarankan pola delegasi untuk UI yang kompleks.
Baca Selengkapnya

Apa yang ada di DOM JavaNaskah?

JavaSkrip dapat mengakses semua elemen dalam halaman web dengan menggunakan Document Object Model (DOM). Faktanya, browser web membuat DOM dari halaman web saat halaman dimuat. Model DOM dibuat sebagai pohon objek seperti ini:

DOM di JavaNaskah

Setiap elemen HTML pada halaman menjadi sebuah node di dalam pohon ini. Browser mengelompokkan node DOM ke dalam beberapa tipe inti: node elemen mewakili tag seperti <p> <p> or <div>Node teks menyimpan kata-kata yang terlihat di dalam sebuah tag, sedangkan node atribut menyimpan nilai-nilai seperti... id or class, dan node komentar mempertahankan <!-- --> Tanda (markup). Node paling atas selalu adalah... document objek, dan setiap elemen lainnya adalah keturunan dari objek tersebut.

Dengan menggunakan DOM, JavaNaskah Dapat melakukan berbagai tugas. Ia dapat membuat elemen dan atribut baru, mengubah elemen dan atribut yang sudah ada, dan bahkan menghapus elemen dan atribut yang sudah ada. JavaScript juga dapat bereaksi terhadap peristiwa yang sudah ada dan membuat peristiwa baru di halaman. Bagian di bawah ini akan memandu Anda dalam memilih elemen, memodifikasinya, dan menghubungkan penanganan peristiwa dengan contoh praktis yang dapat dijalankan.

Penting untuk diingat bahwa DOM bukanlah hal yang sama dengan file sumber HTML. HTML yang diunduh browser adalah teks statis, tetapi DOM yang dibangun dari teks tersebut adalah model objek yang dinamis dan terus berubah. Setiap perubahan JavaSkrip tersebut membuat DOM langsung muncul di layar, tanpa perlu mengubah file HTML aslinya.

Cara Memilih Elemen DOM di JavaNaskah

Sebelum JavaSkrip dapat mengubah apa pun di halaman, pertama-tama skrip perlu memilih node target. DOM menyediakan beberapa metode selektor, masing-masing cocok untuk situasi yang berbeda:

  • getElementById(): Mengembalikan elemen tunggal yang cocok dengan kriteria yang diberikan. id atribut.
  • getElementsByClassName(): Mengembalikan HTMLCollection langsung dari setiap elemen yang memiliki kelas tertentu.
  • getElementsByTagName(): Mengembalikan koleksi HTML langsung dari setiap elemen dengan nama tag tertentu, seperti p or li.
  • querySelector(): Mengembalikan elemen pertama yang cocok dengan pemilih CSS apa pun.
  • querySelectorAll(): Mengembalikan NodeList statis yang berisi setiap elemen yang cocok dengan pemilih CSS.

Tabel di bawah ini membandingkan empat metode seleksi yang paling umum digunakan sehingga Anda dapat memilih metode yang tepat untuk pekerjaan tersebut.

metode Pengembalian Paling Baik Digunakan Saat
dapatkanElementById elemen tunggal Anda mengetahui ID unik dan pasti dari target tersebut.
getElementsByClassName Koleksi HTML Langsung Anda memerlukan setiap elemen yang memiliki nama kelas yang sama.
querySelector Elemen tunggal (kecocokan pertama) Anda ingin menggunakan selektor CSS apa pun, bukan hanya id atau class.
kueriSelectorAll Daftar Node Statis Anda perlu melakukan perulangan pada setiap kecocokan dengan menggunakan forEach.

querySelector dan querySelectorAll menerima semua selektor CSS yang valid, yang menjadikannya pilihan paling fleksibel untuk kode modern. Coba cuplikan kode di bawah ini pada halaman yang berisi elemen dengan id="title" dan beberapa elemen dengan class="item":

const heading = document.getElementById("title");
const itemsByClass = document.getElementsByClassName("item");
const firstItem = document.querySelector(".item");
const allItems = document.querySelectorAll(".item");
console.log(heading.textContent, itemsByClass.length, allItems.length);

getElementById dan getElementsByClassName tetap lebih cepat untuk pencarian sederhana, sementara querySelector dan querySelectorAll lebih disukai setiap kali logika pemilihan membutuhkan kekuatan sintaks CSS lengkap, seperti pemilih atribut atau turunan.

Jangan lewatkan:

Cara Memodifikasi, Membuat, dan Menghapus Elemen DOM

Setelah elemen dipilih, JavaScript dapat membaca atau menulis ulang konten, atribut, dan bahkan keberadaannya di dalam struktur pohon. Dengan menggunakan DOM, JavaSkrip dapat membuat elemen dan atribut baru, mengubah elemen dan atribut yang sudah ada, serta menghapus elemen dan atribut yang sudah ada sepenuhnya.

Ubah Konten dengan getElementById dan innerHTML

  1. getElementById: Untuk mengakses elemen dan atribut yang idnya disetel.
  2. innerHTML: Untuk mengakses konten suatu elemen.

Cobalah contoh ini sendiri:

<html>
<head>
<title>DOM!!!</title>
</head>
<body>
<h1 id="one">Welcome</h1>
<p>This is the welcome message.</p>
<h2>Technology</h2>
<p>This is the technology section.</p>
<script type="text/javascript">
var text = document.getElementById("one").innerHTML;
alert("The first heading is " + text);
</script>
</body>
</html>

Kotak peringatan tersebut mengkonfirmasi bahwa getElementById menemukan judul dan innerHTML mengembalikan teks yang tersimpan di dalamnya.

Baca Setiap Paragraf dengan getElementsByTagName

getElementsByTagName: Untuk mengakses elemen dan atribut menggunakan nama tag. Metode ini akan mengembalikan susunan dari semua item dengan nama tag yang sama.

Cobalah contoh ini sendiri:

<html>
<head>
<title>DOM!!!</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is the welcome message.</p>
<h2>Technology</h2>
<p id="second">This is the technology section.</p>
<script type="text/javascript">
var paragraphs = document.getElementsByTagName("p");
alert("Content in the second paragraph is " + paragraphs[1].innerHTML);
document.getElementById("second").innerHTML = "The orginal message is changed.";
</script>
</body>
</html>

Karena getElementsByTagName mengembalikan koleksi yang aktif, paragraphs[1] mengacu pada paragraf kedua dalam dokumen, dan memperbarui innerHTML akan langsung menimpa teksnya di layar.

Membuat dan Menghapus Elemen dengan createElement dan removeChild

Selain mengubah apa yang sudah ada di halaman, DOM memungkinkan Anda menambahkan elemen baru atau menghapus elemen yang sudah ada:

  • buatElemen(): Membangun node elemen baru di memori.
  • appendChild(): melampirkan sebuah node sebagai anak terakhir dari elemen induk.
  • setAttribute(): menambahkan atau memperbarui atribut, seperti class or href, pada suatu elemen.
  • removeChild(): Menghapus node anak tertentu dari induknya.

Contoh di bawah ini membuat item daftar baru, memberinya teks dan kelas, menambahkannya ke daftar yang sudah ada, dan kemudian menghapus item pertama dari daftar yang sama:

const list = document.getElementById("myList");
const newItem = document.createElement("li");
newItem.textContent = "Freshly added item";
newItem.setAttribute("class", "highlight");
list.appendChild(newItem);
list.removeChild(list.firstElementChild);

Fungsi `createElement()` saja tidak menampilkan apa pun, karena node tersebut masih hanya berada di memori. Node tersebut hanya muncul setelah `appendChild()`, atau metode serupa seperti `prepend()`, melampirkannya di suatu tempat di dalam pohon yang terlihat. Browser modern juga mendukung metode `node.remove()` yang lebih singkat, yang menghapus elemen secara langsung tanpa memerlukan referensi ke induknya, tidak seperti sintaks `parent.removeChild(node)` yang lebih lama.

Cara Menangani Acara di JavaNaskah

Suatu kejadian (event) adalah tindakan apa pun yang dapat dideteksi oleh browser, seperti klik, penekanan tombol, atau pemuatan halaman. Anda dapat menambahkan penanganan kejadian (event handler) ke elemen tertentu dengan dua cara utama.

Lampirkan Handler dengan onclick atau addEventListener

Pendekatan pertama, yang lebih lama, menetapkan fungsi secara langsung ke properti on-event suatu elemen:

document.getElementById(id).onclick=function()
{
lines of code to be executed
}

ATAU, menggunakan metode addEventListener() yang lebih modern dan fleksibel:

document.getElementById(id).addEventListener("click", functionname)

`addEventListener()` umumnya lebih disukai karena memungkinkan Anda melampirkan lebih dari satu handler ke event yang sama pada elemen yang sama, dan menerima argumen ketiga opsional yang mengontrol penangkapan, yang akan dibahas nanti di bagian ini. Fungsi ini juga berpasangan dengan `removeEventListener()`, yang melepaskan handler ketika tidak lagi dibutuhkan, sesuatu yang tidak dapat dilakukan oleh properti `onclick` sendiri.

HTML juga mendukung gaya ketiga: penanganan sebaris yang ditulis langsung pada tag, seperti <button onclick="clicked()">Click Me</button>Handler inline mencampur markup dengan logika dan dengan cepat menjadi sulit dipelihara, jadi sebagian besar JavaPara pengembang skrip menggunakannya untuk demo singkat dan mengandalkan addEventListener() untuk aplikasi sebenarnya.

Cobalah: Contoh Lengkap Event Klik

Cobalah contoh ini sendiri:

<html>
<head>
<title>DOM!!!</title>
</head>
<body>
<input type="button" id="btnClick" value="Click Me!!" />
<script type="text/javascript">
document.getElementById("btnClick").addEventListener("click", clicked);
function clicked()
{
alert("You clicked me!!!");
}
</script>
</body>
</html>

Mengklik tombol akan memicu fungsi clicked(), yang kemudian memicu sebuah JavaKotak peringatan skrip yang mengkonfirmasi bahwa penanganan peristiwa telah berhasil dijalankan.

Objek Peristiwa

Setiap event handler secara otomatis menerima objek event sebagai argumen pertamanya. Objek ini membawa detail berguna tentang apa yang terjadi, termasuk event.target (elemen persis tempat aksi berasal), event.type (nama event, seperti "klik"), dan metode seperti event.preventDefault(), yang menghentikan perilaku default browser, seperti mengikuti tautan atau mengirimkan formulir.

document.getElementById("btnClick").addEventListener("click", function(event) {
console.log("Clicked element: " + event.target.id);
});

Dua properti lagi melengkapi objek event: event.currentTarget selalu mengacu pada elemen tempat listener terpasang, bahkan jika event.target melaporkan anak yang bersarang, dan event.stopPropagation() menghentikan suatu event sebelum terus menyebar atau menangkap lebih lanjut. Bersama dengan preventDefault(), alat-alat ini memberi handler kendali yang tepat atas apa yang terjadi selanjutnya.

Acara BubblPengambilan, Penangkapan, dan Pendelegasian

Ketika suatu kejadian dipicu pada elemen bersarang, kejadian tersebut tidak berhenti di situ. Di dalam bual Pada fase ini, peristiwa bergerak ke atas dari elemen target melalui setiap leluhur, hingga ke dokumen. Dalam hal ini, menangkap Pada fase ini, yang berjalan pertama dan bersifat opsional, peristiwa tersebut justru bergerak ke bawah dari dokumen ke target sebelum proses bubbling dimulai. Lulus {capture: true} sebagai argumen ketiga untuk addEventListener() untuk mendengarkan selama fase pengambilan data.

Delegasi acara Memanfaatkan mekanisme bubbling: alih-alih melampirkan listener terpisah ke setiap elemen anak, Anda melampirkan satu listener ke elemen induk yang sama dan memeriksa event.target untuk menentukan anak mana yang memicunya. Ini menggunakan lebih sedikit memori dan secara otomatis mencakup elemen yang ditambahkan ke halaman di kemudian hari.

const list = document.getElementById("myList");
list.addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    alert("You clicked " + event.target.textContent);
  }
});

Delegasi, bersama dengan bubbling dan capturing, memberi Anda kendali yang lebih detail atas bagaimana DOM dan Event di JavaSkrip akan merespons seiring dengan meningkatnya interaktivitas halaman.

Pertanyaan Umum Demo Slot

Tidak. HTML adalah markup statis yang diuraikan oleh browser, sedangkan DOM adalah pohon objek yang hidup dan berada di memori. JavaSkrip dapat dibaca dan diubah setelah halaman dimuat.

Lebih baik menggunakan addEventListener(). Fungsi ini memungkinkan beberapa handler pada satu event, mendukung fase capturing, dan tidak menimpa handler yang sudah terpasang melalui onclick.

BubblProses `ing` membawa sebuah peristiwa dari elemen target ke dokumen. Proses `capturing` berjalan terlebih dahulu dan bergerak ke arah sebaliknya, dari dokumen ke target.

Ya. Asisten seperti Kopilot GitHub bisa tracJelaskan mengapa handler tidak pernah dijalankan, temukan panggilan event.stopPropagation() yang hilang, dan sarankan pola delegasi untuk daftar dinamis.

Ya. Alat-alat seperti ChatGPT dan GitHub Copilot dapat membuat draf cuplikan createElement, querySelector, dan addEventListener dari deskripsi bahasa sederhana, meskipun hasilnya masih perlu diuji.

Ringkaslah postingan ini dengan: