Menggunakan HTMLCollection Object Pada DOM Javascript

Hai teman-teman semuanya pada tutorial sebelumnya saya telah sedikit membahas tentangÂ Memahami HTMLCollection Object Pada DOM Javascript ynag linknya bisa teman-teman baca dibawah ini

https://www.kursuswebsite.org/memahami-htmlcollection-object-pada-dom-javascript/#more-11119

nah sekarang kita akan bahas bagaimana cara menggunakan key-key yang ada adalam HTMLCollection object javascript ini, kita masih menggunakan file sebelumnya yakni scriptnya seperti berikut ini:

<div id="container">
	<input type="text" name="name">
	<button id="submit">Add</button>
</div>

<script>
	var container = document.getElementById('container')
	console.log(container)
</script>

yang apabila kita buka tab console.log maka akan menampilkan seperti ini :

agn jika kita klik element divnya maka akan lihat banyak sekali HTMLCollection object yang bisa kita gunakan seperti gambar berikut ini:

Nah disini kita akan coba menggunakan HTMLCollection object yang sudah kita dapat ini untuk bermain dengan DOM javascript yakni memanipulasi element html,

Coba sekarang teman-teman tambahkan script diatas tadi menjadi script berikut ini :

<div id="container">
	<input type="text" name="name">
	<button id="submit">Add</button>
</div>

<script>
	var container = document.getElementById('container')
	var last = container.lastElementChild
	last.style.background = "red"
</script>

Saya menambahkan variable last yang nilainya adalah variable container.lastElementChild,

lastElementChild adalah salah satu nilai yang bisa kita gunakan ketika kita meng console containernya tadi.

Jika teman-teman buka pada browser maka hasilnya akan seperti ini :

Jadi teman-teman bisa praktekan dan coba-coba sendiri nilai yang terdapat didalam htmlcollection object tadi.

Oke teman-teman saya rasa untuk tuturial kali ini tentangÂ Menggunakan HTMLCollection Object Pada DOM JavascriptÂ saya rasa cukup sampai sini dulu semoga tutorial yang singkat ini dapat bermanfaat untuk teman-teman semua, sampai bertemu lagi pada tutorial berikutnya

Terima kasih

Menggunakan HTMLCollection Object Pada DOM Javascript

Kategori