Cara menggunakan elemen javascript dom

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

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

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’);

Sekedar 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

Apa fungsi DOM dalam JavaScript?

Apa itu JavaScript DOM dan apa model penerapannya?

Bagaimana cara memanggil fungsi dalam JavaScript?

Di mana lagi DOM dapat diimplementasikan selain di JavaScript?