BERITA PROGRAMMING Berkenalan Dengan DOM (Document Object Model)

Berkenalan Dengan DOM (Document Object Model)

Oleh Eko Putra Wijaya | Jumat, 13 Agustus 2021

Berkenalan Dengan DOM (Document Object Model)

DOM ( Document Object Model ) merupakan sebuah programming interface yang memungkinan seorang pengembang web untuk merubah tampilan sebuah halaman web tanpa perlu memuat ulang halaman tersebut.

Yuk, ikuti program inovatif MAGANG ONLINE untuk berbagai bidang seperti animasi, coding, 3D, illustrasi, musik dan bisnis hanya di GAMELAB.ID!

Ciptakan lingkungan belajar yang lebih MENYENANGKAN dengan GAME-BASED LEARNING!

Daftar Isi Artikel

Dalam artikel ini, kita akan membahas tentang DOM. Apa itu DOM? Apa yang dapat kita lakukan dengan DOM? Dan bagaimana caranya? Akan kita bahas satu-per-satu di paragraf selanjutnya.

Apa itu DOM?

DOM ( Document Object Model ) merupakan sebuah programming interface yang memungkinan seorang pengembang web untuk dapat merubah tampilan sebuah halaman web tanpa perlu memuat ulang halaman tersebut. DOM pertama kali dipublikasikan oleh W3C ( World Wide Web Consortium ), dengan sebutan “DOM Level 0” atau “Legacy DOM”. Versi DOM tersebut memiliki keterbatasan akses elemen apabila dibandingkan dengan versi DOM yang digunakan saat ini yaitu DOM Level 3.

DOM mengrepresentasikan sebuah dokumen HTML sebagai suatu pohon objek. Misalkan sebuah dokumen HTML memiliki sebuah elemen img di dalam elemen body dokumen tersebut, maka DOM akan merepresentasikan dokumen tersebut seperti dibawah ini.

Pohon Objek DOM

Apa yang dapat DOM lakukan?

  1. Mengubah attribut suatu elemen
    Kita dapat mengubah attribut dari sebuah elemen seperti atribut src pada sebuah elemen img ataupun atribut href pada suatu elemen a.
  2.  Menambah dan menghapus elemen
    Kita dapat menambah ataupun menghapus suatu elemen yang ada pada dokumen.
  3. Melakukan aksi terhadap elemen
    Kita dapat memanggil aksi yang tersedia pada suatu elemen seperti mengklik suatu elemen button atau melakukan scroll pada halaman web.
  4. Merespon terhadap aksi yang terjadi pada elemen
    Kita juga dapat membuat sebuah fungsi untuk merespon ketika suatu elemen menerima suatu aksi seperti ketika sebuah elemen button diklik.

Bagaimana Caranya?

Mungkin sebagian dari kita tidak sadar bahwa DOM telah sering kita gunakan. Seperti ketika kita membuat sebuah fungsi Javascript untuk dijalankan ketika sebuah elemen button ditekan, atau memberikan animasi kepada sebuah elemen melalui Javascript adalah contoh-contoh penggunaan DOM. Oleh karena itu, DOM memiki cara yang mudah untuk digunakan.

Sebagai bahan penjelasan, kita akan menggunakan sebuah dokumen HTML dan sebuah dokumen Javascript.

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>Document</title>
</head>
<body>
    <img src="..." id="imgOne" class="imgFullWidth">

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


app.js :

 

  1. Menyeleksi Elemen
    Hal pertama yang perlu kita lakukan untuk memanipulasi suatu elemen adalah menyeleksinya. Terdapat beberapa metode untuk menyeleksi suatu elemen, yaitu :

    Fungsi Keterangan
    document.getElementById Menyeleksi elemen berdasarkan atribut id
    document.getElementByTagName Menyeleksi elemen berdasarkan nama tag
    document.getElementByClassName Menyeleksi elemeb berdasarkan atribut class
    document.getElementByName Menyeleksi elemen berdasarkan atribut name
    document.querySelector Menyeleksi elemen menggunakan CSS Selector
    document.querySelectorAll Menyeleksi kumpulan elemen menggunakan CSS Selector

    Sehingga apabila kita ingin menyeleksi img pada index.html di app.js dan menyimpanya pada suatu variabel, dapat dilakukan dengan :

    app.js :
    // Menyeleksi menggunakan attribut id
    let selectById = document.getElementById("imgOne");
    
    // Menyeleksi menggunakan attribut class
    let selectByClass = document.getElementByClassName("imgFullWidth");
    
    // Menyeleksi menggunakan nama tag
    let selectByTag = document.getElementByTagName("img");
    
    // Menyeleksi menggunakan CSS Selector
    Let selectByCssSelector = document.querySelector("img");
    // Atau
    selectByCssSelector = document.querySelector("#imgOne");
    // Atau
    selectByCssSelector = document.querySelector(".imgFullWidth");​


    Bagaimana jika kita tidak memiliki suatu elemen untuk diseleksi? Kita juga dapat membuat dan menambahkan sebuah elemen kedalam dokumen menggunakan DOM. Untuk membuat suatu elemen, kita dapat menggunakan fungsi document.createElement() untuk membuat sebuah elemen dan document.body.append() untuk menambahkanya kedalam elemen body dokumen. Fungsi yang sama juga dapat kita lakukan apabila kita hendak memasukkanya kedalam sebuah elemen div misalnya. Hanya saja, kita perlu menyeleksi terlebih dahulu div tersebut, lalu menggunakan fungsi .append() pada seleksi div tersebut. Untuk lebih jelasnya, dapat dilihat pada code block berikut.

    app.js :

    // Membuat sebuah elemen div
    let createdDiv = document.createElement("div");
    
    // Menambahkan elemen div yang telah dibuat kedalam body
    document.body.append(createdDiv);
    
    // Menyeleksi div untuk menambah elemen kedalamnya
    let divInsideBody = document.querySelector("div");
    
    // Membuat sebuah elemen p dan menambahkanya kedalam div
    let createdP = document.createElement("p");
    createdP.innerText = "Ini adalah paragraf yang dimasukkan menggunakan DOM";
    divInsideBody.append(createdP);


    Sehingga dapat dilihat seperti output dibawah ini dimana elemen p dapat muncul di dalam div yang telah kita tambahkan kedalam body.

    Output code

  2. Memanipulasi Elemen
    Setelah kita menyeleksi elemen, selanjutnya kita dapat melakukan manipulasi terhadap elemen tersebut baik isi, atribut, aksi, maupun gaya elemen tersebut. Misalkan kita memiliki sebuah elemen span yang berisi angka 0 ( Nol ) dan kita ingin mengubah angka tersebut menjadi 1, dan apabila angka tersebut lebih besar atau sama dengan dari 1, kita ingin span tersebut memberikan warna merah pada background dan warna putih pada angka tersebut, maka untuk melakukanya, dapat mencermati blok code dibawah.

    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>Document</title>
    </head>
    <body>
        <span id="angka">0</span>
        <br>
        <button id="tombol">tombol</button>
    
        <script src="app.js"></script>
    </body>
    </html>​

    app.js :
    // Menyeleksi span pada dokumen
    let spanToChange = document.querySelector("#angka");
    
    // Mengubah angka pada span menjadi 1
    spanToChange.innerText = 1;
    
    // Mengubah warna latar span dan warna tulisan span apabila angka >= 1
    if (parseInt(spanToChange.innerText) >= 1) {
        spanToChange.style.backgroundColor = "#ff0000";
        spanToChange.style.color = "#ffffff";
    }


    Output :
    Output CodePerlu diperhatikan bahwa variabel innerText pada setiap elemen adalah bertipe data String. Sehingga untuk melakukan perbandingan, disarankan untuk mengkonversi hasil tersebut kembali menjadi Integer  terlebih dahulu menggunakan fungsi parseInt().

  3. Melakukan aksi terhadap elemen
    Menggunakan DOM, kita juga dapat memanggil aksi-aksi yang dapat dilakukan oleh suatu elemen dalam dokumen. Seperti pada contoh sebelumnya, kita memiliki sebuah elemen button di dalam dokumen. Untuk melakukan aksi klik pada tombol tersebut, kita dapat menggunakan fungsi .click() pada elemen button tersebut yang telah diseleksi seperti pada blok kode dibawah ini.

    app.js :
    document.querySelector("#tombol").click()​


    Hal ini juga dapat kita lakukan pada elemen-elemen lainya seperti elemen a dan tidak hanya melakukan klik, tetapi kita juga dapat menggunakan DOM untuk melakukan aksi lainya seperti menggeser layar ke suatu elemen dalam dokumen menggunakan fungsi .scrollIntoView() atau memfokuskan pengguna ke salah satu elemen input menggunakan fungsi .focus().

  4. Merespon terhadap aksi yang terjadi pada elemen
    Pada saat kita melakukan klik pada tombol di contoh sebelumnya, kita ketahui bahwa tidak terjadi hal apapun setelah kita menekan tombol tersebut. Bagaimana jika kita ingin tombol tersebut menjalankan sebuah fungsi dimana fungsi tersebut akan menambah angka pada elemen span sebanyak 1 setiap kali tombol tersebut ditekan? Dan bagaimana jika kita ingin mengubah warna latar dan warna tulisan pada angka tersebut ketika angka lebih besar dari 3? Kedua hal tersebut dapat kita lakukan menggunakan fungsi .addEventListener(). Fungsi tersebut memiliki tugas untuk menjalankan suatu fungsi apabila suatu elemen diberikan aksi sesuai yang telah di deklarasi. Untuk lebih jelasnya, dapat dilihat pada blok kode dibawah.

    app.js :
    // Menyeleksi span dan button
    let tombol = document.querySelector("#tombol");
    let angka = document.querySelector("#angka");
    
    // Membuat fungsi 
    function tambahAngka() {
      angka.innerText = parseInt(angka.innerText) + 1;
    
      if (parseInt(angka.innerText) > 3) {
        angka.style.backgroundColor = "#ff0000";
        angka.style.color = "#ffffff";
      }
    }
    
    // Membuat fungsi tambahAngka() untuk dijalankan ketika tombol mendapatkan aksi klik
    tombol.addEventListener("click", tambahAngka);​

    Dengan begitu, setiap kali kita menekan tombol, maka angka akan bertambah sebanyak 1 dan apabila angka lebih besar dari 3, maka warna latar dan teks pada angka akan berubah.
Baca Juga : Perbedaan Web Application dan Website, Emang Beda?

Penutup

Tanpa kita sadari, DOM telah menjadi hal yang penting dan banyak kita gunakan sehari-hari dalam pengembangan web frontend. DOM memberi kita kemungkinan yang tak terbatas untuk menciptakan sebuah antarmuka aplikasi web yang interaktif dan kreatif.  Jadi, ayo, gunakan kreativitas kita masing-masing untuk menciptakan antarmuka web versi kita sendiri menggunakan DOM!

Sampai disini artikel ini ditulis. Saya berharap artikel ini dapat memberi kita ilmu dan dapat membantu dalam proyek-proyek kita selanjutnya. Terima kasih telah membaca. Sampai jumpa.


Eko Putra Wijaya

Eko Putra Wijaya

Jumat, 13 Agustus 2021

ARTIKEL TERKAIT

Magang lebih mudah dan bisa dilakukan dari mana saja dengan Program Magang Online Gamelab. Magang Bersertifikat, plus Pelatihan!

DAFTAR MAGANG

ARTIKEL POPULER

KATEGORI