Saat ini membuat website semakin mudah. Anda dapat menyajikan situs web interaktif dengan bantuan JavaScript. Untuk mewujudkannya, Anda memerlukan DOM.
DOM adalah objek standar untuk HTML dan XML yang memiliki properti independen platform. Saat Anda membuka situs web melalui browser, file HTML di situs web akan dimuat dan muncul di layar perangkat Anda
Bagi Anda yang ingin mengetahui lebih jauh apa itu JavaScript DOM, berikut kami akan mengulasnya secara lengkap. Simak penjelasannya pada artikel berikut ini
Daftar isi
Apa itu DOM JavaScript?
DOM adalah singkatan dari (Document Object Model). Ini adalah antarmuka yang memungkinkan Anda sebagai pengembang untuk memanipulasi gaya dan konten situs web. Sebenarnya DOM tidak hanya bisa Anda temukan di JavaScript. Anda dapat menemukan istilah dalam bahasa pemrograman lain
Sederhananya, situs web berisi dokumen CSS dan HTML. Browser bertanggung jawab untuk menampilkan hasil dari dokumen yang disebut DOM atau Document Object Model. Keberadaan dokumen ini membuat JavaScript dapat mengakses dan memanipulasi elemen
DOM juga memungkinkan untuk memiliki gaya di situs web. Selain itu, model ini juga disusun dalam struktur objek dan pendefinisian
- Elemen HTML yang bertindak sebagai objek
- Properti dan peristiwa elemen HTML
- Metode untuk dapat mengakses elemen HTML
Objek dokumen adalah model dokumen HTML yang di dalamnya terdapat sekumpulan fungsi dan atribut berupa objek berdasarkan elemen HTML. Anda dapat mengilustrasikan dokumen dengan gambar sebagai berikut
Struktur di atas akan memudahkan Anda ketika ingin menggunakan elemen tertentu. Elemen-elemen di atas disebut node. Tidak hanya elemen tetapi atribut teks dan elemen juga memiliki simpulnya sendiri. Node-node tersebut misalnya catatan teks untuk persyaratan teks dan catatan atribut untuk persyaratan atribut elemen
fungsi DOM
Setelah mengetahui pengertian DOM, untuk fungsinya sendiri dimungkinkan untuk memanipulasi tampilan web menggunakan JavaScript. Saat proses rendering file HTML sedang berlangsung, browser membuat model objek dokumen atau DOM
Selanjutnya, objek yang diturunkan dari dokumen tersebut akan menyediakan kumpulan data, fungsi, dan atribut yang berguna saat membuat program JavaScript. Inilah yang kita kenal sebagai API atau Application Programming Interface
Cara Mengambil Elemen HTML
Anda sudah paham bahwa JavaScript DOM adalah bagian yang juga memungkinkan adanya style pada website. Informasi selanjutnya adalah cara mengambil elemen HTML
1. Dengan Nama Kelas
getElementsByClassName() adalah metode yang dapat menghasilkan lebih dari satu objek. Melalui metode ini Anda juga akan mendapatkan semua item yang memiliki kelas list-item. Kemudian Anda dapat menyimpannya dalam sebuah variabel
let items = document.getElementsByClassName(‘list-items’);2. Dengan ID Nama
Anda juga bisa mendapatkan lebih dari satu objek saat menggunakan metode getElementById(). Silakan lihat contoh di bawah ini
let title = document.getElementById(‘header-title’);_Dari sini Anda bisa mendapatkan elemen lengkap dengan id tajuk-judul. Anda kemudian dapat menyimpannya ke variabel
3. Dengan Nama Label
Mendapatkan nama juga tidak bisa dilakukan dengan menggunakan metode getElementBtTagName(). Contohnya seperti di bawah ini
Selanjutnya Anda bisa mendapatkan semua elemen Ii yang berasal dari dokumen HTML. Kemudian Anda dapat menyimpannya dalam sebuah variabel
4. Dengan QuerySelector
Bagaimana dengan Queryselector? . Pengembalian sudah sesuai dengan SS pemilih yang telah Anda tentukan sebelumnya
Ini menunjukkan bahwa Anda bisa mendapatkan elemen menggunakan ID, kelas, tag, dan semua pemilih CSS yang valid. Berikut ini adalah daftar pilihan yang sering digunakan
- Dapatkan dengan id. biarkan tajuk = dokumen. querySelector('#header')
- Berdasarkan kelas. biarkan item = dokumen. querySelector('. Daftar item')
- Dengan tag. biarkan judul = dokumen. querySelector('h2');
5. Memperoleh Elemen Lebih Spesifik
Apakah Anda ingin mendapatkan elemen yang lebih spesifik? . Caranya adalah dengan
document.querySelector(“h2.heading”);Contoh di atas dapat diterapkan saat mencari tag dan kelas secara bersamaan. Anda juga dapat menggunakannya saat ingin mengembalikan elemen pertama melalui Pemilih CSS
6. QueryselectorAll
Jika Anda sudah mengetahui tentang metode querySelector(), sekarang kami akan menjelaskan metode querySelectorAll(). Sebenarnya ini tidak jauh berbeda atau bahkan sama ketika Anda menggunakan metode querySelector()
Namun keduanya memiliki perbedaan. Perbedaannya adalah ketika Anda mengembalikan semua elemen yang sama dengan menggunakan CSS Selector
let heading = document.querySelectorAll(‘h2.heading’);_Berdasarkan contoh tersebut, Anda bisa mendapatkan semua tak h2 yang memiliki kelas heading. Kemudian Anda bisa menyimpannya dalam array
Cara Menambahkan Elemen HTML dan Menghapusnya
HTML DOM memungkinkan Anda menambahkan elemen baru. Selain itu, Anda juga bisa menghapus elemen yang sudah ada sebelumnya
1. Cara Menambahkan Elemen HTML
Misalnya, Anda hanya ingin menampilkan elemen div dengan menggunakan metode createElement(). Metode ini akan menggunakan tagname sebagai parameternya.
Kemudian simpan dalam sebuah variabel. Jika sudah siap, Anda hanya perlu membuat beberapa konten. Langkah selanjutnya adalah Anda harus memasukkannya ke dalam dokumen HTML
Berikut ini adalah contoh sintaks yang dapat Anda gunakan untuk menambahkan elemen
let div = document.createElement(‘div’);Sekarang Anda harus membuat konten menggunakan metode createTextNode() melalui sebuah String yang berfungsi sebagai parameter. Maka Anda harus memasukkan elemen div baru sebelum memasukkan div lama di dokumen Anda
let newContent = document.createTextNode(“Hello World!”); div.appendChild(newContent); document.body.insertBefore(div, currentDiv);_2. Ganti Elemen HTML
Bagi yang ingin mengubah elemen, maka perlu memperhatikan contoh dari sintaks di bawah ini
let div = document.querySelector(‘#div’); let newDiv = document.createElement(‘div’); newDiv.innerHTML = “Hello World2”; div.parentNode.replaceChild(newDiv, div);berdasarkan sintaks, Anda dapat mengganti elemen dengan menggunakan metode replaceChild(). Nanti argumen pertama adalah elemen baru. Sedangkan argumen kedua adalah elemen yang telah Anda ganti
3. Menghapus Elemen HTML
Anda bisa mendapatkan elemen dan menghapusnya. Metode yang Anda gunakan adalah removeChild(). Berikut ini adalah contoh sintaks yang dapat Anda gunakan untuk menghapus elemen HTML
let elem = document.querySelector(‘#header’); elem.parentNode.removeChild(elem);_4. Menulis Langsung ke Sistem Keluaran HTML
Selain cara sebelumnya yang sudah kami jelaskan, ternyata Anda juga bisa menulis ekspresi HTML dan JavaScript secara langsung. Anda dapat menuliskannya ke dalam Sistem Keluaran HTML. Metode yang harus Anda gunakan adalah write(). Silahkan perhatikan contoh berikut
document.write(“<h2>Hello World!</h2><p>This is a paragraph!</p>”);_Selain itu, Anda juga dapat meneruskan ekspresi dari JavaScript. Misalnya ketika ingin menggunakan objek tunggal, maka metodenya adalah
let title = document.getElementById(‘header-title’);_0Sekedar informasi bahwa method write() juga dapat digunakan dalam mengambil beberapa argumen. Nanti berarti akan ditambahkan pada dokumen yang sebelumnya sudah anda sesuaikan tampilannya
Cara Memodifikasi Elemen HTML
Materi selanjutnya masih tentang DOM adalah bagaimana mengubah elemen HTML. Adanya HTML DOM memungkinkan Anda untuk mengubah konten dan gaya yang berasal dari elemen HTML. Caranya adalah dengan mengubah propertinya