Apa itu DOM dalam JavaScript? Kenali DOM JavaScript

Apa itu DOM dalam JavaScript?  – Jika Anda mempelajari JavaScript, maka Anda tahu bahwa JavaScript dapat membuat halaman situs web lebih dinamis dan menarik. Tapi tahukah Anda, itu bisa terjadi melalui bantuan DOM. Tunggu, apa itu DOM?

Singkatnya, DOM JavaScript adalah sesuatu yang dapat memanipulasi halaman web HTML. Pada artikel ini, Anda akan mempelajari apa itu JavaScript DOM, fungsinya, hingga cara memanipulasi HTML melalui JavaScript DOM.

Apakah Anda penasaran? Langsung saja, ini dia penjelasan lengkapnya!

Apa itu DOM JavaScript?

DOM JavaScript adalah antarmuka yang memungkinkan pengembang untuk memanipulasi halaman web dalam hal struktur, tampilan, dan konten. Nah, DOM adalah singkatan dari Document Object Model.

Awalnya, situs web ini terdiri dari gaya HTML dan CSS statis. Sampai akhirnya muncul JavaScript. JavaScript adalah bahasa pemrograman untuk membuat situs web lebih dinamis.

Jadi, bagaimana bahasa statis dan dinamis di atas berkomunikasi satu sama lain?

Rupanya, browser membuat dokumen yang dikenal sebagai DOM untuk setiap halaman web. Nah, DOM-lah yang memungkinkan JavaScript untuk mengakses dan memanipulasi semua elemen statis di halaman.

Penasaran seperti apa struktur DOM halaman website? Berikut kami sajikan skrip HTML dari halaman web sederhana:

Sedangkan hasil script setelah diolah menjadi DOM:

Bisakah kamu melihat, HTML adalah elemen induk. Ini memiliki dua elemen anak yaitu Kepala dan Tubuh. Begitu seterusnya hingga elemen terkecil. Nantinya, setiap elemen dapat dimanipulasi oleh pengembang dengan bantuan JavaScript.

Nah, itulah gambaran singkat tentang apa itu JavaScript DOM. Mari kita kenali fungsi JavaScript DOM di poin selanjutnya!

fungsi DOM

Seperti yang sudah dibahas pada poin apa itu DOM, anda sudah mengetahui bahwa fungsi dari DOM JavaScript adalah untuk memanipulasi halaman website agar lebih dinamis. Bagaimana cara kerjanya?

Rupanya, DOM melakukannya dengan mengambil, mengubah, menambah, atau menghapus elemen HTML. Ini akan dibahas secara lebih rinci di bagian lain artikel.

Selanjutnya, saat memanipulasi halaman, DOM juga mengumpulkan data, fungsi, dan atribut milik elemen yang diakses. Nah, properti itu bisa digunakan untuk keperluan lain.

Misalnya untuk membuat API atau Application Programming Interface, serta mengambil data website dengan metode Web Scraping.

Sampai di sini, Anda sudah memahami arti dan fungsi DOM JavaScript. Mari pelajari cara memanipulasi elemen HTML dengan JavaScript DOM!

Cara Mengambil Elemen HTML

Untuk mengambil elemen HTML, DOM JavaScript menggunakan beberapa metode:

1. Ambil Elemen dengan ID

Ini dilakukan melalui metode getElementByID(). Berikut adalah contoh skrip:

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

Dari sana, DOM JavaScript dapat mengambil elemen dengan ID footer-judul kemudian menyimpannya dalam sebuah variabel.

2. Mengambil Elemen dengan Kelas

Anda bisa mendapatkan elemen dengan metode getElementsByClassName(). Berikut adalah contoh skripnya:

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

Perbedaannya adalah, di sini, JavaScript DOM tidak hanya dapat mengambil satu, tetapi semua elemen di bawah Kelas Daftar item.

3. Ambil Elemen dengan Nama Tag

Anda juga bisa mendapatkan lebih dari satu elemen dengan metode getElementsByTagName(). Contohnya seperti ini:

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

Nantinya, JavaScript DOM akan mengambil semua elemen dengan Tag liuntuk kemudian disimpan sebagai variabel.

4. Ambil Elemen dengan querySelector

Tidak hanya HTML, Anda juga dapat menggunakan JavaScript DOM untuk mengambil elemen CSS. Caranya, dengan metode pemilih kueri. Berikut beberapa contoh scriptnya:

1. Mengambil elemen CSS dengan ID:

var header = document.querySelector(‘#footer)

2. Mengambil elemen CSS dengan Kelas:

var items = document.querySelector(‘.list-items’)

3. Mengambil elemen CSS dengan Tag:

var headings = document.querySelector(‘h2’);

4. Mengambil elemen CSS secara lebih spesifik:

document.querySelector(“h2.footer”);

5. Ambil Elemen dengan querySelectorAll

querySelectorAll adalah metode alternatif lain untuk mengambil elemen CSS. Cara ini tidak berbeda dengan cara sebelumnya. Berikut ini contohnya:

var heading = document.querySelectorAll(‘h1.heading’);

Cara Memodifikasi Elemen HTML

JavaScript DOM memungkinkan Anda mengubah struktur, konten, dan tampilan elemen HTML dengan metode berikut:

1. Memodifikasi Konten HTML

Anda dapat mengubah konten HTML menggunakan properti dalamHTML. Nah, properti ini dapat dikombinasikan dengan metode getElementbyID() sebagai berikut:

document.getElementById(“#header”).innerHTML = “Hello World!”;

Atau, bisa juga dikombinasikan dengan metode getElementsByTagName() seperti ini:

document.getElementsByTagName("div").innerHTML = "<h2>Hello World!</h2>"

2. Ubah Nilai dari Atribut

Tidak hanya untuk mengubah konten, Anda juga dapat menggunakan DOM JavaScript untuk mengubah nilai suatu atribut. Misalnya seperti script di bawah ini:

document.getElementsByTag(“img”).src = “image.jpg”;

Dengan begitu, JavaScript DOM akan mengubah nilai atribut gambar menjadi image.jpg.

3. Mengubah Gaya/Tampilan

JavaScript DOM juga berguna untuk mengubah gaya elemen HTML dan CSS. Tetapi untuk melakukannya, Anda perlu mengubah properti style terlebih dahulu seperti ini:

document.getElementById(id).style.property = new style

Baru setelah itu, Anda dapat mengambil elemen tertentu dan kemudian mengubah gayanya. Misalnya di sini, kami mengubah gaya dari batasBawah:

document.getElementsByTag(“h2”).style.borderBottom = “solid 5px #FFF”;

Cara Menambah dan Menghapus Elemen HTML

Selain kebutuhan untuk mengambil dan mengubah elemen HTML, Anda juga dapat menggunakan JavaScript DOM untuk menambah dan menghapus elemen, lol. Berikut caranya:

1. Bagaimana Menambahkan Elemen

Untuk menambahkan elemen baru, Anda cukup menggunakan metode buatElemen() seperti ini:

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

Dari sana, DOM JavaScript akan membuat elemen bernama div. Setelah itu, Anda dapat mengisi elemen dengan konten baru. Berikut ini contohnya:

var newContent = document.createTextNode("Hello World!");
div.appendChild(newContent);
document.body.insertBefore(div, currentDiv);

2. Cara Menghapus Elemen

Untuk menghapus elemen, Anda dapat menggunakan metode hapusAnak(). Berikut ini contohnya:

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

3. Cara Mengganti Elemen

DOM JavaScript juga memungkinkan Anda mengganti elemen yang ada. Pertama-tama, Anda perlu membuat elemen baru seperti ini:

var div = document.querySelector('#div');
var newDiv = document.createElement(‘div’);

Kemudian, saatnya untuk mengganti elemen-elemen di atas. Caranya adalah dengan menulis script di bawah ini:

newDiv.innerHTML = "Hello World2";
div.parentNode.replaceChild(newDiv, div);

Salah satu fitur unik DOM JavaScript adalah kemampuannya untuk menggabungkan HTML dan JavaScript menjadi satu baris kode. Nah, ini bisa dilakukan dengan metode menulis() seperti di bawah ini:

document.write(“<h2>Hello World!</h2><p>This is an example text!</p>”);

Selain dapat memuat teks seperti di atas, metode menulis() ini juga dapat digunakan untuk memasukkan objek, misalnya Tanggal seperti ini:

Nah, itulah panduan lengkap tentang cara memanipulasi elemen menggunakan JavaScript DOM. Jangan pergi dulu karena kami masih memiliki beberapa info penting!

Penangann Acara

Selain memanipulasi elemen HTML, Anda juga dapat menggunakan JavaScript DOM untuk menangani Peristiwa (Event Handling). Singkatnya, Event adalah reaksi halaman website ketika pengguna melakukan sesuatu, misalnya mengklik tombol.

Nah, beberapa event yang biasa ditemukan di website tersebut antara lain:

• Klik kiri atau kanan mouse
• Gerakan tikus
• Transisi pemuatan halaman
• Ubah atau masukkan formulir transisi

1. Pengaturan acara

Anda dapat mengatur Acara menggunakan properti dalamHTML seperti skrip berikut:

<button onclick=”this.innerHTML = Thank you!’”>Please click!!</button>

Ketika pengguna mengklik tombol Silakan klik!maka tombol akan muncul pesan Terima kasih!

2. Menyiapkan Pendengar Acara

JavaScript DOM juga memungkinkan Anda untuk mengatur Event Listener. Dengan begitu, halaman web akan merespons Event yang dilakukan pengguna. Nah ini contoh scriptnya :

document.getElementById(“btn”).addEventListener('mouseover', runEvent);

Saat pengguna menggerakkan mouse menjauh dari tombol kawan, maka halaman web akan secara otomatis merespon event tersebut. Seperti apa bentuknya? Nah, ini bisa diatur lebih lanjut sesuai kebutuhan developer.

Hubungan simpul

var parent = document.getElementById(“heading”).parentNode