Belajar Menambahkan JavaScript pada Website

25 Apr 2025 -

Penjelasan mengenai Fundamental JavaScript DOM (Document Object Model)

Apa itu JavaScript?

JavaScript adalah bahasa pemrograman yang digunakan untuk:

• Membuat halaman web menjadi interaktif.
• Mengontrol perilaku elemen HTML.
• Berkomunikasi dengan server (misalnya pakai AJAX).

Contoh sederhana: alert(“Halo Dunia!”);

Apa itu DOM (Document Object Model)?

DOM adalah representasi struktur halaman HTML dalam bentuk objek JavaScript. Dengan DOM, kita bisa:

• Mengakses dan mengubah elemen HTML/CSS.
• Menambahkan, menghapus, atau mengganti elemen.
• Menanggapi event seperti klik, scroll, ketik, dll.

fungsi DOM:

1. getElementById() Digunakan untuk mengambil elemen berdasarkan id.

let judul = document.getElementById(“judul”);

1. getElementsByClassName() Mengambil semua elemen yang memiliki class tertentu. Hasilnya berupa HTMLCollection (mirip array).

let kotak = document.getElementsByClassName(“box”);

1. getElementsByTagName() Mengambil semua elemen berdasarkan nama tag, seperti div, p, li, dll.

let paragraf = document.getElementsByTagName(“p”);

1. querySelector() Mengambil satu elemen pertama yang cocok dengan CSS selector. Bisa pakai id (#), class (.), atau tag.

let tombol = document.querySelector(“.btn”);

1. querySelectorAll() Mengambil semua elemen yang cocok dengan CSS selector. Hasilnya berupa NodeList.

let semuaList = document.querySelectorAll(“ul li”);

1. textContent Digunakan untuk mengubah atau mengambil isi teks dari elemen HTML.

judul.textContent = “Teks baru!”;

1. innerHTML Digunakan untuk mengubah atau mengambil isi HTML di dalam suatu elemen.

kotak.innerHTML = “Berubah jadi tebal”;

1. addEventListener() Digunakan untuk menambahkan event handler, seperti saat elemen diklik, dihover, dsb.

tombol.addEventListener(“click”, function() { alert(“Tombol diklik!”); });