Javascript dan DOM
Permulaan
DOM dapat didefinisikan sebagai programming interface untuk sebuah html yang akan direpresentasikan dalam sebuah halaman web, sehingga program dapat mengubah dan memanipulasi strukturnya. DOM merupakan singakatan dari Document Object Model yang merupakan representasi dari elemen HTML pada dokumen website yang dimana elemen web tersebut dikenali oleh sebuah browser menjadi sebuah objek, komponen dari DOM ini dapat berupa elemen dari html, atribut, text, events dan masih banyak lagi.
Kemudian DOM tersebut akan tersimpan sebagai sebuah DOM Tree pada sebuah memori dan kita dapat memanipulasinya menggunakan javascript. Penggambaran konsep dari DOM Tree ini semacam seperti silsilah dalam sebuah keluarga jadi pasti ada sebuah sumber dan turunan turunan nya, gimana bingung? sama brow.
Oke sempat disinggung bahwa penggambaran DOM Tree ini semacam seperti silsilah dalam sebuah keluarga. Jadi gini, didalam sebuah DOM Tree memiliki banyak struktur hirarki, ada banyak sekali struktur hirarki tapi yang akan dibahas kali ini hanya beberapa hirarki seperti root node, parent node, child node. Dari ketiga konsep hirarki itupun keknya udah cukup 🤔.
root node merupakan sumber dari semua peradaban node lain yang berada di dalam sebuah DOM, ya kalian bisa asumsikan di silsilah keluarga kalau root node ini nabi adam karena mengawali peradaban di dunia ini 😂
contoh : <html>
<html> -- 👴🏻 Root Node
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>Parent Node
parent node merupakan node yang berada di satu tingkat diatas node yang lain
contoh: tag <body> merupakan parent dari <h1>, <p>, <div> dan lain lain.
<html>
<head> -- 👪 Parent Node
<title>Page Title</title>
</head>
<body> -- 👪 Parent Node
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>Child Node
child node merupakan node yang berada di satu tingkat dibawah node yang lain
contoh : tag <h1> merupakan child dari body
<html>
<head>
<title>Page Title</title> -- 🧒🏻 Child Node
</head>
<body>
<h1>This is a Heading</h1> -- 🧒🏻 Child Node
<p>This is a paragraph.</p> -- 🧒🏻 Child Node
</body>
</html>Seleksi elemen dalam DOM (DOM Selection)
DOM Selection merupakan tahapan untuk melakukan manipulasi di dalam sebuah DOM, jadi untuk melakukan manipulasi sebuah DOM harus tau bagaimana menyeleksi sebuah elemen tersebut dari sebuah tag html.
Ada beberapa cara untuk meyeleksi sebuah elemen dalam html, antara lain :
- Menyeleksi elemen HTML berdasarkan attribut id
- Menyeleksi elemen HTML berdasarkan nama tag
- Menyeleksi elemen HTML berdasarkan nama class
- Menyeleksi elemen HTML berdasarkan selector dari CSS
Contoh melakukan seleksi berdasarkan ber-attribut id :
<h1 id="id_kalimat">Judul</h1>let kalimat = document.getElementById('id_kalimat')
console.log(kalimat)Syntax diatas akan melakukan pencarian elemen berdasarkan id yang dicari, ketika pencarian berhasil maka aka melakuka return sebuah element dan apabila pencarian gagal akan mereturn nilai null. Ketika sebuah DOM berhasil diakses maka kita dapat memanipulasinya dengan berbagai opsi, dalam kasus ini akan mencontohkan merubah isi dari teks dan mengubah tampilan teks.
let kalimat = document.getElementById('id_kalimat')
kalimat.style.color = 'green'
kalimat.innerHTML = "Kamu lucu kak 🥺"
kalimat.style.backgroundColor = '#CCC'Hmmmm kode diatas, merupakan contoh memanipulasi elemen dalam html dimana elemen yang memiliki id_kalimat akan diubah style warnanya menjadi hijau dan mengisikan teks tersebut menggunakan innerHTML dengan sebuah kalimat serta merubah warna begron elemen menjadi kelawu.
Hasil
Kesimpulan
Sebenernya masih banyak lagi hal tentang DOM lebih luas tapi ya kalian bisa explore lebih dalam lagi. Kalian tentukan sendiri kesimpulannya, kalo masih belum paham ya rasain 😬.