Javascript DOM

Apa itu DOM ?

DOM merupakan singkatan dari Document Object Model, sebuah objek untuk memodelkan dokumen HTML. Objek DOM di javascript dinamakan document. Objek ini berisi fungsi dan atribut untuk memanipulasi dokumen HTML.

Sumber: simplesnippets.tech

Berikut contoh DOM melalui console web browser

Pada gambar di atas menggunakan fungsi write() untuk menampilkan pesan halo semua pada browser. 

document.write("halo semua")

Kemudian memberi warna background menggunakan atribut bgColor. 

document.bgColor = blue

Mengakses Elemen Tertentu

DOM berisi kumpulan fungsi dan atribut berupa objek dari elemen HTML yang bisa digambarkan dalam bentuk pohon seperti ini:

Sumber: w3schools

Struktur pohon ini akan memudahkan kita dalam menggunakan elemen tertentu.

Mari kita coba mengakses objek <head> dan <body>

// mengakses objek head
document.head

// mengakses objek body
document.body

// mengakses judul halaman
document.title

// melihat panjang judul halaman
document.title.length

Hasilnya sebagai berikut:

Apabila kita ingin mengakses elemen yang spesifik, terdapat beberapa fungsi yang bisa digunakan:

  • getElementById() fungsi untuk memilih elemen berdasarkan atribut id.

  • getElementByName() fungsi untuk memilih elemen berdasarkan atribut name.

  • getElementByClassName() fungsi untuk memilih elemen berdasarkan atribut class.

  • getElementByTagName() fungsi untuk memilih elemen berdasarkan nama tag.

  • getElementByTagNameNS() fungsi untuk memilih elemen berdasarkan nama tag.

  • querySelector() fungsi untuk memilih elemen berdasarkan query.

  • querySelectorAll() fungsi untuk memilih elemen berdasarkan query.

  • dan lain-lain.

Fungsi-fungsi di atas cukup sering digunakan untuk mengakses elemen tertentu.

Misalkan kita punya kode HTML seperti ini:

<div id="judul"></div>

Maka untuk memilih elemen tersebut di Javascript, kita bisa gunakan fungsi getElementById() seperti ini:

// memilih elemen dengan id 'judul'
let judul = document.getElementById('judul');

Variabel judul akan menjadi sebuah objek DOM dari elemen yang kita pilih.

Selanjutnya untuk mengisi teks ke dalam elemen dapat menggunakan innerText atau innerHTML. 

// mengisi teks ke dalam elemen judul
judul.innerText = "Teknik Informatika";

Untuk memberikan style CSS ke dalam elemen dapat menggunakan style. 

// memberikan CSS ke dalam elemen
judul.style.backgroundColor = "#f0f0f0";

Berikut contoh kode yang lebih lengkap:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript DOM</title>
</head>

<body>
    <div id="judul"></div>
    <div id="deskripsi"></div>

    <script>
        // mengakses elemen judul
        let judul = document.getElementById("judul");

        // mengisi teks ke dalam elemen judul
        judul.innerText = "Teknik Informatika";

        // memberikan CSS ke dalam elemen
        judul.style.backgroundColor = "#f0f0f0";
        judul.style.padding = "10px";

        // mengakses elemen deskripsi
        let deskripsi = document.getElementById("deskripsi");

        // mengisi teks ke dalam elemen deskripsi
        deskripsi.innerHTML = "Salah satu program studi <strong>unggulan</strong> di Kampus MDP";

    </script>
</body>

</html>

Berikut gambar pembuatan kode di atas dan hasilnya:

Membuat Elemen dengan DOM

Untuk membuat elemen HTML menggunakan fungsi createElement()

// membuat elemen p
judul = document.createElement('p');

Maka akan tercipta elemen <p> baru, selanjutnya memberikan text ke dalam elemen <p> baru

// mengisi teks ke dalam elemen
judul.innerText = "Teknik Informatika";

Setelah membuat elemen <p> dan menambahkan teks ke dalam elemen tersebut, elemen <p> belum tampil di halaman web. Agar elemen <p> tadi tampil pada halaman web, elemen <p> dimasukkan ke dalam body dokumen HTML.

// menambahkan elemen ke dalam body
document.body.append(judul);

Menghapus Elemen dengan DOM

Untuk menghapusnya kita menggunakan fungsi remove()

// menghapus elemen 
judul.remove();

Referensi

https://www.w3schools.com/js/js_htmldom.asp https://www.petanikode.com/javascript-dom/ https://www.codepolitan.com/manipulasi-html-dom-dengan-javascript-58307b3fc5bb8-21269

PreviousJavascript DasarNextJavascript Object

Last updated

Was this helpful?