Javascript dan DOM

TeknisTakis Feb 29, 2020

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 😬.

flatburger

🏙 warga gotham biasa

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.