Flatburger

🎑 DOM dan Javascript

January 24, 2020 β€’ β˜•οΈ 4 min read

πŸƒπŸ»β€β™‚οΈ 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.

🌴 DOM Tree

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.

DIAGRAM

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 πŸ€”ehem.

DIAGRAM

πŸ‘΄πŸ» Root Node

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 hehe, becanda πŸ˜‚.

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

DIAGRAM

πŸ‘¨πŸΌβ€πŸ’» Kesimpulan

Sebenernya masih banyak lagi hal tentang DOM lebih luas tapi ya mo gimana lagi lawong nulis buat nginget-nginget doang sambil ngisi kegabutan WKWKW. Kalian tentukan sendiri kesimpulannya, kalo masih belum paham ya rasain 😬.

πŸ“š Referensi

https://www.w3schools.com/js/jshtmldomelements.asp

https://developer.mozilla.org/en-US/docs/Web/API/DocumentObjectModel/Introduction