JavaScript - Kaedah DOM

Selamat datang, para pemrogram yang sedang beranjak! Hari ini, kita akan meluncur ke dunia yang menarik JavaScript dan Document Object Model (DOM). Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya disini untuk membimbing Anda dalam perjalanan ini dengan banyak contoh dan penjelasan. Jadi, ambil minumannya yang favorit, nyamanlah, dan mari kita mulai petualangan kita!

Apa Itu DOM?

Sebelum kita masuk ke dalam kaedah-kaedahnya, mari kita mengerti apa itu DOM secara cepat. Bayangkan halaman web seperti pohon keluarga. DOM seperti pohon keluarga itu, mewakili struktur dokumen HTML Anda. Ini membolehkan JavaScript untuk berinteraksi dan memanipulasi kandungan, struktur, dan gaya halaman web.

Sekarang, mari kita jelajahi beberapa kaedah DOM yang kuat untuk membantu Anda menjadi ahli JavaScript!

Kaedah getElementById() JavaScript

Kaedah getElementById() seperti seorang pemburu harta karun di dokumen HTML Anda. Ia mencari elemen dengan ID tertentu dan membawanya kembali kepada Anda. Mari kita lihat contohnya:

<div id="myAwesomeDiv">Hello, I'm an awesome div!</div>

<script>
let myDiv = document.getElementById("myAwesomeDiv");
console.log(myDiv.innerHTML);
</script>

Dalam contoh ini, kita mengatakan kepada JavaScript, "Hey, temukan elemen dengan ID 'myAwesomeDiv' dan simpan dalam variabel 'myDiv'." Kemudian, kita mencetak isiannya ke konsol.

Bila Anda menjalankan kode ini, Anda akan melihat "Hello, I'm an awesome div!" di konsol Anda. Itu seperti magik, tapi lebih baik kerana Anda memahami bagaimana ia bekerja!

Contoh Praktis: Mengubah Kandungan

Mari kita membuat hal lebih interaktif:

<h1 id="greeting">Hello, World!</h1>
<button onclick="changeGreeting()">Change Greeting</button>

<script>
function changeGreeting() {
let greetingElement = document.getElementById("greeting");
greetingElement.innerHTML = "Hello, JavaScript Ninja!";
}
</script>

Di sini, kita memiliki tombol yang, bila ditekan, mengubah teks elemen h1 kita. Itu seperti memberikan halaman web Anda kesan personal dengan beberapa baris kode!

Kaedah addEventListener() JavaScript

Sekarang, mari kita bicarakan addEventListener(). Kaedah ini seperti menempatkan kamera keselamatan untuk elemen Anda. Ia memantau peristiwa khusus dan kemudian melakukan sesuatu bila peristiwa itu terjadi.

<button id="myButton">Click me!</button>

<script>
let button = document.getElementById("myButton");
button.addEventListener("click", function() {
alert("Button clicked! You're awesome!");
});
</script>

Dalam contoh ini, kita mengatakan kepada tombol kita, "Hey, bila seseorang mengklik Anda, tunjukkan pesan ini." Itu seperti mengajarkan halaman web Anda untuk merespon tindakan pengguna!

Contoh Praktis: Togol Modus Gelap

Mari kita buat togol modus gelap yang mudah:

<button id="darkModeToggle">Toggle Dark Mode</button>

<script>
let darkModeToggle = document.getElementById("darkModeToggle");
darkModeToggle.addEventListener("click", function() {
document.body.style.backgroundColor = document.body.style.backgroundColor === "black" ? "white" : "black";
document.body.style.color = document.body.style.color === "white" ? "black" : "white";
});
</script>

Kode ini mendengarkan klik pada tombol kita dan togol warna latar belakang dan teks keseluruhan halaman. Itu seperti memberikan pengguna Anda sakelar cahaya pribadi untuk website Anda!

Kaedah document.write() JavaScript

Kaedah document.write() seperti jalur langsung ke dokumen HTML Anda. Ia membolehkan Anda menulis kandungan langsung ke output HTML. Tetapi, hati-hati! Menggunakan kaedah ini setelah halaman dimuat akan menimpa semua kandungan yang ada.

<script>
document.write("<h2>Hello from JavaScript!</h2>");
</script>

Ini akan menambah elemen h2 baru ke halaman Anda dengan teks "Hello from JavaScript!". Itu seperti memiliki pensil ajaib yang menulis langsung ke halaman web Anda!

Contoh Praktis: Generasi Kandungan Dinamik

Mari kita buat contoh mudah yang menghasilkan senarai berdasarkan input pengguna:

<input type="number" id="listLength" placeholder="Enter list length">
<button onclick="generateList()">Generate List</button>

<script>
function generateList() {
let length = document.getElementById("listLength").value;
document.write("<ul>");
for (let i = 1; i <= length; i++) {
document.write("<li>Item " + i + "</li>");
}
document.write("</ul>");
}
</script>

Skrip ini menghasilkan senarai tak terurut berdasarkan nombor yang pengguna masukkan. Ingat, ini akan menimpa semua kandungan halaman Anda, jadi gunakanlah dengan bijak!

Senarai Kaedah DOM

Ada banyak kaedah DOM lain untuk dijelajahi. Berikut adalah tabel dari beberapa yang kerap digunakan:

Kaedah	Deskripsi
getElementById()	Mengembalikan elemen dengan ID yang ditentukan
getElementsByClassName()	Mengembalikan koleksi elemen dengan nama kelas yang ditentukan
getElementsByTagName()	Mengembalikan koleksi elemen dengan nama tag yang ditentukan
querySelector()	Mengembalikan elemen pertama yang cocok dengan pemilih CSS
querySelectorAll()	Mengembalikan semua elemen yang cocok dengan pemilih CSS
createElement()	Membuat elemen node baru
appendChild()	Menambahkan node anak baru ke elemen sebagai anak terakhir
removeChild()	Menghapus node anak dari elemen
replaceChild()	Mengganti node anak di elemen
setAttribute()	Menetapkan atau mengubah atribut yang ditentukan ke nilai yang ditentukan

Setiap kaedah ini membuka peluang baru untuk memanipulasi halaman web Anda. Itu seperti memiliki pisau Swiss Army untuk pengembangan web!

Dalam kesimpulan, kaedah DOM adalah alat kuat yang membolehkan Anda berinteraksi dan memanipulasi halaman web secara dinamik. Mereka adalah saus rahasia yang membuat website interaktif dan responsif. Sebagai Anda terus melanjutkan perjalanan Anda dalam pengembangan web, Anda akan menemukan diri Anda menggunakan kaedah-kaedah ini secara berkala.

Ingat, latihan membuat sempurna. Cobalah kaedah ini, eksperimenlah dengannya, dan jangan takut membuat kesalahan. Itu adalah bagaimana kita semua belajar dan tumbuh sebagai pengembang. Selamat coding, para ninja JavaScript masa depan!

Credits: Image by storyset