Memahami DOM (Document Object Model) Pada Javascript

date 01 Apr 2021
date Sulfikardi
date 36
date Web Programming
Memahami DOM (Document Object Model) Pada Javascript

DOM (Document Object Model) adalah interface yang memungkinkan developer untuk memanipulasi konten, struktur, dan style situs web. Yang mana didalam object ini bukan hanya ada struktur, namun juga interaksi (behavior) beserta event-nya. Setiap isi dari HTML yang sudah dimuat dalam peramban web (web browser), bisa dimodifikasi melalui DOM.
Pada model DOM ini, setiap elemen html dipandang sebagai sebuah object. Setiap object bisa terdiri dari object-object lain, sama halnya dengan dokumen html yang terdiri dari elemen root (elemen <html>), elemen root terdiri dari elemen <head> dan elemen <body>, elemen <body> boleh jadi terdiri dari elemen <a>, <h1>, <p>, dst. Elemen-elemen pada dokumen html membentuk sebuah object document yang merupakan object dari dokumen html itu sendiri. 
DOM (Document Object Model) Selector digunakan untuk menyeleksi elemen dari suatu halaman web. Pada Javascript DOM Selector bisa kita lakukan dengan beberapa cara, diantaranya :
 

1. document.getElementById

digunakan untuk mengakses elemen DOM berdasarkan nilai properti id pada elemen. Hanya akan mengembalikan satu elemen DOM karena idealnya nilai properti id bersifat unik dalam satu dokumen. Jika terdapat lebih dari satu elemen dengan id yang sama, maka elemen yang pertama ditemukan akan dikembalikan.

<div id="card-product">
        <p class="product" id="product1">Produk 1</p>
        <p class="product">Produk 2</p>
        <p class="product">Produk 3</p>
        <p class="product">Produk 4</p>
        <p class="product">Produk 5</p>
    </div>
    <script>
        let paragraf = document.getElementById('product1')
        console.log(paragraf )
    </script>


2. document.getElementsByClassName

seperti namanya digunakan untuk memanggil seluruh elemen DOM dengan nilai properti class yang diberikan. Mengembalikan objek mirip array, yaitu HTMLCollection dari seluruh elemen DOM yang cocok.

<div id="card-product">
    <p class="product" id="product1">Produk 1</p>
    <p class="product">Produk 2</p>
    <p class="product">Produk 3</p>
    <p class="product">Produk 4</p>
    <p class="product">Produk 5</p>
</div>
    <script>
        let allParagraf = document.getElementsByClassName('product')
        console.log(allParagraf)
    </script>
 

3. document.getElementsByName

mengambil elemen berdasarkan nilai properti name. Mengembalikan HTMLCollection seperti getElementsByClassName.

<div id="card-product">
        <p class="product" id="product1">Produk 1</p>
        <input type="text" name="description" value="ini produk satu">
    </div>
    <script>
        let description = document.getElementsByName('description')
        console.log(description)
    </script>

4. document.getElementsByTagName

memilih elemen-elemen dengan tag HTML tertentu. Sama seperti semua fungsi yang mengembalikan banyak elemen DOM, memberikan nilai berupa HTMLCollection.

<div id="card-product">
        <p class="product" id="product1">Produk 1</p>
        <input type="text" name="description" value="ini produk satu">
    </div>
    <script>
        let paragraf = document.getElementsByTagName('p')
        console.log(paragraf )
    </script>
 

5. document.querySelector

mencari elemen DOM pertama yang sesuai dengan aturan selector CSS yang diberikan ke fungsi.

<div id="card-product">
        <p class="product" id="product1">Produk 1</p>
        <p class="product">Produk 2</p>
        <p class="product">Produk 3</p>
        <p class="product">Produk 4</p>
        <p class="product">Produk 5</p>
        <input type="text" name="input-product" value="produk 6">
    </div>
    <script>
        let paragraf = document.querySelector('p#product1')
        console.log(paragraf)
    </script>
 

6. document.querySelectorAll

sama seperti querySelector, tetapi mengembalikan semua elemen yang memenuhi aturan (bukan hanya elemen pertama). Fungsi ini mengembalikan NodeList, bukan HTMLCollection.

<div id="card-product">
        <p class="product" id="product1">Produk 1</p>
        <p class="product">Produk 2</p>
        <p class="product">Produk 3</p>
        <p class="product">Produk 4</p>
        <p class="product">Produk 5</p>
        <input type="text" name="input-product" value="produk 6">
    </div>
    <script>
        let allParagraf = document.querySelectorAll('.product')
        console.log(allParagraf)
    </script>

 

Node List : adalah suatu kumpulan node yang memiliki berberapa tipe , tapi disini semua node tersebut kita sebut dengan nama “ node list”
Html Collection : adalah suatu kumpulan node juga, akan tetapi hanya yang memiliki tipe node element saja.
 

Perbedaan NodeList & Html Collection

  •  Keduanya merupakan sebuah kumpulan node.
  •  Keduanya mirip seperti array.
  •  NodeList boleh berisi node dengan tipe apapun, sedangkan html Collection harus berisi elemen html saja.
  •  Html Collection bersifat live sedangkan node list tidak.



 

blog-author

Sulfikardi

Artikel Terkait

Halo, ada yang bisa kami bantu?