Tegalinfo > Apa Itu DOM? Pengertian, Fungsi, hingga Mengenal Elemennya

DOM adalah antarmuka pemrograman yang dapat membuat semua komponen halaman website dapat diakses dan dimanipulasi dengan menggunakan bahasa pemrograman, sehingga website dapat menjadi dinamis, menarik dan interaktif.

BACA JUGA: Apa itu ReactJS? Pengertian, kelebihan dan cara pemasangan

Pertimbangkan sebuah contoh skrip HTML berikut ini:

Dari skrip HTML Sederhana Pada gambar di atas, Anda dapat melihat bahwa browser mewakili halaman situs web sebagai Model Objek Dokumen. Anda dapat melihat Model Objek Dokumen melalui menghibur menggunakan Elemen Inspeksi. Dari sana Anda dapat melihat elemen HTML mana yang dapat ditanganinya.

DOM disimpan sebagai pohon hierarki, atau banyak yang menyebutnya Pohon DOM karena representasinya mirip dengan pohon (terbalik): ada akar, ada cabang, dan seterusnya.

Contoh Diagram DOM Sederhana

Untuk memahami lebih lanjut tentang DOM, pertimbangkan sebuah contoh skrip sederhana selanjutnya.

<p> Ini adalah detail price list 
<a href="
di dalamnya
</p>

Dari skrip Dengan demikian, pohon hierarkis dapat dibuat sebagai berikut:

Tag utama dalam skrip adalah ‘ps‘, yang dibagi menjadi beberapa node. Ada tulisan ‘Ini adalah daftar harga rinci.‘, tag’sebuah‘ yang memiliki atributmenulis ‘di dalam dirinya‘, dll. Setiap kotak dan lingkaran di atas disebut sebagai node/kami.

fungsi DOM

Fungsi utama DOM adalah memanipulasi halaman website melalui tag HTML. Dengan DOM, Anda dapat memodifikasi, mengambil, menambahkan, atau menghapus elemen HTML.

Objek dokumen yang dihasilkan akan menyediakan kumpulan data, fungsi, dan atribut. Objek ini dapat digunakan untuk membuat API atau Antarmuka Pemrograman Aplikasidan mengambil data di situs web menggunakan metode pengikisan web.

Cara menggunakan DOM

Pada bagian ini, kami akan mendemonstrasikan beberapa contoh manipulasi dasar yang umum digunakan menggunakan Javascript.

1. Mengambil Elemen HTML

Berikut ini adalah contoh cara mengambil elemen HTML dari DOM.

Mendapatkan elemen menggunakan ID

Pengambilan elemen HTML dapat dilakukan dengan menggunakan metode getElementByID() disimpan dalam variabel. Contoh:

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

Dari perintah ini, DOM Javascript akan mengambil elemen dengan ID judul tajuk dan menyimpannya dalam variabel bernama judul.

Mendapatkan elemen menggunakan kelas

Juga, Anda dapat mengambil elemen HTML menggunakan metode kelas berdasarkan pesanan getElementsByClassName() dan menyimpan hasilnya dalam sebuah variabel. Contoh:

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

Berbeda dengan cara mendapatkan elemen menggunakan ID, kelas DOM Javascript akan mengambil semua elemen item daftar beserta elemen kelas tersebut.

Mendapatkan elemen menggunakan nama tag

Anda bisa mendapatkan lebih dari satu elemen menggunakan nama tag getElementsByTagName().Contoh:

var list-Items = document.getElementsByTagName(‘li’);

Melalui kueri Dengan pemikiran tersebut, Javascript DOM akan mengambil elemen dengan tag li dan menyimpannya dalam variabel list-Items.

2. Mengubah Elemen HTML

DOM adalah antarmuka yang memungkinkan Anda melakukan perubahan pada struktur, tampilan elemen HTML, dan konten melalui berbagai metode.

Mengubah elemen HTML menggunakan html internal digabungkan dengan identitas

Dalam contoh ini, kita akan menggunakan innerHTML dengan ID header, lalu menyetel konten dalam ke “Hey, I like to code”.

Jadi, sintaksnya adalah sebagai berikut:
document.getElementById(“#header”).innerHTML = “Halo, saya suka pemrograman”;

menggabungkan html internal dengan metode getElementsByTagName()

Dengan metode keduanya, sintaksnya adalah sebagai berikut:
document.getElementsByTagName(“div”).innerHTML = “

Hai, saya suka memprogram

”

3. Menambah dan Menghapus Elemen HTML

Berikut adalah contoh DOM untuk menambah dan menghapus elemen HTML.

Menambahkan Elemen HTML

Menambahkan elemen HTML dapat dilakukan dengan metode buatElemen(). Contoh kueri adalah sebagai berikut:

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

Dengan metode ini, DOM Javascript akan membuat elemen bernama div, lalu Anda dapat mengisi elemen dengan konten yang diinginkan. Contoh:

var newContent = document.createTextNode("Ini Adalah Javascript DOM");
div.appendChild(newContent);
document.body.insertBefore(div, currentDiv);

Menghapus Elemen HTML

Penghapusan elemen HTML dapat dilakukan dengan menggunakan metode hapusAnak(). Contoh:

var element = document.querySelector('#header'); 
elem.parentNode.removeChild(element);

Kesimpulan

Browser menampilkan halaman web dalam bentuk Document Object Model (DOM). Dengan DOM, Anda dapat memanipulasi setiap elemen HTML menggunakan bahasa pemrograman, salah satunya adalah Javascript.

Melalui penjelasan di atas, dapat disimpulkan bahwa DOM adalah antarmuka bahasa pemrograman berbasis objek yang merepresentasikan dokumen website. Dengan mempelajari DOM, kita dapat membuat website yang dinamis, menarik dan interaktif.

Demikian penjelasan kami mengenai apa itu DOM dan bagaimana cara menggunakannya. Jika Anda membutuhkan hosting kuat dengan harga terjangkau, paket hosting murah Rumahweb adalah jawabannya. Rumahweb siap menangani semua kebutuhan server dan website Anda!