Pengertian Dasar Mengenai DOM

Document Object Model (DOM) adalah sebuah antarmuka pemrograman (programing interface) untuk HTML, XML dan SVG yang bersifat cross platform dan language-independent. Sebuah web browser tidak harus menggunakan DOM untuk menampilkan dokumen HTML.

Namun DOM diperlukan oleh JavaScript yang akan mengubah tampilan sebuah website secara dinamis. Dengan kata lain, DOM adalah cara JavaScript melihat suatu halaman HTML.

W3C mulai mengembangkan DOM pada awal 1990-an. Pada bulan Oktober 1998, DOM 1 diluncurkan. Spesifikasi DOM W3C terbagi menjadi beberapa tingkat. Sebuah halaman yang mendukung suatu level harus menerapkan semua persyaratan level tersebut dan di bawahnya.

Sebelum ada standar DOM dari W3C, masing-masing web browser memiliki DOM sendiri. Akibatnya, bila suatu website ingin ditampilkan secara cross-browser compatible, ia harus dirancang untuk setiap web browser yang akan didukung. DOM standar mempermudah pengembangan aplikasi web.

Apa itu Bootstrap ?

A. Pengertian dan Penjelasan DOM
Model Objek Dokumen W3C (DOM) adalah antarmuka yang tidak berpihak kepada platform dan bahasa tertentu yang memungkinkan program dan skrip untuk mengakses dan memperbarui konten, struktur dan gaya dokumen secara dinamis.

Ilustrasi DOM

Ada 3 Jenis DOM :

1. Model standar DOM inti untuk semua jenis dokumen
2. XML DOM: Model standar untuk dokumen XML
3. HTML DOM: Model standar untuk dokumen HTML

HTML DOM
DOM HTML adalah model objek standar dan antarmuka pemrograman untuk HTML.

DOM HTML mendefinisikan :

• Elemen-elemen HTML sebagai objek
• Properti seluruh elemen HTML
• Metode untuk mengakses semua elemen HTML
• Event untuk semua elemen HTML

Merupakan standar untuk mendapatkan, mengubah, menambah atau menghapus elemen HTML. DOM HTML menggunakan bahasa pemrograman untuk mengakses objeknya (biasanya Javascript). Semua elemen yang ada di HTML akan diperlakukan sebagai objek.

HTML DOM Tree of Objects
Model HTML DOM dibangun sebagai pohon Objek.Berdasarkan standar DOM HTML W3C, segala sesuatu didalam sebuah halaman web adalah simpul :

• Dokumen HTML adalah simpul/node document
• Setiap elemen HTML adalah simpul/node element
• Teks dalam elemen HTML adalah simpul/node text
• Setiap atribut HTML adalah simpul/node atribut
• dll

Node, NodeList, & HTMLCollection

• node =jika memilih salah satu dari struktur DOM tree.
• nodeList=jika memilih lebih dari satu node tidak peduli tipe node apa yang dipilih
• HTMLCollection= Kumpulan node khusus yang memiliki tipe element HTML saja.

NodeList vs HTMLCollection

• Keduanya merupakan kumpulan node
• Struktur data mirip array (namun bukan array)
• nodeList dapat berisi node apapun sedangkan HTMLCollection harus berisi elemen HTML
• HTMLCollection bersifat live sedangkan nodeList tidak.

Struktur Hierarki DOM

1. Root Node
• node yang menjadi sumber dari semua node lain di dalam DOM
• document
2. Parent Node
• node yang berada 1 tingkat diatas node yang lain
• contoh: body adalah parent dari h1 dan a
3. Child Node
• node yang berada 1 tongkat dibawah node yang lain
• h1 adalah child dari body
• child node tidak peduli tipe nodenya apa (teks,atribut,elemen,dll)

B. DOM Selector
DOM Selection adalah proses memilih elemen-elemen DOM menggunakan Javascript. Tahap awal ketika ingin melakukan manipulasi atau melakukan penelusuran pada DOM adalah proses penyeleksian elemen.

Dimana proses tersebut bertujuan untuk melakukan modifikasi seperti merubah attribut, menambahkan class, merubah style, text dan masih banyak lagi perubahan yang dapat dilakukan. Untuk melakukan proses tersebut maka dibutuhkan suatu pengenal atau identitas dari suatu elemen yang bisa kita sebut sebagai DOM Selector.

DOM Selector digunakan untuk menyeleksi elemen dari suatu halaman web.

DOM Selection Method (DOM Selector)

• getElementById() berfungsi untuk memilih elemen berdasarkan atribut id. Mengembalikan hasil berupa sebuah element.
• getElementsByClassName() berfungsi untuk memilih elemen berdasarkan atribut class.Mengembalikan hasil berupa HTMLCollection
• getElementsByTagName() berfungsi untuk memilih elemen berdasarkan nama tag. Mengembalikan hasil berupa HTMLCollection
• querySelector() berfungsi untuk memilih elemen berdasarkan query. Mengembalikan hasil berupa sebuah element
• querySelectorAll() berfungsi untuk memilih elemen berdasarkan query. Mengembalikan hasil berupa nodeList

DOM Selector getElementById()
Metode ini adalah salah satu metode paling umum di DOM HTML, dan sering digunakan ketika memanipulasi, atau mendapatkan info dari, elemen di dokumen. Metode getElementById () menyeleksi elemen dengan menggunakan ID pada element tersebut dan mengembalikan elemen yang memiliki atribut ID dengan nilai yang telah ditentukan.

Mengembalikan null jika tidak ada elemen dengan ID yang ditentukan. Sebuah ID harus unik dalam sebuah halaman.

Sintaks yang digunakan adalah:
document.getElementById(elementID)

Contoh getElementById()
<!DOCTYPE html>
<html>
<body>
<p id="demo">Klik tombol untuk mengubah warna paragraf ini.</p>
<button onclick="myFunction()">coba</button>
<script>
function myFunction() {
var x = document.getElementById("demo");
x.style.color = "red";
}</script>
</body>
</html>

Ketika klik tombol coba maka tulisan akan menjadi berwarna merah. Elemen yang dipilih dengan method getElementById() adalah elemen id demo DOM Selector getElementsByClassName() Metode getElementsByClassName() untuk memilih elemen berdasarkan atribut class dan mengembalikan kumpulan semua elemen dalam dokumen dengan nama kelas yang ditentukan.

Sebagai objek HTMLCollection yang merepresentasikan kumpulan node. Node dapat diakses dengan nomor indeks yang dimulai dari 0. Dapat menggunakan properti length dari objek HTMLCollection untuk menentukan jumlah elemen dengan nama kelas yang ditentukan, kemudian dapat mengulang(loop) semua elemen dan mengekstrak info yang diinginkan.

Sintaks yang digunakan adalah :
document.getElementsByClassName(classname)

Contoh getElementsByClassName() :
<!DOCTYPE html>
<html><body>
<div class="example">Elemen div pertama dengan class = "example".</div>
<div class="example">Elemen div kedua dengan class = "example".</div>
<p> Klik tombol untuk mengubah teks diatas menjadi a(baris1) dan b(baris2)</p>
<button onclick="myFunction()">coba</button>
<script>
function myFunction() {
var x = document.getElementsByClassName("example");
x[0].innerHTML = "a";
x[1].innerHTML = "b";
}</script></body></html>

Ketika klik tombol maka akan mengubah teks dari elemen div pertama dengan class = "example" menjadi a dan elemen div kedua dengan class = "example" menjadi b. Elemen yang dipilih dengan method getElementsByClassName adalah elemen div class="example" indeks 0 dan 1 .

DOM Selector getElementsByTagName()
Metode getElementsByTagName () untuk memilih elemen berdasarkan nama tag dan mengembalikan kumpulan semua elemen dalam dokumen dengan nama tag yang ditentukan, sebagai objek HTMLCollection yang merepresentasikan kumpulan node. Node dapat diakses dengan nomor indeks yang dimulai dari 0.

Parameter "*" mengembalikan semua elemen dalam dokumen. Dapat menggunakan properti length dari objek HTMLCollection untuk menentukan jumlah elemen dengan nama tag yang ditentukan, kemudian dapat mengulang (loop) melalui semua elemen dan mengekstrak info yang diinginkan.

Sintaks yang digunakan adalah :
document.getElementsByTagName(tagname)

Contoh getElementsByTagName() :
<!DOCTYPE html>
<html><body>
<p> unordered list:</p>
<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
</ul>
<p>Klik tombol tersebut untuk mengetahui berapa banyak elemen li yang ada di dokumen ini.</p>
<button onclick="myFunction()">coba</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementsByTagName("LI");
document.getElementById("demo").innerHTML = x.length;
}
</script>
</body></html>

Ketika klik tombol maka akan muncul hasil dari jumlah total/ length dari elemen li. Hal ini dikarenakan elemen li telah diseleksi oleh method getElementsByTagName(). Setelah diseleksi barulah dilakukan perhitungan jumlah dari total elemen li yang ada.

DOM Selector querySelector()
Metode querySelector() untuk memilih elemen berdasarkan query dan mengembalikan elemen pertama yang cocok dengan CSS Selector yang ditentukan dalam dokumen. Metode querySelector () hanya mengembalikan elemen pertama yang cocok dengan pemilih yang ditentukan.

Untuk mengembalikan semua kecocokan yang ada maka, gunakan metode querySelectorAll() sebagai gantinya. Jika selektor cocok dengan ID dalam dokumen yang digunakan beberapa kali ("id" harus unik dalam halaman dan tidak boleh digunakan lebih dari sekali), ini akan mengembalikan elemen pertama yang cocok.

Sintaks yang digunakan adalah:
document.querySelector(CSS selectors)
Contoh querySelector()
<!DOCTYPE html>
<html><body>
<h2 class="a">kalimat class a elemen pertama</h2>
<p class="a">kalimat class a elemen kedua</p>
<p>Klik tombol untuk menambahkan warna latar belakang merah ke elemen pertama dalam dokumen dengan class="a" .</p>
<button onclick="myFunction()">coba</button>
<script>
function myFunction() {
document.querySelector(".a").style.backgroundColor = "red";
}</script></body></html>

Ketika klik tombol coba maka background header akan menjadi berwarna merah. Elemen yang dipilih dengan method querySelector() adalah elemen class a elemen pertama yang cocok dengan selector.

DOM Selector querySelectorAll()
Metode querySelectorAll() untuk memilih semua elemen-elemen berdasarkan query dan mengembalikan semua elemen dalam dokumen yang cocok dengan CSS Selector yang ditentukan, sebagai objek NodeList statis yang merepresentasikan kumpulan node. Node dapat diakses dengan nomor indeks.

Indeks dimulai dari 0. Dapat menggunakan properti length dari objek NodeList untuk menentukan jumlah elemen yang cocok dengan selektor yang ditentukan, lalu dapat mengulang semua elemen dan mengekstrak info yang diinginkan.

Sintaks yang digunakan adalah :
document.querySelectorAll(CSS selectors)

Contoh querySelectorAll() :
<!DOCTYPE html>
<html>
<body>
<h2 class="a">heading class="a"</h2>
<p class="a"> paragraph class="a".</p>
<p>Klik tombol untuk menambahkan warna latar belakang semua elemen dengan class = "a". </p>
<button onclick="myFunction()">coba</button>
<script>
function myFunction() {
var x, i;
x = document.querySelectorAll(".a");
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}
}</script></body></html>

Ketika klik tombol coba maka background heading dan paragraph akan menjadi berwarna merah. Elemen yang dipilih dengan method querySelectorAll() adalah semua elemen class a yang cocok dengan selector.

Penggunaan DOM HTML
<!DOCTYPE html>
<html>
<body>
<h2>Latihan DOM</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script></body></html>

Keterangan :

• Pada contoh tersebut getElementById adalah sebuah metode dan innerHTML adalah properti.
• Cara yang biasa digunakan untuk mengakses suatu elemen HTML adalah menggunakan metode getElementById yang menggunakan atribut id dari elemen. Contoh tersebut metode getElementById menggunakan id=”demo” untuk menemukan elemen paragraf.
• Cara paling mudah untuk mendapatkan konten suatu elemen adalah menggunakan properti inner HTML. Properti ini dapat digunakan untuk memperoleh atau mengubah setiap elemen HTML termasuk <html> dan <body>

Method akan mencari id= demo dan inner akan memperoleh konten atau mengubah elemen pada paragraf yang memiliki id=demo

Metode DOM HTML

Mencari elemen HTML:

• getElementById() = mencari elemen berdasarkan atribut id.
• getElementsByClassName() = mencari elemen berdasarkan atribut class.
• getElementsByTagName() = mencari elemen berdasarkan nama tag.
• querySelector() = mencari elemen berdasarkan query.
• querySelectorAll() = mencari elemen berdasarkan query.

Mengubah elemen HTML:

• elemen.innerHTML= mengubah inner HTML dari elemen HTML
• element.setAttribute(atribut,nilai)= mengubah atribut elemen HTML
• element.style.property= mengubah style elemen HTML

Menambah dan menghapus elemen HTML:

• document.createElement() = membuat elemen HTML
• document.removeChild() = menghapus elemen HTML
• document.appendChild() = menambah sebuah elemen HTML
• document.replaceChild() = mengganti elemen HTML
• document.write(teks) = menulis teks ke layar

DOM Events
DOM HTML memungkinkan javascript bereaksi terhadap event HTML. Sebuah skrip javascript dapat dieksekusi ketika suatu event terjadi, misalnya ketika seorang pengguna melakukan klik terhadap suatu elemen HTML.

Untuk mengeksekusi kode ketika pengguna mengklik sebuah elemen, tambahkan kode JavaScript ke atribut event HTML: onclick=JavaScript

Contoh events HTML :

• Saat pengguna mengklik mouse
• Saat halaman web telah dimuat
• Saat gambar telah dimuat
• Saat mouse bergerak di atas sebuah elemen
• Saat kolom input diubah
• Saat formulir HTML dikirimkan
• Saat pengguna menekan tombol

Contoh DOM Events
<!DOCTYPE html>
<html><body>
<h1 onclick="changeText(this)">klik teks ini !</h1>
<script>
function changeText(id) {
id.innerHTML = "teks berubah!";
}
</script>
</body></html>

Hasil : Ketika tulisan “klik teks ini!” di klik maka tulisan akan berubah dan menampilkan “teks berubah!”

Sumber Referensi :

Website : W3Schools | W3Schools