Sebagai pengembang web pasti nya Anda sudah tidak asing lagi dengan istilah DOM atau Document Object Model. DOM merupakan konsep dimana memiliki penggunaan dalam membantu pengembangan suatu web. Terlebih lagi jika pada pembuatan tampilan dinamis serta interaktif.
Misalnya, jika kita ingin menambahkan elemen HTML baru ke dalam halaman website saat pengguna melakukan suatu tindakan, DOM dapat memberikan Anda akses untuk dapat menggunakan JavaScript untuk membuat baru dan menambahkannya ke dalam struktur DOM pada halaman website.
Untuk lebih lanjut mengetahui tentang fungsi dari DOM di javascript ini, mari simak artikel di bawah ini!
Apa Itu DOM
DOM atau Document Object Model adalah konsep fundamental di pengembangan website serta sangat penting dalam pemrograman JavaScript.
DOM adalah representasi dari dokumen dimana dibuka dalam browser, yang memungkinkan JavaScript memanipulasi konten dan struktur halaman web tersebut.
DOM adalah model objek dimana merepresentasikan setiap elemen dokumen atau XML sebagai objek dimana dapat diakses oleh JavaScript.
Setiap elemen diwakili oleh node dalam struktur hierarkis, serta setiap node memiliki properti dan metode yang dapat dimanipulasi melalui JavaScript.
DOM juga memungkinkan penggunaan event listener serta handler demi menangani interaksi pengguna, seperti mengklik tombol atau memasukkan data dalam form.
Dengan menggunakan event listener serta handler, kita dapat membuat halaman website dimana lebih interaktif serta responsif terhadap tindakan pengguna.
Secara keseluruhan, DOM adalah konsep penting dalam pengembangan website dan sangat erat kaitannya dengan JavaScript.
Untuk memahami DOM serta bagaimana JavaScript dapat memanipulasinya, kita dapat membuat tampilan laman yang lebih dinamis, interaktif, serta responsif terhadap interaksi pengguna.
Fungsi DOM
DOM adalah salah satu bagian fundamental dari JavaScript yang sangat penting dalam pembuatan tampilan halaman web dimana interaktif serta dinamis.
Fungsi DOM di JavaScript memungkinkan para developer untuk mengakses dan memanipulasi setiap elemen HTML dalam halaman website.
Beberapa fungsi DOM yang paling umum digunakan dalam JavaScript adalah sebagai berikut:
1. Menambahkan atau menghapus elemen HTML
Dengan adanya fungsi ini, developer bisa menambahkan atau menghapus elemen HTML dalam halaman website secara dinamis, tergantung pada interaksi pengguna atau keadaan lainnya.
Misalnya, ketika pengguna menekan tombol tertentu, kita dapat memanfaatkan penggunaan fungsi ini untuk menambahkan elemen HTML baru ke halaman web.
2. Mengubah isi Elemen HTML
Fungsi DOM juga memungkinkan developer untuk mengubah isi dari elemen HTML. Misalnya, kita dapat mengubah teks yang terdapat pada elemen HTML, mengganti gambar atau video, dan lain-lain.
3. DOM dapat menangani Event
Fungsi DOM memungkinkan developer demi menangani event dalam halaman web, seperti mengklik tombol, mengisi form, atau menggulir halaman. Ketika menangani event, DOM dapat membuat halaman web lebih interaktif serta responsif terhadap tindakan pengguna.
4. Menambah atau Menghapus CSS
Fungsi DOM juga memungkinkan developer demi menambahkan atau menghapus class CSS dalam elemen HTML. Ketika menambahkan atau menghapus class CSS, kita dapat mengubah tampilan halaman web secara dinamis.
Secara keseluruhan, fungsi DOM di JavaScript sangatlah penting dalam pembuatan tampilan halaman web interaktif dan dinamis.
Penggunaan fungsi DOM, developer dapat mengakses dan memanipulasi setiap elemen HTML pada halaman web, mengubah tampilan halaman web secara dinamis, menangani event, dan sebagainya.
Baca Juga: Laravel: Framework Para Developer yang Terbaik di Kelasnya!
DOM, Cara Mengambil Elemen HTML
Mengambil elemen HTML merupakan bagian penting di pengembangan web serta biasanya dilakukan dengan menggunakan JavaScript. Ada beberapa cara mengambil ini menggunakan JavaScript, di antaranya adalah:
1. Menggunakan getElementById()
Cara ini digunakan untuk mengambil elemen HTML dengan memanfaatkan atribut id dalam elemen tersebut. Kita dapat menggunakan fungsi getElementById() dengan menyertakan nilai id dimana ingin diambil. Fungsi ini akan mengembalikan objek dimana sesuai dengan nilai id yang diberikan.
2. Menggunakan getElementsByClassName()
Cara ini digunakan untuk mengambilnya ketika memanfaatkan atribut class tersebut. Kita dapat menggunakan fungsi getElementsByClassName() dengan menyertakan nilai class yang ingin diambil. Fungsi ini akan mengembalikan objek koleksi elemen HTML dimana sesuai dengan nilai class yang diberikan.
3. Menggunakan getElementsByTagName()
Cara ini digunakan untuk mengambil elemen HTML dengan memanfaatkan tag elemen tersebut. Kita dapat menggunakan fungsi getElementsByTagName() ketika menyertakan nilai tag elemen dimana ingin diambil. Fungsi ini akan mengembalikan objek koleksi sesuai dengan tag elemen yang diberikan.
4. Menggunakan querySelector()
Cara ini digunakan untuk mengambil elemen HTML menggunakan pemanfaatan selector CSS. Kita dapat menggunakan fungsi querySelector() bersamaan menyertakan selector CSS yang sesuai ke yang ingin diambil. Fungsi ini akan mengembalikan objek pertama yang sesuai dengan selector CSS yang diberikan.
Ketika melakukan pengembangan web, pengambilan elemen HTML sangatlah penting serta sering digunakan untuk melakukan manipulasi pada elemen tersebut.
Ketika menerapkan salah satu cara di atas, developer dapat mengambil elemen HTML yang dibutuhkan dan melakukan berbagai manipulasi seperti mengubah isi, menambahkan atau menghapusnya, mengatur tampilan, dan sebagainya.
Baca Juga: Mengulas Penggunaan HTML dan Cara Kerjanya pada Web Development
Properti pada DOM
DOM (Document Object Model) dalam JavaScript memiliki berbagai properti yang memungkinkan pengembang untuk mengakses dan memanipulasi elemen HTML dan struktur dokumen web. Berikut adalah beberapa properti DOM yang umum digunakan dalam JavaScript:
1. Document
document.documentElement: Mengacu pada elemen root dari dokumen, biasanya elemen<html>.document.body: Mengacu pada elemen<body>dari dokumen.document.head: Mengacu pada elemen<head>dari dokumen.document.title: Mengacu pada teks judul dari dokumen (isi dari elemen<title>).
2. Elements
element.id: Mengembalikan atau menetapkan nilai atributiddari elemen.element.className: Mengembalikan atau menetapkan nilai atributclassdari elemen.element.tagName: Mengembalikan nama tag dari elemen, sepertiDIV,SPAN, dll.element.innerHTML: Mengembalikan atau menetapkan HTML konten dari elemen.element.textContent: Mengembalikan atau menetapkan teks konten dari elemen, tanpa markup HTML.element.style: Mengakses atau menetapkan gaya CSS inline untuk elemen.element.attributes: Mengembalikan koleksi atribut dari elemen.
3. Node
node.parentNode: Mengembalikan node induk dari elemen atau node saat ini.node.childNodes: Mengembalikan koleksi dari semua node anak, termasuk node teks, dari node saat ini.node.firstChild: Mengembalikan node anak pertama dari node saat ini.node.lastChild: Mengembalikan node anak terakhir dari node saat ini.node.previousSibling: Mengembalikan node saudara sebelumnya dari node saat ini.node.nextSibling: Mengembalikan node saudara berikutnya dari node saat ini.
4. Attribute
element.getAttribute(attributeName): Mengembalikan nilai dari atribut yang ditentukan.element.setAttribute(attributeName, value): Menetapkan nilai baru untuk atribut yang ditentukan.element.removeAttribute(attributeName): Menghapus atribut yang ditentukan dari elemen.
5. Events
element.onclick: Menetapkan fungsi yang akan dijalankan ketika elemen diklik.element.onmouseover: Menetapkan fungsi yang akan dijalankan ketika kursor mouse berada di atas elemen.element.onmouseout: Menetapkan fungsi yang akan dijalankan ketika kursor mouse meninggalkan elemen.element.onkeyup: Menetapkan fungsi yang akan dijalankan ketika tombol dilepaskan pada elemen input.
6. Form Elements
inputElement.value: Mengembalikan atau menetapkan nilai dari elemen input seperti<input>,<textarea>, atau<select>.inputElement.checked: Mengembalikan atau menetapkan status centang dari elemen input jenischeckboxatauradio.inputElement.disabled: Mengembalikan atau menetapkan apakah elemen input dinonaktifkan.
7. Window
window.innerWidth: Mengembalikan lebar viewport jendela.window.innerHeight: Mengembalikan tinggi viewport jendela.window.location: Mengembalikan objek lokasi yang berisi informasi tentang URL saat ini.window.history: Mengembalikan objek yang memungkinkan manipulasi sejarah penelusuran pengguna.
Properti-properti ini memungkinkan pengembang untuk melakukan berbagai operasi pada halaman web, mulai dari manipulasi elemen hingga pengendalian respons terhadap interaksi pengguna.
Cara Mengubah Elemen HTML
Mengubah merupakan bagian yang penting dalam pengembangan web dan biasanya dilakukan dengan menggunakan JavaScript. Ada beberapa cara untuk mengubah menggunakan JavaScript, di antaranya adalah:
1. Mengubah isi elemen HTML
Cara ini digunakan untuk mengubah isi dari elemen, misalnya mengubah teks pada elemen paragraf atau mengganti gambar pada elemen img. Kita dapat menggunakan fungsi innerHTML dalam objek elemen HTML ingin diubah. Fungsi ini memungkinkan kita demi mengubah isi elemen dengan kode baru.
2. Mengubah nilai atribut elemen HTML
Dalam DOM, cara ini digunakan demi mengubah nilai dari atribut, misalnya mengubah nilai atribut src pada elemen img. Kita dapat menggunakan properti atau metode yang sesuai dalam objek elemen HTML yang ingin diubah. Properti tersebut bergantung pada atribut yang ingin diubah.
3. Menambahkan atau menghapus elemen HTML
Pada DOM cara ini digunakan demi menambahkan atau menghapus dalam halaman web secara dinamis. Ini tentu tergantung pada interaksi pengguna atau keadaan lainnya. Kita dapat menggunakan metode createElement() demi membuat elemen baru serta metode appendChild() atau insertBefore() untuk menambahkan elemen tersebut ke dalam dokumen.
4. Mengatur tampilan elemen HTML
Cara ini digunakan untuk mengatur tampilan elemen HTML, misalnya mengubah ukuran, warna, atau posisi elemen. Kita dapat menggunakan properti style pada objek yang ingin diubah. Properti ini memungkinkan kita untuk mengatur properti CSS dari elemen HTML secara langsung melalui JavaScript.
Dalam pengembangan, pengubahan sangatlah penting dan sering digunakan untuk melakukan manipulasi pada elemen tersebut. Dengan menggunakan salah satu cara di atas, developer dapat mengubah nya sesuai dengan kebutuhan, memperbaharui isi atau tampilan halaman secara dinamis, dan meningkatkan interaktivitas dari halaman web.
Baca Juga: React JS adalah: 10 Fitur, Kelebihan, Tutorial, Bedanya Dengan React Native
Cara Kerja DOM pada Javascript
DOM (Document Object Model) adalah antarmuka pemrograman yang memungkinkan JavaScript untuk berinteraksi dengan HTML dan XML dalam dokumen web.
Ketika sebuah halaman web dimuat oleh browser, struktur HTML-nya diubah menjadi model objek yang dapat dimanipulasi oleh JavaScript.
Memungkinkan pengembang untuk mengubah tampilan, struktur, dan konten halaman secara dinamis. Berikut adalah penjelasan tentang cara kerja DOM pada JavaScript:
1. Membuat Model Objek dari Dokumen HTML
Ketika sebuah halaman web dimuat, browser membaca kode HTML dan mengubahnya menjadi struktur DOM. Struktur DOM adalah representasi berbasis objek dari dokumen tersebut, di mana setiap elemen HTML, atribut, dan teks dianggap sebagai objek yang dapat diakses dan dimanipulasi. Struktur ini berbentuk seperti pohon (tree), di mana:
- Root: Elemen root biasanya adalah
<html>. - Nodes: Setiap elemen HTML, atribut, dan teks adalah node di dalam pohon ini.
- Branches: Elemen-elemen HTML dapat memiliki elemen anak (child elements), membentuk cabang dalam pohon DOM.
2. Akses Elemen dengan JavaScript
JavaScript dapat mengakses elemen-elemen dalam struktur DOM menggunakan berbagai metode yang disediakan oleh objek document. Misalnya:
document.getElementById(id): Mengakses elemen berdasarkan nilaiidyang unik.document.getElementsByClassName(className): Mengakses semua elemen dengan kelas tertentu.document.querySelector(selector): Mengakses elemen pertama yang cocok dengan selektor CSS yang diberikan.document.querySelectorAll(selector): Mengakses semua elemen yang cocok dengan selektor CSS yang diberikan.
3. Manipulasi Konten dan Atribut
Setelah elemen diakses, JavaScript dapat mengubah konten atau atributnya. Misalnya:
element.innerHTML: Digunakan untuk mengubah atau mendapatkan HTML yang terkandung dalam suatu elemen.element.textContent: Digunakan untuk mengubah atau mendapatkan teks dalam suatu elemen.element.setAttribute(attribute, value): Menetapkan atau mengubah nilai atribut pada elemen.
4. Manipulasi Struktur Dokumen
DOM memungkinkan JavaScript untuk menambahkan, menghapus, atau memodifikasi elemen-elemen di dalam dokumen:
element.appendChild(newElement): Menambahkan elemen baru sebagai anak terakhir dari elemen yang ada.element.removeChild(childElement): Menghapus elemen anak dari elemen induknya.element.replaceChild(newElement, oldElement): Menggantikan elemen anak yang ada dengan elemen baru.
5. Penanganan Peristiwa (Events)
JavaScript dapat merespons interaksi pengguna dengan menambahkan event listeners pada elemen DOM. Misalnya:
element.addEventListener('click', function): Menambahkan fungsi yang akan dijalankan ketika elemen diklik.element.onmouseover = function: Menetapkan fungsi yang akan dijalankan ketika kursor mouse berada di atas elemen.
6. Pembaruan Dinamis
Salah satu kekuatan utama DOM adalah kemampuannya untuk memperbarui halaman web secara dinamis tanpa harus memuat ulang seluruh halaman.
Ini memungkinkan pengalaman pengguna yang lebih interaktif dan responsif. Contoh sederhana adalah mengubah teks atau gaya CSS elemen berdasarkan aksi pengguna seperti klik atau hover.
7. Rendering Ulang (Reflow & Repaint)
Ketika DOM dimodifikasi, browser mungkin perlu merender ulang halaman (reflow dan repaint). Reflow terjadi ketika perubahan pada DOM mempengaruhi tata letak halaman, sementara repaint terjadi ketika perubahan hanya mempengaruhi gaya visual, seperti warna.
Proses ini memungkinkan halaman untuk mencerminkan perubahan yang dilakukan melalui JavaScript secara real-time.
Contoh Cara Menambah dan Menghapus Elemen HTML
Menambah dan menghapus pada halaman website merupakan bagian penting dalam pengembangan website dan biasanya dilakukan dengan menggunakan JavaScript. Ada beberapa cara untuk menambah serta menghapus elemen HTML menggunakan JavaScript, di antaranya adalah:
1. Menambahkan elemen HTML
Cara ini digunakan untuk menambahkan elemen HTML baru pada halaman website. Kita dapat menggunakan metode createElement() demi membuat baru dan metode appendChild() atau insertBefore() demi menambahkan tersebut ke dalam dokumen.
Pada contoh di atas, kita membuat div baru dan menambahkannya dengan id “parent”.
2. Menghapus elemen HTML
Cara ini digunakan demi menghapus elemen HTML dari halaman web. Kita dapat menggunakan metode removeChild() pada objek elemen HTML yang ingin dihapus.
Pada contoh di atas, kita mengambil elemen dengan id “element-to-remove” dan menghapusnya dari dokumen.
Ketika engembangan web, menambah dan menghapus elemen HTML sangatlah penting dan sering digunakan untuk membuat halaman web yang lebih dinamis dan interaktif.
Dengan menggunakan cara di atas, developer bisa menambah atau menghapus elemen HTML sesuai dengan kebutuhan, memperbaharui isi atau tampilan halaman web secara dinamis, dan meningkatkan interaktivitas dari halaman web.
Baca juga: Framework JavaScript: Pengertian, Kelebihan, dan Framework Terbaik
Demikian artikel mengenai DOM dalam Javascript. Sekawan Media menyediakan layanan pengembangan aplikasi berbasis produk dan solusi sesuai dengan berbagai kustomisasi menyesuikan dengen segmen bisnis Anda. Untuk selengkapnya, silakan cek halaman produk dan solusi kami di sini.
