Document Object Model (DOM) adalah representasi struktural dari dokumen HTML. DOM adalah pohon simpul yang dibuat browser untuk setiap halaman web di internet.

DOM berorientasi objek. Setiap elemen di DOM memiliki kumpulan atribut dan metodenya sendiri yang dapat Anda akses menggunakan JavaScript.

Dalam artikel tutorial ini, Anda akan mempelajari cara menggunakan fungsi pemilih DOM untuk mengakses elemen halaman web.

Cara Mengakses Elemen DOM

Anda dapat mengakses elemen DOM tingkat atas halaman web melalui objek dokumen global. Misalnya, jika Anda memiliki halaman web seperti berikut:

Selamat datang


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itque ut in delectus sint perspiciatis quos rem a, atque veniam.




Tentang


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itque ut in delectus sint perspiciatis quos rem a, atque veniam.







instagram viewer



Artikel



Judul Artikel Satu


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Baca selengkapnya 





Judul Artikel Dua


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Baca selengkapnya 





Judul Artikel Tiga


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Baca selengkapnya 





Judul Artikel Empat


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Baca selengkapnya 

Mengetik dokumen di konsol browser Anda dan menekan enter akan menghasilkan output berikut:

Output di konsol Anda bersifat interaktif. Anda dapat mengklik kepala dan tubuh elemen untuk mengembangkannya. Melakukannya akan menghasilkan output berikut:

Setiap elemen bagian dalam tag juga dapat diperluas. Bergantung pada struktur halaman web, elemen akan terus berkembang untuk mengungkapkan lebih banyak elemen. Ini akan memberi Anda pemahaman yang lebih jelas tentang struktur DOM.

Terkait: Pahlawan Tersembunyi Situs Web: Memahami DOM

Objek dokumen memiliki properti khusus, tubuh, mewakili elemen tubuh. Jadi, untuk mengakses elemen body, Anda dapat mengetikkan yang berikut di konsol:

document.body

Ini akan menghasilkan output berikut:

Tapi sejauh ini Anda bisa menggunakan properti objek. Setiap halaman memiliki kepala dan tubuh tetapi sebaliknya unik. Jadi mengetik document.body.section atau yang serupa tidak akan berfungsi seperti yang Anda inginkan. Sebagai gantinya, ada metode yang dapat Anda panggil pada objek dokumen untuk mengakses elemen tertentu.

Apa itu Pemilih Elemen DOM?

Pemilih elemen DOM adalah sekelompok metode JavaScript yang dapat Anda gunakan pada objek dokumen untuk mengakses elemen di halaman web. Pemilih elemen DOM memiliki dua kategori—selektor tunggal dan ganda.

Fungsi-fungsi ini bertindak dengan cara yang mirip dengan pemilih CSS. Mereka memungkinkan Anda untuk mengambil elemen berdasarkan nama tagnya, atau id dan atribut kelasnya. Anda bahkan dapat mengambil elemen menggunakan pemilih CSS apa pun.

Terkait: Cara Menargetkan Bagian dari Halaman Web Menggunakan Pemilih CSS

Selektor elemen tunggal adalah:

• getElementById()
• kueriPemilih()

Beberapa pemilih elemen adalah:

• getElementsByTagName()
• getElementsByClassName()
• kueriPemilihSemua()

Pemilih elemen DOM yang Anda gunakan akan bergantung pada elemen yang Anda coba akses.

Menggunakan Pemilih Elemen DOM Tunggal

Anda sebagian besar akan melihat pemilih dalam aplikasi JavaScript. Jadi, mari kita menjauh dari konsol. Buat file JavaScript dan tautkan ke file HTML Anda menggunakan tag skrip berikut:

Di mana nilai src adalah nama file JavaScript Anda. Tempatkan tag skrip ini tepat sebelum tag body penutup Anda, .

Itu getElementById() metode menyediakan akses ke satu elemen di halaman web menggunakan nilai ID-nya. Dalam dokumen HTML di atas terdapat beberapa elemen dengan ID. Untuk menargetkan div elemen dengan ID "artikel-3" Anda dapat menambahkan kode berikut ke file JavaScript Anda:

nilai = document.getElementById('artikel-3')

Sekarang elemen div dengan artikel-3 ID dan semua properti terkaitnya dapat diakses dari nilai variabel. Anda dapat mencetak nilai variabel ke konsol menggunakan baris kode berikut:

console.log (nilai)

Anda akan melihat nama kelas yang ditetapkan ke elemen div serta atribut penting lainnya, seperti HTML bagian dalam.

Pemilih elemen tunggal lainnya adalah kueriPemilih(). Fungsi ini lebih fleksibel, karena Anda dapat meneruskannya ke string pemilih CSS apa pun. Namun, Anda masih hanya dapat menggunakannya untuk memilih satu elemen dalam satu waktu.

Misalnya, ada satu kelas dalam tata letak HTML di atas—artikel. Empat elemen div menggunakan kelas ini, tetapi kueriPemilih() fungsi hanya akan mengembalikan elemen pertama yang memiliki kelas "artikel".

Menggunakan querySelector() Dengan Kelas

Tambahkan kode berikut di akhir skrip Anda:

nilai = document.querySelector('.artikel')
console.log (nilai)

Ini hanya akan mengembalikan yang pertama div elemen dengan kelas "artikel". Perhatikan bahwa Anda menentukan pemilih dalam format yang sama dengan pemilih CSS. Di CSS, titik awal menentukan nama kelas.

Menggunakan querySelector() Dengan ID

nilai = document.querySelector('#artikel-3')
console.log (nilai)

Kode ini akan mengembalikan satu-satunya elemen dengan ID "artikel-3", yang ketiga div elemen dengan kelas "artikel". Sekali lagi, string pemilih menggunakan sintaks CSS standar, dengan a # simbol yang menentukan ID.

Menggunakan Beberapa Pemilih Elemen DOM

Fungsi pemilih yang tersisa mengambil grup elemen. Mereka getElementsByTagName(), getElementsByClassName(), dan kueriPemilihSemua().

Menggunakan getElementsByTagName()

Itu getElementsByTagName() pemilih mengambil sekelompok elemen dengan nama tag yang sama. Misalnya, jika Anda ingin memilih semua h2 elemen pada halaman web, Anda dapat menggunakan kode berikut:

nilai = document.getElementsByTagName('h2')
console.log (nilai)

Ini menyimpan semua elemen h2 dalam koleksi HTML yang disebut nilai.

Menggunakan getElementsByClassName()

Itu getElementsByClassName() pemilih mengembalikan koleksi elemen dengan nama kelas yang sama.

nilai = document.getElementsByClassName('artikel')
console.log (nilai)

Memasukkan kode di atas ke dalam file JavaScript Anda akan mengembalikan empat elemen div dengan nama kelas "artikel" di konsol browser.

Menggunakan querySelectorAll()

Itu kueriPemilihSemua() metode mengembalikan daftar simpul dari semua elemen yang cocok dengan pemilih yang diberikan. Untuk mengakses semua elemen paragraf di bagian blog, Anda dapat menggunakan kode berikut:

nilai = document.querySelectorAll('#blog p')
console.log (nilai)

Anda bahkan dapat menyertakan beberapa penyeleksi dalam string, memisahkan masing-masing dengan koma, seperti pada CSS:

nilai = document.querySelectorAll('h2, .articles')
console.log (nilai)

Gunakan Pemilih DOM untuk Membuat Halaman Web Dinamis

Pada titik ini, Anda harus memiliki pemahaman yang jelas tentang DOM dan cara kerjanya. Anda juga harus mengetahui selektor tunggal dan ganda yang berbeda, serta cara menggunakannya.

Namun, mendapatkan akses ke elemen HTML hanyalah langkah pertama dalam apa yang dapat Anda lakukan dengan pemilih DOM. Pemilih DOM akan sangat membantu Anda mengembangkan aspek fungsional situs web Anda, seperti menangani peristiwa onclick dan onscroll.

Cara Membuat Website Anda Responsif dan Interaktif Dengan CSS dan JavaScript

Anda telah menyiapkan situs web Anda dengan HTML dan CSS, tetapi sekarang Anda perlu menambahkan logika. Inilah yang harus dilakukan.

Baca Selanjutnya

Tentang Penulis