[100% Mahir] Apa itu DOM di Javascript

DOM merupakan kependekan dari Document Object Model, DOM ini yakni object model standar bagi XML dan HTML yang memiliki sifat platform independent. Saat membuka sebuah halaman web pada browser, maka file HTML dari web akan dimuat serta ditampilkan pada layar perangkat. Nah, saat proses render file HTML berlangsung, browser akan membuat DOM atau model objek dokumen yang merupakan model berorientsi objek dari struktur logicnya.

Objek dari dokumen tersebut menyediakan sekumpulan fungsi serta data atau atribut yang dapat dimanfaatkan ketika membuat program Javascript. Hal inilah yang dimaksud dengan API (Applicatio Programming Interface). Untuk lebih jelasnya, silahkan simak ulasannya lengkap berikut ini.

Apa itu DOM di Javascript?

Sebenarnya, DOM tidak hanya ada di Javascript saja namun juga terdapat pada bahasa pemrograman lain.

Di tingkat paling dasar, situs sebuah web terdiri atas dokumen HTML serta CSS. Browser membuat representasi dokumen yang biasa disebut dengan DOM (Document Object Model). Dokumen tersebut memungkinkan Javascript dapat mengakses serta memanipulasi elemen dan juga style situs web. Model ini diatur dalam struktur ojek serta mendefinisikan:

Properties dan event elemen HTML
Elemen HTML sebagai objek
Method guna mengakses elemen HTML

Objek dokumen merupakan model dokumen HTML yang berisi kumpulan fungsi serta atribut berupa objek berdasarkan elemen HTML yang dapat diilustrasikan dengan bentuk pohon seperti di bawah ini:

Apa itu DOM di Javascript

Struktur seperti pohon ini akan memudahkan Anda dalam memakai elemen tertentu. Elemen-elemen di atas disebut node. Tidak hanya elemen, namun atribut elemen dan teks juga memiliki node tersendiri, yaitu attribute-node untuk atribut elemen dan text- node untuk teks.

DOM Document

DOM Document merupakan semua objek yang terdapat dalam halaman web Anda. ketika ingin mengakses objek apa pun pada halaman web, maka Anda akan selalu mengawalinya dengan dokumen tersebut. terdapat begitu banyak method dan juga properties enting yang dapat Anda gunakan guna memodifikasi serta mengakses situs web.

Cara Mendapatkan Elemen HTML

Mendapatkan Elemen dengan Nama Kelas

getElementByClassName() adalah method yang bisa menghasilkan lebih dari satu objek. Dari sini Anda akan memperoleh seluruh item dengan kelas list-item lalu menyimpannya ke dalam variabel.

var items = document.getElementsByClassName(‘list-items’);

Mendapatkan Elemen dengan ID

Anda juga bisa memperoleh lebih dari satu objek jika menggunakan method getElementById(). Perhatikan contoh berikut ini:

var title = document.getElementById(‘header-title’);

Dari situlah Anda akan mendapatkan elemen dengan id header-title, kemudian akan disimpan ke dalam variabel.

Mendapatkan Elemen dengan Nama Tag

Anda juga bisa mendapatkan elemen nama tag dengan method getElementBtTagName(). Seperti contoh di bawah ini:

var listItems = document.getElementsByTagName(‘li’);

Dari sini Anda akan memperoleh semua elemen li dari dokumen HTML kemudian akan menyimpannya ke dalam variabel.

Queryselector

Method querySelector() dapat membantu Anda untuk mengembalikan elemen pertama yang sesuai dengan CSS selector yang sebelumnya telah ditentukan. Hal ini berarti bahwa Anda dapat memperoleh elemen dengan kelas, id, tag serta semua CSS selector yang valid. Di bawah ini merupakan daftar beberapa pilihan yang terpopuler.

Get by class :

var items = document.querySelector(‘.list-items’)

Get by id :

var header = document.querySelector(‘#header’)

Get by tag :

var headings = document.querySelector(‘h1’);

Memperoleh Elemen yang Lebih Spesifik

Ingin memperoleh elemen yang lebih spesifik? Tenang saja, dengan CSS Selector Anda juga dapat memperoleh elemen yang lebih spesifik. Yaitu:

document.querySelector(“h1.heading”);

Contoh di atas adalah ketika Anda mencari kelas dan tag secara bersamaan serta mengembalikan elemen pertama yang melalui CSS Selector.

Queryselectorall

Jika sebelumnya Anda telah memahami tentang method querySelector(), maka method querySelectorAll() ini dapat dikatakan sepenuhnya sama atau serupa dengan method querySelector() tersebut. Hanya saja memiliki perbedaan ketika mengembalikan semua elemen yang sama dengan CSS Selector.

var heading = document.querySelectorAll(‘h1.heading’);

Dalam contoh di atas, Anda akan memperoleh semua tag h1 yang mempunyai kelas heading dan selanjutnya disimpan dalam array.

Menambah dan Menghapus Elemen

HTML DOM akan memungkinkan Anda untuk menambah elempen baru maupun menghapus elemen yang sebelumnya sudah ada.

Menambahkan Elemen

Sebagai contoh, Anda hanya akan membuat elemen div dengan method createElement() yang mengambil tagname untuk parameternya dan kemudian disimpan ke dalam variabel. Jika sudah, Anda hanya perlu memberikan beberapa konten lalu memasukkannya ke dokumen DOM.

Di bawah ini contoh sintaks yang digunakan untuk menambahkan elemen:

var div = document.createElement(‘div’);

selanjutnya, Anda akan membuat konten dengan method createTextNode() menggunakan sebuah String untuk parameternya dan memasukkan elemen div yang baru sebelum div yang lama ada dalam dokumen Anda.

var newContent = document.createTextNode(“Hello World!”); div.appendChild(newContent);

document.body.insertBefore(div, currentDiv);

Menghapus Elemen

Dari sini Anda akan memperoleh elemen serta menghapusnya dengan method removeChild(). Nah, berikut ini adalah contok sintkas yang digunakan untuk menghapus elemen:

var elem = document.querySelector(‘#header’); elem.parentNode.removeChild(elem);

Mengganti Elemen

Untuk mengganti elemen, coba perhatikan contoh sintaks berikut ini:

var div = document.querySelector(‘#div’); var newDiv = document.createElement(‘div’); newDiv.innerHTML = “Hello World2” div.parentNode.replaceChild(newDiv, div);

Dari sintkas di atas, Anda bisa mengganti elemen dengan method replaceChild(). Di mana argumen pertama merupakan elemen baru, sementara argumen kedua merupakan elemen yang ingin diganti.

Menulis Langsung ke HTML Output Stream

Selain cara-cara sebelumnya, ternyata Anda juga bisa menulis ekspresi HTML serta JavaScript langsung pada HTML outpit stream dengan method write(). Perhatikan sintaks di bawah ini:

document.write(“<h1>Hello World!</h1><p>This is a paragraph!</p>”);

Anda juga bisa meneruskan ekspresi JavaScrip, misalnya objek tanggal. Sehingga:

document.write(Date());

Selain itu, method write() juga bisa mengambil beberapa argumen yang nantinya akan ditambahkan ke dokumen yang disesuaikan dengan kemunculannya.

Mengubah Elemen HTML

HTML DOM memungkinkan pengguna untuk mengubah style serta konten dari elemen HTML dengan cara mengubah propertinya.

Mengubah Nilai Artibut

DOM memungkinkan Anda untuk mengubah nilai atribut. Sebagai contoh, Anda akan mengubah src dari seluruh tag <img /> menjadi test.jpg. Sementara contoh sintkas yang digunakan yaitu:

document.getElementsByTag(“img”).src = “test.jpg”;

Mengubah HTML

Properti innerHTML bisa juga diterapkan untuk mengubah konten elemen HTML. Misalnya Anda akan memperoleh elemen menggunakan id header serta mengatur konten inner menjadi “Hay Love!”.Maka sintaks yang digunakan seperti di bawah ini.

document.getElementById(“#header”).innerHTML = “Hay Love!”;

Di samping itu, innerHTML juga bisa diterapkan untuk menempatkan tag satu di tag yang lain. misalnya:

document.getElementsByTagName(“div”).innerHTML = “<h1>Hay Love!</h1>”

Dengan demikian, Anda akan menempatkan tag h1 ke semua div yang sebelumnya sudah ada.

Mengubah Style

Sebelum mengubah style elemen pada HTML, Anda perl mengubah properti style elemen terlebih dahulu. Adapun contoh sintkas yang digunakan untuk mengubah style elemen yaitu:

document.getElementById(id).style.property = new style

Setelah itu, coba perhatikan contoh sintaks berikut ini, yang mana digunakan untuk mendapatkan elemen serta mengubah batas bawah menjadi garis hitam pekat :

document.getElementsByTag(“h1”).style.borderBottom = “solid 3px #000”;

Perlu diketahui, bahwa properti CSS harus ditulis dengan camelcase tidak dengan nama properti css normal. Seperti pada contoh di atas, yakni menggunakan borderBottom.

Event Handlers

Tidak hanya memungkinkan Anda untuk melakukan hal-hal di atas, namun HTML DOM juga memungkinkan Javascript bereaksi dengan HTML event. Adapun beberapa hal yang paling penting dan harus diperhatikan yaitu:

Page load
Input field change
Mouse click
Mouse move

Assign Events Listeners

Untuk contoh sederhananya, Anda hanya akan menetapkan clickevent yang menggunakan method runEvent saat mengetuk elemen ‘btn’. Adapun contoh sintaks guna menentukan event listeners ke eleme HTML yaitu:

document.getElementById(“btn”)addEventListener(‘click’, runEvent);

Selain itu, Anda juga bisa menetapkan beberapa event ke dalam satu eleme saja, sehinga:

document.getElementById(“btn”)addEventListener(‘mouseover’, runEvent);

Node Relationships

Node pada DOM Document mempunyai hubungan yang satu dengan yang lain dan terbentuk seperti pohon. Hal tersebut dikenal dengan istilah parent, sibling dan juga child guna menggambarkan hubungan yang terjalin antar node.

Node yang teratas disebut dengan root, dimana adalah satu-satunya node yang tidak mempunyai parent. Tag <html/> merupakan root dalam dokumen HTML yang normal, hal ini disebabkan root tidak mempunyai parent serta menjadi tag paling atas dalam dokumen.

Menavigasi Antar Node

Menavigasi antar node dapat dilakukan dengan menggunakan properti, antara lain:

nextSibling
lastChild
firstChild
childNodes
parentNode

sementara untuk memperoleh elemen parent dari h1, Anda dapat memperhatikan contohnya seperti di bawah ini:

var parent = document.getElementById(“heading”).parentNode

Assign Events

Event pada kode HTML bisa ditentukan dengan atribut pada tag Anda. adapun conton event onclick yaitu:

<h1 onclick=”this.innerHTML = ‘Hello!’”>Click me!</h1>

Pada contoh tersebut, teks <h1 /> akan diubah menjadi “Hay!” ketika Anda menekannta tombolnya.

Nah, sekarang Anda sudah paham bukan apa itu DOM di Javascript? Ingin contoh yang lebih bervariasi? Baiklah, simak contoh berikut ini ya!.

Contoh Lain

Sebagai contoh Anda memiliki kode HTML:

<div id=”tutorial”></div>

Maka, Anda dapat menggunakan fungsi getElementByI() untuk memilih elemen pada Javascript, sehingga:

// memilih elemen dengan id ‘tutorial’

var tutorial = document.getElementById(‘tutorial’);

variabel tutorial nantinya akan menjadi objek DOM dari elemen yang dipilih. Adapun contoh yang lebih kompleks bisa Anda lihat berikut ini:

<!DOCTYPE html>

<html>

<head>

<title>Memilih Elemen Berdasarkan ID</title>

</head>

<body>

<!– Elemen div yang akan kita pilih dari JS –>

<div id=”tutorial”></div>

<script type=”text/javascript”>

// mengakses elemen tutorial

var tutorial = document.getElementById(“tutorial”);

// mengisi teks ke dalam elemen

tutorial.innerText = “Tutorial Javascript”;

// memberikan CSS ke elemen

tutorial.style.backgroundColor = “gold”;

tutorial.style.padding = “10px”;

</script>

</body>

</html>

Maka akan menghasilkan:

Apa itu DOM di Javascript

Dari contoh di atas, Anda memilih elemen dengan method document.getElementById(), kemudian membuat objek untuk elemen tersebut. Jika sudah, maka Anda dapat melakukan apapun seperti yang diinginkan, misalnya mengubah style dan teks CSS.

Akan tetapi jika elemen yang dipilih lebih dari satu, misalnya atribut class atau nama tag maka elemen tersebut menjadi sebaug array. Yang mana array akan berisi DOM dari elemen-elemen yang telag Anda pilih.

Misalnya:

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>

<title>DOM API Javascript</title>

</head>

<body>

<p class=”paragraf”>Lorem ipsum dolor sit amet consectetur adipisicing elit.

Quo quaerat recusandae qui ullam eaque cumque ea fugit,

debitis commodi ipsum illo dolorum consequatur sed laudantium suscipit quis magni,

maiores in?</p>

<p class=”paragraf”>Lorem ipsum dolor sit amet consectetur adipisicing elit.

Quo quaerat recusandae qui ullam eaque cumque ea fugit,

debitis commodi ipsum illo dolorum consequatur sed laudantium suscipit quis magni,

maiores in?</p>

<p class=”paragraf”>Lorem ipsum dolor sit amet consectetur adipisicing elit.

Quo quaerat recusandae qui ullam eaque cumque ea fugit,

debitis commodi ipsum illo dolorum consequatur sed laudantium suscipit quis magni,

maiores in?</p>

<script>

var paragraf = document.getElementsByClassName(“paragraf”);

console.log(paragraf);

</script>

</body>

</html>

Pada contoh di atas, Anda mempunyai tiga paragraf yang dinamai dengan class paragraf. Kemudian Anda bisa menggunakan method getElemenByClassName() untuk memilih tida paragraf tersebut melewati Javascript. Dan lihat hasilnya dalam console Javascript di bawah ini.

Variabel paragraf akan memuat sebuah array yang mana array tersebut berisi tiga buah objek DOM paragraf. Hal lain juga bisa Anda lakukan, misalnya mengubah warna teks paragraf pertama.

Paragraf pertama berada di posisi indeks 0 di dalam array, sehingga sintkas yang akan diinput dalam console Javasript yaitu:

paragraf[0].style.color = “red”

Dengan begitu, warna teks paragraf pertama pun menjadi warna merah.

Berhasil bukan? sekarang coba untuk membuat sebuah animasi warna dengan mengubah kode javascript tersebut menjadi :

<script>

var paragraf = document.getElementsByClassName(“paragraf”);

setInterval(function () {

paragraf[0].style.color = “red”;

paragraf[1].style.color = “green”;

paragraf[2].style.color = “blue”;

setTimeout(function () {

paragraf[0].style.color = “black”;

paragraf[1].style.color = “black”;

paragraf[2].style.color = “black”;

}, 500)

}, 1000);

</script>

Taksis tersebut menggunakan method setInterval() dan method setTimeOut() sebagai durasi waktu animasi. Pada kode tersebut, interval atau rentang waktu diatur selama 1000 milidetik atau 1 detik. Sementara untuk berubah warna menjadi hitam, kode tersebut diberi interval 500 milidetik atau setara setengah detik. Dengan begitu, ketiga paragraf tersebut akan berubah dari warna masing-masing ke warna hitam secara bergantian sesuai dengan interval waktu yang diberikan.

Kini Anda sudah mengerti bukan apa itu DOM di Javascript dan berbagai method yang dimiliki? Pada dasarnya, DOM tidak hanya digunakan pada Javascript saja melainkan juga terdapat di bahasa pemrograman lain dalam kegunaan yang lebih luas.

[100% Mahir] Apa itu DOM di Javascript

Apa itu DOM di Javascript?

DOM Document