Mari Belajar Fundamendal DOM (Document Object Model)
Document Object Model, atau "DOM," mendefinisikan struktur logis dari dokumen HTML dan pada dasarnya bertindak sebagai antarmuka ke halaman web. Dengan menggunakan bahasa pemrograman seperti JavaScript, Anda dapat mengakses DOM untuk berinteraksi dengan situs web Anda dan menjadikannya interaktif.
Pada artikel ini, kita akan melihat DOM tree dan node dan bekerja dengan objek dokumen. Ayo mulai!
Apa itu DOM?
Pada dasarnya, situs web Anda harus terdiri dari dokumen HTML index.html. Gunakan browser Anda untuk melihat situs web yang dirender dari file HTML dan file CSS yang ingin Anda tambahkan gaya dan aturan tata letak.
Browser juga membuat representasi dari dokumen ini yang disebut Document Object Model. JavaScript dapat menggunakan DOM untuk mengakses dan memodifikasi konten dan elemen situs web.
Untuk melihat DOM menggunakan browser web, klik kanan di mana saja pada halaman dan pilih Inspect. Ini akan membuka alat developer berikut:
DOM ditampilkan di bawah tab Elemen. Anda juga dapat melihatnya dengan memilih tab Konsol dan mengetik Dokumen.
Objek dokumen
Objek dokumen adalah objek bawaan yang berisi banyak properti dan metode.
Akses objek ini dan manipulasi dengan JavaScript. Dan dengan memanipulasi DOM, Anda dapat membuat halaman web Anda menjadi sangat interaktif. Ini lebih dari sekadar membangun situs statis dengan konten HTML bergaya.
Anda sekarang dapat membuat aplikasi yang memperbarui data halaman tanpa memperbarui. Pengguna sekarang dapat menyesuaikan tata letak halaman untuk membuat elemen drag-and-drop, game dalam browser, jam, timer, dan animasi kompleks. Menggunakan DOM membuka banyak kemungkinan.
Sekarang mari kita lakukan operasi DOM pertama
Buka www.google.com dan buka Developer Tools. Kemudian pilih tab Konsol dan ketik:
document.body.style.backgroundColor = ‘orange’;
Saat Anda menekan tombol Enter, Anda dapat melihat bahwa warna latar belakang telah berubah menjadi oranye.
Tentu saja, saya belum mengedit kode sumber Google (!), Tetapi dengan memanipulasi objek document, saya mengubah cara konten dirender secara lokal di browser.
document adalah objek dan body adalah properti yang Anda pilih untuk diedit dengan mengakses atribut style dan mengubah backgroundColor menjadi oranye.
Perhatikan bahwa alih-alih background-color yang digunakan dalam CSS, JavaScript menggunakan backgroundColor camelcase. Properti CSS dengan tanda hubung dijelaskan dalam camelcase JavaScript.
Anda dapat melihat tweak DOM di bawah elemen body pada tab Elements, atau dengan mengetik document.body di konsol.
Karena Anda memanipulasi DOM secara langsung di browser, Anda belum benar-benar mengubah kode sumbernya. Jika Anda me-refresh browser Anda, itu akan kembali ke keadaan semula.
DOM Tree & Nodes
Sering disebut sebagai DOM tree, terutama karena tata letak DOM.
tree terdiri dari objek-objek yang disebut node. Ada banyak jenis node yang berbeda, tetapi kebanyakan menggunakan node elemen (elemen HTML), node teks (konten teks apa pun), dan node komentar (kode komentar). Objek dokumen adalah nodenya sendiri di root.
<!DOCTYPE html>
<html>
<head>
<title>Nodes</title>
</head>
<body>
<h1>This is an element node</h1>
<!-- This is a comment node -->
This is a text node.
</body>
</html>
Saat bekerja dengan DOM nodes, ia juga disebut sebagai parent, child, atau siblings, tergantung pada bagaimana ia berhubungan dengan node lain.
Pada contoh kode di atas, node elemen html adalah node parent dan elemen head dan body adalah siblings. body juga berisi tiga node child (siblings yang saling terkait, seperti tree keluarga). Ini akan dibahas lebih rinci nanti di artikel ini.
Bagaimana mengidentifikasi jenis node
Oleh karena itu, setiap node dalam dokumen memiliki tipe dan Anda dapat mengakses tipe tersebut menggunakan properti nodeType. Lihat daftar lengkap jenis node di sini.
Mari kita lihat beberapa contoh tipe yang ada pada contoh sebelumnya.
<html>, <title>, <body>, dan <h1> adalah tipe ELEMENT_NODE dengan nilai 1.
Teks kami This is a text node. Di dalam body, bukan di dalam elemen, adalah TEXT_NODE dengan nilai 3.
Dan komentar <! -Ini adalah node komentar-> adalah tipe COMMENT_NODE dengan nilai 8.
Bagaimana saya bisa memeriksa jenis node?
Buka tab Elemen di alat pengembangan Anda dan klik baris mana pun. Nilai == $0 ditampilkan di sebelahnya. Sekarang buka tab Konsol dan ketik $0 untuk melihat nilai untuk node yang dipilih. Untuk memeriksa jenis node, lakukan hal berikut:
$0.nodeType;
Jumlah jenis node yang sesuai dengan node yang dipilih akan ditampilkan. Misalnya, jika Anda memilih h1, 1 akan ditampilkan. Jika Anda melakukan hal yang sama untuk teks, Anda mendapatkan 3 dan komentar 8.
Juga, jika Anda tahu di mana node berada di DOM, Anda tidak perlu memilih node secara manual. Misalnya, Anda dapat mengaksesnya secara langsung sebagai berikut:
document.body.nodeType; // 1
Anda juga dapat menggunakan nodeValue untuk mendapatkan nilai teks atau komentar node dan nodeName untuk mendapatkan nama tag elemen.
kesimpulan
Di artikel berikutnya, Anda akan mempelajari cara bekerja dengan elemen DOM menggunakan metode getElementById(), getElementsByClassName(), getElementsByTagName(), querySelector(), dan querySelectorAll().
terimakasih telah membaca, semoga artikel ini dapat bermanfaat bagi teman-teman :).