Apa Itu DOM? Pengertian, Fungsi, Kenali hingga Elemennya

Halaman website dihasilkan dari beberapa bahasa pemrograman dan kode. Sehingga, dalam satu aplikasi website, terdapat banyak sekali baris kode, framework, API dan elemen lainnya yang diperlukan agar situs website berjalan dengan lancar tanpa adanya masalah kinerja. DOM adalah salah satu komponen penting yang memainkan peran integral secara intuitif dalam fungsi dinamis halaman website.

Document Object Model atau biasa disingkat dengan DOM bertindak sebagai penerjemah antara Javascript dan HTML. DOM merupakan representasi data objek yang membentuk struktur dan konten dokumen di Web. DOM memungkinkan para developer memanipulasi konten, struktur dan gaya situs website untuk membuat interface halaman website menjadi lebih dinamis dan interaktif.

Apa itu DOM JavaScript? 

DOM (Document Object Model) adalah interface pemrograman yang memungkinkan pengembang web mengubah tampilan  halaman web tanpa  memuat ulang halaman tersebut. DOM pertama kali dirilis oleh W3C (World Wide Web Consortium) sebagai “DOM Level 0” atau “Legacy DOM”. Versi DOM tersebut memiliki keterbatasan elemen  dibandingkan dengan versi DOM yang digunakan saat ini, yaitu DOM level 3.

DOM bukanlah bahasa pemrograman, namun tanpa DOM, bahasa JavaScript tidak akan memiliki model atau ide untuk halaman web, dokumen HTML, dokumen SVG, dan komponen lainnya. DOM merupakan API Web yang digunakan untuk membangun situs website. DOM dirancang agar tidak bergantung pada bahasa pemrograman, sehingga representasi struktural dokumen melalui satu API yang konsisten.

DOM disimpan sebagai pohon hirarki atau DOM Tree karena DOM memiliki representasi yang mirip seperti pohon terbalik dimana ada akar, ada cabang dan sebagainya. DOM dibangun dalam struktur objek dan mendefinisikan 

– Elemen HTML sebagai objek

– Properties dan event elemen HTML

– Method untuk mengakses elemen HTML

Untuk lebih jelasnya, perhatikan contoh script berikut :

Dari script diatas, maka didapatkan DOM Tree seperti dibawah ini 

Tag utama dalam script tersebut adalah ‘p’, yang dibagi menjadi beberapa node. terdapat ‘ini adalah detail price list’, tag ‘a’ yang memiliki atribut, tulisan ‘di dalamnya’, dan sebagainya. setiap kotak dan lingkaran di bagian atas disebut sebagai node.

Fungsi DOM

Fungsi utama DOM adalah memanipulasi halaman website agar lebih dinamis. DOM menyediakan cara bagi script seperti Javascript untuk berinteraksi dengan cara mengambil, mengubah, menambah maupun menghapus elemen HTML. Berikut ini adalah fungsi DOM secara lebih rinci antara lain sebagai berikut :

• Representasi struktural, DOM membuat representasi struktural elemen dalam dokumen. Setiap elemen dalam dokumen direpresentasikan sebagai objek dalam model,  membentuk struktur hierarki. Hal ini memungkinkan developer untuk mengakses dan memanipulasi elemen-elemen ini.
• Akses dan manipulasi konten, DOM menyediakan antarmuka untuk mengakses dan memanipulasi konten dokumen. Dengan menggunakan Javascript, developer dapat memanipulasi teks, atribut dan struktur elemen-elemen HTML atau XML sehingga halaman website lebih dinamis dan responsif.
• Interaktivitas, DOM memungkinkan developer membuat situs web  interaktif. JavaScript memungkinkan developer merespons tindakan pengguna secara dinamis tanpa refresh halaman.
• Animasi Dinamis, DOM  memungkinkan developer membuat animasi  responsif. Developer dapat membuat animasi yang menarik dan dinamis dengan mengubah properti CSS dan posisi elemen dalam DOM. Hal ini meningkatkan keindahan dan interaktivitas situs web.

Fungsi-fungsi ini menjadikan DOM berperan sangat penting dalam pengembangan web modern. Dengan memahami dan menggunakan DOM secara efektif, developer dapat membuat aplikasi web yang interaktif, responsif, dan dinamis.

Cara Menggunakan DOM

Berikut adalah beberapa contoh cara menggunakan DOM untuk manipulasi dasar yag biasa digunakan menggunakan Javascript.

1. Mengambil Elemen HTML

Terdapat beberapa metode DOM Javascript untuk mengambil elemen HTML, diantaranya

1.  Mengambil Elemen Menggunakan ID

Cara pertama untuk mengambil elemen HTML adalah dengan menggunakan metode getElementByID() yang kemudian disimpan dalam satu variabel. Berikut contoh scriptnya.

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

Pada contoh script ditas, dapat diketahui bahwa DOM mengambil elemen dengan ID “header-title” menggunakan metode getElementByID() kemudian menyimpannya ke dalam variabel bernama title.

2. Mengambil Elemen menggunakan Class

Metode ini menggunakan metode getElementsBYClassName() pada Javascript dan kemudian disimpan dalam satu variabel. Berikut contoh scriptnya.

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

Pada contoh script diatas, dapat diketahui bahwa semua item yang terdapat pada class list-items diambil oleh DOM dan kemudian disimpan dalan variabel items.

3. Mengambil Elemen menggunakan Nama Tag

Selanjutnya adalah metode getElementsByTagName() pada Javascript yang kemudian disimpan dalam suatu variabel. Berikut contoh Scriptnya.

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

Berdasarkan contoh script diatas, DOM Javascript akan mengambil semua elemen dengan tag li dari dokumen HTML, yang kemudian akan disimpan sebagai variabel listItems.

4. Mengambil Elemen menggunakan querySelector

DOM Javascript dapat digunakan untuk mengambil elemen CSS menggunakan metode querySelector. metode ini mengembalikan elemen pertama yang cocok dengan CSS selector yang ditentukan. Sehingga Developer bisa mendapatkan elemen menggunakan ID, Class TagName dan semua CSS selector yang valid. Berikut beberapa contoh scriptnya.

• Mengambil elemen CSS menggunakan ID

var header = document.querySelector(‘#footer)

• Mengambil elemen CSS menggunakan Class

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

• mengambil elemen CSS menggunakan TagName

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

• Mengambil elemen CSS secara lebih spesifik

document.querySelector(“h2.footer”);

Metode querySelector merupakan metode yang paling fleksibel dan efisien untuk mengakses dan memanipulasi elemen HTML pada halaman website. Metode ini sangat berguna dalam pengembangan website modern yang memiliki kompleksitas dan dinamika halaman website yang semakin meningkat.

2. Mengubah  Elemen HTML

DOM memungkinkan developer mengubah konten dan style elemen HTML dengan mengubah propertinya. Berikut terdapat beberapa metode mengubah elemen HTMl, antara lain

1. Mengubah konten HTML

Properti innerHTML digunakan untuk mengubah konten elemen HTML. Properti ini dikombinasikan dengan metode getElementByID(), berikut contoh scriptnya :

document.getElementById(“#header”).innerHTML = “Hello World!”;

Pada contoh script diatas terdapat elemen ID header dan mengatur konten inner menjadi ‘Hello World’. 

Selain itu, Properti innerHTML dapat digabung dengan metode getElementsByTagName() seperti contoh script berikut :

document.getElementsByTagName(“div”).innerHTML = “<h1>Hello World!</h1>”

2. Mengubah Value dari atribut

DOM Javascript tidak hanya bisa mengubah konten HTML, akan tetapi juga dapat mengubah value dari sebuah atribut. seperti script dibawah ini :

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

Pada script diatas, developer dapat mengubah src dari semua tag img menjadi test.jpg.

3. Mengubah Style/Tampilan

Untuk mengubah style atau tampilan elemen HTML, terlebih dahulu merubah properti style elemen. Berikut contoh script untuk mengubah style :

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

Setelahnya, dari script tersebut dapat diambil elemen tertentu untuk diubah stylenya. Untuk mengubah style dari borderBottom, maka script menjadi sebagai berikut :

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

3. Menambah dan Menghapus Elemen HTML

1. Menambah Elemen HTML

Untuk menambahkan elemen HTML dapat dilakukan dengan menggunakan metode createElement(). Berikut contoh seperti script :

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

Metode createElement() mengambil TagName sebagai parameter dan kemudian menyimpannya ke dalam suatu variabel. Selanjutnya dapat mengisi beberapa elemen dan kemudian memasukkan kedalam dokumen DOM, seperti script berikut :

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

div.appendChild(newContent);

document.body.insertBefore(div, currentDiv);

2. Menghapus Elemen HTML

Metode untuk menghapus elemen dapat menggunakan metode removeChild(). Berikut contoh scriptnya :

var elem = document.querySelector(‘#footer);

elem.parentNode.removeChild(elem);

3. Mengganti Elemen HTML

DOM Javascript memungkinkan untuk mengganti elemen yang sudah ada. Berikut contoh scriptnya :

var div = document.querySelector(‘#div’);

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

metode yang digunakan untuk mengganti elemen adalah menggunakan metode replaceChild(). Maka script akan berubah menjadi seperti dibawah ini :

newDiv.innerHTML = “Hello World2”;

div.parentNode.replaceChild(newDiv, div);

4. Menulis Elemen Langsung ke HTML Output Stream

DOM Javascript juga memiliki kemampuan untuk menggabungkan HTML dan Javascript dalam satu baris kode menggunakan metode write() seperti contoh script dibawah ini :

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

Selain itu, metode write() juga dapat dipakai untuk menginput objek seperti Date seperti ini :

document.write(Date());

Tertarik Untuk Menggunakan VPS dengan teknologi terbaik dari Nevacloud?

DOM atau Document Object Model berperan penting untuk membuat website modern menjadi lebih dinamis, interakif dan menarik. DOM mewakili setiap bagian dari dokumen website sebagai objek dan menyediakan bahasa pemrograman dengan metode-metode yang diperlukan untuk memanipulasi dan memodifikasi setiap elemen.Terlepas dari penjelasan mengenai DOM dan cara menggunakannya. Jika Anda mencoba menggunakan VPS murah dengan keamanan dan teknologi terbaik. Anda bisa menggunakan VPS murah dari Nevacloud.