A. Mengenal Javascript DOM

Javascript DOM adalah metode dalam Bahasa Pemrograman Javascript yang digunakan untuk memanipulasi element HTML dan CSS pada suatu website. Dengan Javascript DOM kita bisa melakukan atau membuat berbagai interaksi dalam halaman web melalui berbagai Fungsi atau Events yang dimiliki Javascript DOM, seperti membuat Animasi, Membuat Musik Player dan sebagainya.

B. Persiapan

Dalam belajar dan praktik mengenai Javascript DOM ada beberapa hal yang perlu di persiapkan, baik dari sarana maupun pengetahuan yang sebelumnya harus di miliki.

  • Menguasai HTML dan CSS
  • Pengetahuan Dasar mengenai Javascript
  • Menggunakan Browser yang memiliki versi Terbaru ( Direkomendasikan menggunakan Google Chrome )

C. Teori

Kita akan langsung praktik, bagaimana langkah awal untuk menggunakan DOM, salah satunya adalah yang perlu diketahui yaitu Memilih Elemen HTML untuk mengimplemantasikan DOM.

Terdapat 3 Metode yang biasa digunakan :

  • Memilih Elemen Berdasarkan ID
  • Memilih Elemen Berdasarkan Nama Class
  • Memilih Elemen Berdasarkan Nama Tag

Sebelum menerapkan DOM, kita perlu membuat beberapa File yang dibutuhkan, seperti :

  • index.html
  • script.js

Source Code [ Index.html ]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LearnDOM</title>
    <style>
        .kartu {
            border: solid 2px black;
        }
    </style>
</head>
<body>

    <h1 id="judul">Belajar DOM</h1>

    <!-- Kartu Materi -->
    <div class="kartu"></div>
    <div class="kartu"></div>

    <!-- List Materi -->
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
    </ul>

    <script src="script.js">
</body>
</html>

D. Praktikum

Didalam file script.js , kita akan menuliskan berbagai syntax DOM untuk memanipulasi elemen HTML yang berada di file index.html

1 ) Memilih Elemen berdasarkan ID - Mengganti Judul

// Membuat Variable untuk menampung Seleksi Element
var judul = document.getElementById('judul');

// Mengganti Teks Judul yang sebelumnya "Belajar DOM" menjadi "LearnDOM"
judul.innerHTML = "LearnDOM";

Jika berhasil maka kamu akan melihat perubahannya, dari judul text “Belajar DOM” menjadi “LearnDOM”

2 ) Memilih Elemen berdasarkan Class - Mengisi Nilai Kartu Materi

Pada bagian kartu Materi sebelumnya belum kita isi kontent apapun, dan sekarang kita akan menambahkan konten tersebut. Satu hal, kita harus memilih class yang spesifik menggunakan index sehingga DOM bisa diterapkan.


// Membuat Variable untuk menampung Seleksi Element
var kartuMateri = document.getElementsByClassName('kartu');

// Mengisi konten pada class atau bagian Kartu Materi ke 1
kartuMateri[0].innerHTML = "Frontend";

// Mengisi konten pada class atau bagian Kartu Materi ke 2
kartuMateri[1].innerHTML = "Backend";
3 ) Memilih Elemen berdasarkan Tag - Mengisi List Materi

Pada bagian kartu Materi sebelumnya telah kita isi beberapa kontent, dan sekarang kita akan mengubah konten tersebut. Seperti by Class, di Tag pun kita harus memilih class yang spesifik menggunakan index sehingga DOM bisa diterapkan, terkhusus untuk element list.


// Membuat Variable untuk menampung Seleksi Element
var listMateri = document.getElementsByTagName('li');

// Mengubah konten pada list Materi baris 1
listMateri[0].innerHTML = "PHP";

// Mengubah konten pada list Materi baris 2
listMateri[1].innerHTML = "PHP OOP";

// Mengubah konten pada list Materi baris 3
listMateri[2].innerHTML = "PHP MVC";

Lalu bagaimana caranya untuk mengganti semua list dengan konten yang sama tanpa perlu, mengubahnya satu per-satu dengan index? Misal, kita akan mengisi 3 List Materi dengan konten atau text “PHP”.

Untuk itu kita bisa memanfaatkan Looping pada Javascript.


// Membuat Loop For
for(var y = 0; y <= 2; y++){

    // Membuat Variable untuk menampung Seleksi Element
    var listMateri = document.getElementsByTagName('li');

    // Mengubah konten pada list Materi baris 3
    listMateri[y].innerHTML = "PHP";

}

Maka hasilnya, semua konten pada list materi akan sama yaitu “PHP”

Demikian Artikel Tentang Memilih Elemen HTML pada Javascript DOM, jika ada kesalahan dalam penggunakan kata maupun kalimat, saya mohon maaf. Semoga bermanfaat dan terima kasih. 😊🙏

💕 Referensi dan apresiasi :

  • Yuanita Rahma Putri untuk Support-nya
  • Sekolahkoding
  • W3School
  • Seperti biasa,, ya thanks to StackOverflow btw.. 😄