Tutorial ini akan menunjukkan berbagai metode untuk memilih elemen DOM dalam JavaScript.
Apa Perbedaan Cara Memilih Elemen DOM di JavaScript?
Gunakan metode berikut untuk memilih elemen DOM di JavaScript:
- metode getElementById()
- metode getElementsByClassName()
- metode getElementsByTagName()
- metode querySelector()
- metode querySelectorAll()
Metode 1: Pilih Elemen DOM Menggunakan Metode “getElementById()”.
Untuk memilih elemen DOM gunakan “ getElementById() ” metode berdasarkan id yang ditugaskan elemen. Metode ini memilih satu elemen dengan keunikannya “ pengenal ” atribut. Ini memberikan referensi ke elemen dengan id yang ditentukan dan mengembalikan ' batal ” jika tidak ditemukan elemen yang cocok.
Sintaksis
Gunakan sintaks yang diberikan di bawah ini untuk metode getElementById() :
dokumen. getElementById ( 'namaid' )
Di sini, “ idName ” adalah nama atribut id yang ditetapkan ke suatu elemen.
Contoh
Dalam file HTML, buat dua judul dalam elemen div menggunakan “ h4 ” tag. Tetapkan id ke elemen div dan tajuk elemen 'h4' bernama ' div ' Dan ' menuju ”, masing-masing. Tambahkan atribut style ke elemen div untuk menyelaraskannya di tengah. Juga, tetapkan kelas “ bagian ” ke heading kedua yang berubah warna:
< div pengenal = 'div' gaya = 'perataan teks: tengah;' >< h4 pengenal = 'menuju' > Akses Elemen DOM Menggunakan Metode Berbeda < / h4 >
< h4 kelas = 'bagian' pengenal = 'menuju' > Pilih Elemen DOM dalam JavaScript Menggunakan Metode 'getElementById()'
< / h4 >
< / div >
Sekarang, kita akan mendapatkan ' div ” elemen menggunakan id yang ditugaskan dengan bantuan “ getElementById() ' metode:
dulu getById = dokumen. getElementById ( 'div' ) ;Cetak elemen terhadap id “ div ” di konsol:
menghibur. catatan ( getById ) ;Dapat dilihat bahwa elemen HTML yang diperlukan telah berhasil diambil:
Metode 2: Pilih Elemen DOM Menggunakan Metode “getElementsByClassName()”.
Anda juga dapat memilih elemen DOM menggunakan kelas yang ditetapkan dengan bantuan “ getElementsByClassName() ' metode. Itu memilih daftar elemen dengan nama kelas mereka. Ini menampilkan objek HTMLCollection langsung, objek mirip array yang berisi semua elemen dengan nama kelas yang ditentukan.
Sintaksis
Sintaks berikut digunakan untuk metode “getElementsByClassName()”:
dokumen. getElementsByClassName ( 'nama kelas' )Contoh
Di sini, kita akan mendapatkan elemen yang berisi class “ bagian ” dan cetak di konsol:
dulu getByClass = dokumen. getElementsByClassName ( 'bagian' ) ;menghibur. catatan ( getByClass ) ;
Seperti yang Anda lihat di output, array dengan panjang 1 dikembalikan yang berisi elemen “ h4 ' siapa yang termasuk kelas ' bagian ”:
Metode 3: Pilih Elemen DOM Menggunakan Metode “getElementsByTagName()”.
Jika tidak ada id atau kelas yang ditetapkan ke suatu elemen, gunakan ' getElementsByTagName() ” metode untuk mendapatkan elemen dengan nama tag mereka. Itu juga mengembalikan objek HTMLCollection langsung, yang merupakan objek mirip array yang berisi semua elemen yang memiliki nama tag yang ditentukan.
Sintaksis
Ikuti sintaks yang diberikan untuk memilih elemen berdasarkan nama tag:
getElementsByTagName ( namatag )Contoh
Aktifkan metode “getElementsByTagName()” dengan meneruskan nama tag “ h4 ”. Kemudian, cetak daftar elemen yang cocok dengan nama tag yang ditentukan di konsol:
dulu getByTag = dokumen. getElementsByTagName ( 'h4' ) ;menghibur. catatan ( getByTag ) ;
Keluaran
Metode 4: Pilih Elemen DOM Menggunakan Metode “querySelector()”.
Menggunakan ' querySelector() ” metode untuk mendapatkan elemen DOM. Itu memilih satu elemen yang cocok dengan pemilih CSS yang ditentukan. Ini mengembalikan elemen pencocokan pertama yang ditemukan dalam dokumen. Jika tidak ada elemen yang cocok, itu memberi ' batal ”.
Sintaksis
Sintaks yang disebutkan di bawah ini digunakan untuk metode “querySelector()”:
dokumen. querySelector ( atribut )Di sini, atributnya adalah pemilih CSS, seperti id atau kelas sebagai “ #myId ” “ .kelasku “.
Contoh
Panggil metode 'querySelector()' dan berikan id ' #menuju ” untuk mendapatkan elemen yang berisi id yang sama:
dulu getByquery = dokumen. querySelector ( '#menuju' ) ;menghibur. catatan ( getByquery ) ;
Ini memberikan elemen pertama yang cocok sebagai output:
Metode 5: Pilih Elemen DOM Menggunakan Metode “querySelectorAll()”.
Jika Anda ingin memilih semua elemen yang berisi atribut tertentu (id atau class), gunakan tombol “ querySelectorAll() ' metode. Itu memilih daftar elemen yang cocok dengan pemilih CSS tertentu yang ditentukan. Ini memberikan objek NodeList yang berisi semua elemen dalam dokumen yang cocok dengan pemilih CSS tertentu.
Sintaksis
Gunakan sintaks berikut untuk mendapatkan daftar elemen:
dokumen. querySelectorAll ( atribut )Contoh
Untuk mendapatkan daftar elemen yang cocok yang berisi id “ menuju ' dengan ' querySelectorAll() ” metode dan cetak pada elemen di konsol:
dulu getByqueryAll = dokumen. querySelectorAll ( '#menuju' ) ;menghibur. catatan ( getByqueryAll ) ;
Keluaran
Itu semua tentang memilih elemen DOM di JavaScript.
Kesimpulan
Untuk memilih elemen DOM dalam JavaScript, gunakan “ getElementById() ”, “ getElementsByClassName() ”, “ getElementsByTagName() ”, “ querySelector() ”, atau “ querySelectorAll() ' metode. Metode ini menyediakan berbagai cara untuk memilih elemen dari DOM berdasarkan pengidentifikasi unik, nama kelas, nama tag, atau pemilih CSS. Tutorial ini menunjukkan berbagai metode untuk memilih elemen DOM dalam JavaScript.