Sebagai pengembang web Niscaya nya Anda sudah Enggak asing Kembali dengan istilah DOM atau Document Object Model. DOM merupakan konsep dimana Mempunyai penggunaan dalam membantu pengembangan suatu web. Terlebih Kembali Apabila pada pembuatan tampilan Bergerak serta interaktif.
Misalnya, Apabila kita Ingin menambahkan elemen HTML baru ke dalam halaman website Ketika pengguna melakukan suatu tindakan, DOM dapat memberikan Anda akses Kepada dapat menggunakan JavaScript Kepada Membikin baru dan menambahkannya ke dalam struktur DOM pada halaman website.
Kepada lebih lanjut mengetahui tentang fungsi dari DOM di javascript ini, mari simak artikel di Dasar ini!
Apa Itu DOM
DOM atau Document Object Model adalah konsep Esensial di pengembangan website serta sangat Krusial dalam pemrograman JavaScript.
DOM adalah representasi dari Arsip dimana dibuka dalam browser, yang memungkinkan JavaScript memanipulasi konten dan struktur halaman web tersebut.
DOM adalah model objek dimana merepresentasikan setiap elemen Arsip atau XML sebagai objek dimana dapat diakses oleh JavaScript.
Setiap elemen diwakili oleh node dalam struktur hierarkis, serta setiap node Mempunyai 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 Membikin halaman website dimana lebih interaktif serta responsif terhadap tindakan pengguna.
Secara keseluruhan, DOM adalah konsep Krusial dalam pengembangan website dan sangat erat kaitannya dengan JavaScript.
Kepada memahami DOM serta bagaimana JavaScript dapat memanipulasinya, kita dapat Membikin tampilan laman yang lebih Bergerak, interaktif, serta responsif terhadap interaksi pengguna.
Fungsi DOM
DOM adalah salah satu bagian Esensial dari JavaScript yang sangat Krusial dalam pembuatan tampilan halaman web dimana interaktif serta Bergerak.
Fungsi DOM di JavaScript memungkinkan para developer Kepada mengakses dan memanipulasi setiap elemen HTML dalam halaman website.
Beberapa fungsi DOM yang paling Lumrah digunakan dalam JavaScript adalah sebagai berikut:
1. Menambahkan atau menghapus elemen HTML
Dengan adanya fungsi ini, developer Dapat menambahkan atau menghapus elemen HTML dalam halaman website secara Bergerak, tergantung pada interaksi pengguna atau keadaan lainnya.
Misalnya, ketika pengguna menekan tombol tertentu, kita dapat memanfaatkan penggunaan fungsi ini Kepada menambahkan elemen HTML baru ke halaman web.
2. Mengubah isi Elemen HTML
Fungsi DOM juga memungkinkan developer Kepada 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 Membikin 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 Bergerak.
Secara keseluruhan, fungsi DOM di JavaScript sangatlah Krusial dalam pembuatan tampilan halaman web interaktif dan Bergerak.
Penggunaan fungsi DOM, developer dapat mengakses dan memanipulasi setiap elemen HTML pada halaman web, mengubah tampilan halaman web secara Bergerak, menangani event, dan sebagainya.
Baca Juga: Laravel: Framework Para Developer yang Terbaik di Kelasnya!
DOM, Langkah Mengambil Elemen HTML
Mengambil elemen HTML merupakan bagian Krusial di pengembangan web serta biasanya dilakukan dengan menggunakan JavaScript. Terdapat beberapa Langkah mengambil ini menggunakan JavaScript, di antaranya adalah:
1. Menggunakan getElementById()
Langkah ini digunakan Kepada 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()
Langkah ini digunakan Kepada 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()
Langkah ini digunakan Kepada 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()
Langkah ini digunakan Kepada 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 Krusial serta sering digunakan Kepada melakukan manipulasi pada elemen tersebut.
Ketika menerapkan salah satu Langkah 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 Langkah Kerjanya pada Web Development
Properti pada DOM
DOM (Document Object Model) dalam JavaScript Mempunyai berbagai properti yang memungkinkan pengembang Kepada mengakses dan memanipulasi elemen HTML dan struktur Arsip web. Berikut adalah beberapa properti DOM yang Lumrah digunakan dalam JavaScript:
1. Document
document.documentElement
: Mengacu pada elemen root dari Arsip, biasanya elemen.
document.body
: Mengacu pada elemendari Arsip.
document.head
: Mengacu pada elemendari Arsip.
document.title
: Mengacu pada teks judul dari Arsip (isi dari elemen
).
2. Elements
element.id
: Mengembalikan atau menetapkan nilai atributid
dari elemen.element.className
: Mengembalikan atau menetapkan nilai atributclass
dari 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 Kepada elemen.element.attributes
: Mengembalikan koleksi atribut dari elemen.
3. Node
node.parentNode
: Mengembalikan node induk dari elemen atau node Ketika ini.node.childNodes
: Mengembalikan koleksi dari Sekalian node anak, termasuk node teks, dari node Ketika ini.node.firstChild
: Mengembalikan node anak pertama dari node Ketika ini.node.lastChild
: Mengembalikan node anak terakhir dari node Ketika ini.node.previousSibling
: Mengembalikan node Kerabat sebelumnya dari node Ketika ini.node.nextSibling
: Mengembalikan node Kerabat berikutnya dari node Ketika ini.
4. Attribute
element.getAttribute(attributeName)
: Mengembalikan nilai dari atribut yang ditentukan.element.setAttribute(attributeName, value)
: Menetapkan nilai baru Kepada 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
7. Window
window.innerWidth
: Mengembalikan lebar viewport jendela.window.innerHeight
: Mengembalikan tinggi viewport jendela.window.location
: Mengembalikan objek Letak yang berisi informasi tentang URL Ketika ini.window.history
: Mengembalikan objek yang memungkinkan manipulasi sejarah penelusuran pengguna.
Properti-properti ini memungkinkan pengembang Kepada melakukan berbagai operasi pada halaman web, mulai dari manipulasi elemen hingga pengendalian respons terhadap interaksi pengguna.
Langkah Mengubah Elemen HTML
Mengubah merupakan bagian yang Krusial dalam pengembangan web dan biasanya dilakukan dengan menggunakan JavaScript. Terdapat beberapa Langkah Kepada mengubah menggunakan JavaScript, di antaranya adalah:
1. Mengubah isi elemen HTML
Langkah ini digunakan Kepada 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, Langkah 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 Langkah ini digunakan demi menambahkan atau menghapus dalam halaman web secara Bergerak. Ini tentu tergantung pada interaksi pengguna atau keadaan lainnya. Kita dapat menggunakan metode createElement() demi Membikin elemen baru serta metode appendChild() atau insertBefore() Kepada menambahkan elemen tersebut ke dalam Arsip.
4. Mengatur tampilan elemen HTML
Langkah ini digunakan Kepada mengatur tampilan elemen HTML, misalnya mengubah ukuran, Corak, atau posisi elemen. Kita dapat menggunakan properti style pada objek yang Ingin diubah. Properti ini memungkinkan kita Kepada mengatur properti CSS dari elemen HTML secara langsung melalui JavaScript.
Dalam pengembangan, pengubahan sangatlah Krusial dan sering digunakan Kepada melakukan manipulasi pada elemen tersebut. Dengan menggunakan salah satu Langkah di atas, developer dapat mengubah nya sesuai dengan kebutuhan, memperbaharui isi atau tampilan halaman secara Bergerak, dan meningkatkan interaktivitas dari halaman web.
Baca Juga: React JS adalah: 10 Fitur, Kelebihan, Tutorial, Bedanya Dengan React Native
Langkah Kerja DOM pada Javascript
DOM (Document Object Model) adalah antarmuka pemrograman yang memungkinkan JavaScript Kepada berinteraksi dengan HTML dan XML dalam Arsip web.
Ketika sebuah halaman web dimuat oleh browser, struktur HTML-nya diubah menjadi model objek yang dapat dimanipulasi oleh JavaScript.
Memungkinkan pengembang Kepada mengubah tampilan, struktur, dan konten halaman secara Bergerak. Berikut adalah penjelasan tentang Langkah kerja DOM pada JavaScript:
1. Membikin Model Objek dari Arsip HTML
Ketika sebuah halaman web dimuat, browser membaca kode HTML dan mengubahnya menjadi struktur DOM. Struktur DOM adalah representasi berbasis objek dari Arsip 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
.
- Nodes: Setiap elemen HTML, atribut, dan teks adalah node di dalam pohon ini.
- Branches: Elemen-elemen HTML dapat Mempunyai 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 nilaiid
yang Spesial.document.getElementsByClassName(className)
: Mengakses Sekalian elemen dengan kelas tertentu.document.querySelector(selector)
: Mengakses elemen pertama yang cocok dengan selektor CSS yang diberikan.document.querySelectorAll(selector)
: Mengakses Sekalian 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 Kepada mengubah atau mendapatkan HTML yang terkandung dalam suatu elemen.element.textContent
: Digunakan Kepada mengubah atau mendapatkan teks dalam suatu elemen.element.setAttribute(attribute, value)
: Menetapkan atau mengubah nilai atribut pada elemen.
4. Manipulasi Struktur Arsip
DOM memungkinkan JavaScript Kepada menambahkan, menghapus, atau memodifikasi elemen-elemen di dalam Arsip:
element.appendChild(newElement)
: Menambahkan elemen baru sebagai anak terakhir dari elemen yang Terdapat.element.removeChild(childElement)
: Menghapus elemen anak dari elemen induknya.element.replaceChild(newElement, oldElement)
: Menggantikan elemen anak yang Terdapat 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 Bergerak
Salah satu kekuatan Esensial DOM adalah kemampuannya Kepada memperbarui halaman web secara Bergerak tanpa harus memuat ulang seluruh halaman.
Ini memungkinkan pengalaman pengguna yang lebih interaktif dan responsif. Misalnya 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 Corak.
Proses ini memungkinkan halaman Kepada mencerminkan perubahan yang dilakukan melalui JavaScript secara real-time.
Misalnya Langkah Menambah dan Menghapus Elemen HTML
Menambah dan menghapus pada halaman website merupakan bagian Krusial dalam pengembangan website dan biasanya dilakukan dengan menggunakan JavaScript. Terdapat beberapa Langkah Kepada menambah serta menghapus elemen HTML menggunakan JavaScript, di antaranya adalah:
1. Menambahkan elemen HTML
Langkah ini digunakan Kepada menambahkan elemen HTML baru pada halaman website. Kita dapat menggunakan metode createElement() demi Membikin baru dan metode appendChild() atau insertBefore() demi menambahkan tersebut ke dalam Arsip.
Pada Misalnya di atas, kita Membikin div baru dan menambahkannya dengan id “parent”.
2. Menghapus elemen HTML
Langkah ini digunakan demi menghapus elemen HTML dari halaman web. Kita dapat menggunakan metode removeChild() pada objek elemen HTML yang Ingin dihapus.
Pada Misalnya di atas, kita mengambil elemen dengan id “element-to-remove” dan menghapusnya dari Arsip.
Ketika engembangan web, menambah dan menghapus elemen HTML sangatlah Krusial dan sering digunakan Kepada Membikin halaman web yang lebih Bergerak dan interaktif.
Dengan menggunakan Langkah di atas, developer Dapat menambah atau menghapus elemen HTML sesuai dengan kebutuhan, memperbaharui isi atau tampilan halaman web secara Bergerak, dan meningkatkan interaktivitas dari halaman web.
Baca juga: Framework JavaScript: Pengertian, Kelebihan, dan Framework Terbaik
Demikian artikel mengenai DOM dalam Javascript. Sandi Dharma menyediakan layanan pengembangan aplikasi berbasis produk dan solusi sesuai dengan berbagai kustomisasi menyesuikan dengen segmen bisnis Anda. Kepada selengkapnya, silakan cek halaman produk dan solusi kami di sini.