Jadi, JS DOM (Model Objek Dokumen dalam JavaScript) adalah antarmuka pemrograman untuk dokumen web. DevLearn memungkinkan para programmer untuk mewujudkan interaksi di situs web dengan cara yang sangat sementara dari interaktivitas DOM. Panduan Pemula untuk DOM Ruang Lingkup “API” JavaScript.
Apa yang dimaksud dengan DOM?
DOM adalah representasi objek seperti pohon dari dokumen web. Faktanya, setiap komponen dokumen HTML (judul, paragraf, gambar, tautan, dll.) adalah simpul pada pohon ini. Terdapat hirarki di antara node-node tersebut di mana dimulai dari objek dokumen yang merupakan root node. Dengan model ini, pengembang dapat mengakses dan mengubah elemen, atribut, dan teks dalam sebuah halaman web.
DOM bukanlah bagian dari bahasa JavaScript itu sendiri. Sebuah standar web yang ditawarkan oleh browser, yang memungkinkan bahasa pemrograman seperti JavaScript untuk berbicara dengan halaman web. DOM (Document Object Model) didefinisikan oleh World Wide Web Consortium (W3C) dan Web Hypertext Application Technology Working Group (WHATWG), dan pengalaman yang konsisten di seluruh browser.
Sumber: codepolitan.com
Struktur Pohon DOM
Ada beberapa jenis node yang berbeda dalam pohon DOM:
- Node Elemen : Ini digunakan untuk merepresentasikan elemen HTML seperti , , dll.
- Node Teks: Node ini merangkum konten teks di dalam elemen.
- Simpul Atribut: Atribut elemen HTML seperti kelas atau id.
- Node Dokumen: Mewakili seluruh dokumen dan merupakan titik awal dari pohon DOM.
Sebagai contoh, HTMdocument di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is an example paragraph.</p>
</body>
</html>
misalnya, akan direpresentasikan dalam DOM sebagai struktur pohon kerangka dengan node bersarang untuk html, head, body, dan apa pun yang dikandungnya.
Skrip Java: Dan sekarang, mengakses DOM dengan JavaScript
JavaScript: Ada berbagai metode dan properti yang tersedia bagi Anda untuk memanipulasi DOM. Entri ke dalam DOM adalah document \object.
Contoh Cara memilih elemen mana yang akan dipilih
1. getElementById: Mengembalikan elemen yang atribut id-nya cocok dengan string yang ditentukan.
const header = document.getElementById('header');
2. getElementsByClassName: Memilih semua elemen yang memiliki kelas yang sama.
const items = document.getElementsByClassName('item');
3. getElementsByTagName: Mengidentifikasi semua elemen dengan nama tag tertentu.
const paragraphs = document.getElementsByTagName('p');
4. querySelector dan querySelectorAll: Memilih elemen menggunakan selektor CSS. querySelector untuk memilih beberapa elemen, dan querySelectorAll untuk memilih semua elemen.
const firstParagraph = document.querySelector('p');
const allParagraphs = document.querySelectorAll('p');
Memodifikasi Elemen DOM
Setelah kita memilih elemen, kita dapat melakukan berbagai hal pada elemen tersebut:
- Mengubah Konten Teks:
const header = document.querySelector('h1');header.textContent = 'Welcome to the DOM!';
- Mengubah Atribut:
const image = document.querySelector('img');image.setAttribute('alt', 'A beautiful scenery');
- Menambah atau Menghapus Kelas:
const element = document.querySelector('.box');
element.classList.add('highlight');
element.classList.remove('hidden');
- Menambah dan Menambahkan Elemen:
const newParagraph = document.createElement('p');newParagraph.textContent = 'This is a dynamically added paragraph.';document.body.appendChild(newParagraph);
Penanganan Peristiwa
DOM juga memberikan kemampuan kepada pengembang untuk merespons tindakan pengguna dengan menggunakan event. Sebagai contoh:
Kesimpulan
Anda telah berlatih sampai tanggal 2023-10. Wawasan tentang struktur DOM dan cara memodifikasinya dengan JavaScript dapat membuat pengembang memiliki cara yang tak terbatas untuk meningkatkan pengalaman pengguna. DOM adalah jantung dari pengembangan web, baik Anda membuat halaman web sederhana atau aplikasi yang canggih, mempelajari cara menavigasi dan memanipulasi DOM akan membuat Anda menjadi pengembang web yang lebih baik.
Kembali ke>>> Memulai dengan JavaScript: Dasar-dasarnya