Javascript DOM : DOM selection

Javascript DOM : DOM selection 

Kita akan masuk kedalam topik yang sangat penting yaitu tentang DOM selection dimana kita di sini akan memilih element element pada DOM menggunakan Javascript

Dom selection methode

1.getElementById()

Methode yang paling simple dimana kita menyeleksi sebuah element berdasarkan ID nya.jika kalian ingat di dalam suatu dokument html hanya boleh ada 1 nama ID tidak boleh ada nama Id lain

2.getElementsByTagName()

Kita menyeleksi element element yang memiliki nama tag tertentu

3.getElementsByClassName()

Carikan element yang memiliki nama class tertentu

4.querySelector()

5.querySelectorAll()

Kedua methode ini sama sama diperuntukan untuk mencari element berdasarkan selectornya selector ini bisa kalian anggap ketika kalian mencari sebuah element menggunakan css

Apa yang dikembalikan dari masing masing methode tersebut



1.contoh getElementById()

const judul = document.getElementById('judul');

Misal kita mempunyai element h1 dengan Id judul di dalam html lalu kita tangkap di dalam javascript menggunakan methode getElementById (), lalu kita simpan di dalam variabel constanta judul nah sekarang kita bisa mengubah atau memanipulasi element tersebut contoh sederhananya kita ingin mengubah warna tulisan pada element nya kita bisa menuliskan

judul.style.color = 'red'

atau misal element h1 nya berisi teks hello world kita ingin mengubahnya menjadi hallo dunia kita bisa menuliskan

judul.innerHtml = 'hallo dunia'

2.contoh getElementsByTagName()

const lis = document.getElementsByTagName('p')

Jika kalian menuliskan seperti ini maka kalian akan menyeleksi seluruh p yang ada di dalam html kalian dan ini akan menghasilkan HtmlCollection dan ini mirip dengan array nah karena mirip array berarti dia mempunyai index jadi jika kalian ingin memanipulasi nya kalian tidak bisa seperti ini

lis.style.color = 'red'

Jika kalian jalankan ini maka akan error supaya tidak error kita harus menaruh index dulu dalam code nya misal 

lis[1].style.color = 'red'

Dengan menuliskan seperti ini maka p yang kedua di dalam html kalian akan berubah menjadi warna merah.

Dan jika kita ingin menyeleksi semua nya gimana?

Misal di html kalian ada 20 element p maka kalian bisa menggunakan perulangan atau looping untuk menyeleksi semua nya contoh

for (let i = 0 ; i <= lis.length;i++){

lis[i].style.color = 'red'

}

Atau kalian juga bisa begini

const lis = document.getElementsByTagName('p')[0].style.color = 'red'

3.contoh getElementsByClassName()

const el = document.getElementsByClassName('paragraf)

Cari element element yang terdapat class paragraf di dalam nya dan ini sama aja mengembalikan HtmlCollection

const el = document.getElementsByClassName('paragraf)

el[1].innerHtml = 'ini diubah menggunakan Javascript';

4. Contoh querySelector()

query selector ITU seperti men selector css dan querySelector sama dengan getelembyid dia menghasilkan elemet

const judul = document.querySelector('body .container #judul')

judul.innerHtml = 'gimasn';

5.contoh querySelectorAll

query selectorall cara kerjamlmya sama tapi yang membedakan dia menghasilkan NodeList karena kita bisa menangkap lebih dari satu node contoh

const get = document.querySelectorAll('li');

Kita tahu kalau NodeList ITU mirip array dan karena itu querySelectorAll membutuhkan index misal

get[1].style.color = 'skyblue'

Ada satu cara penting mengenai mengubah node root

Coba perhatikan dan pahami code tersebut

const container = get.ElementById('.container')

const h1 = container.querySelector('p')

Mungkin ITU saja penjelasan tentang dom selection terima kasih telah membaca semoga mudah di pahami