Tutorial ini akan menunjukkan kaedah yang berbeza untuk memilih elemen DOM dalam JavaScript.
Apakah Cara Berbeza untuk Memilih Elemen DOM dalam JavaScript?
Gunakan kaedah berikut untuk memilih elemen DOM dalam JavaScript:
- kaedah getElementById().
- kaedah getElementsByClassName().
- kaedah getElementsByTagName().
- kaedah querySelector().
- kaedah querySelectorAll().
Kaedah 1: Pilih Elemen DOM Menggunakan Kaedah 'getElementById()'.
Untuk memilih elemen DOM gunakan ' getElementById() ” kaedah berdasarkan id yang diberikan elemen. Kaedah ini memilih satu elemen dengan ' uniknya ' ID ” atribut. Ia memberikan rujukan kepada elemen dengan id yang ditentukan dan mengembalikan ' null ” jika tiada unsur yang sepadan ditemui.
Sintaks
Gunakan sintaks yang diberikan di bawah untuk kaedah getElementById():
dokumen. getElementById ( 'idName' )
Di sini, ' idName ” ialah nama atribut id yang diberikan kepada elemen.
Contoh
Dalam fail HTML, buat dua tajuk dalam elemen div menggunakan ' h4 ” tag. Berikan id kepada elemen div dan tajuk 'h4' elemen bernama ' div ” dan “ tajuk ”, masing-masing. Tambahkan atribut gaya pada elemen div untuk menjajarkannya di tengah. Juga, tetapkan kelas ' bahagian ” kepada tajuk kedua yang menukar warnanya:
< div ID = 'div' gaya = 'text-align:center;' >< h4 ID = 'tajuk' > Akses Elemen DOM Menggunakan Kaedah Berbeza < / h4 >
< h4 kelas = 'bahagian' ID = 'tajuk' > Pilih Elemen DOM dalam JavaScript Menggunakan Kaedah 'getElementById()'
< / h4 >
< / div >
Sekarang, kita akan mendapat ' div elemen ' menggunakan id yang ditetapkan dengan bantuan ' getElementById() ' kaedah:
adalah getById = dokumen. getElementById ( 'div' ) ;Cetak elemen terhadap id ' div ” pada konsol:
konsol. log ( getById ) ;Ia boleh dilihat bahawa elemen HTML yang diperlukan telah berjaya diambil:
Kaedah 2: Pilih Elemen DOM Menggunakan Kaedah 'getElementsByClassName()'.
Anda juga boleh memilih elemen DOM menggunakan kelas yang ditetapkan dengan bantuan “ getElementsByClassName() ” kaedah. Ia memilih senarai elemen mengikut nama kelas mereka. Ia mengeluarkan objek HTMLCollection langsung, objek seperti tatasusunan yang mengandungi semua elemen dengan nama kelas yang ditentukan.
Sintaks
Sintaks berikut digunakan untuk kaedah 'getElementsByClassName()':
dokumen. getElementsByClassName ( “Nama kelas” )Contoh
Di sini, kita akan mendapat elemen yang mengandungi kelas “ bahagian ” dan cetak pada konsol:
adalah getByClass = dokumen. getElementsByClassName ( 'bahagian' ) ;konsol. log ( getByClass ) ;
Seperti yang anda lihat dalam output, tatasusunan panjang 1 dikembalikan yang mengandungi elemen ' h4 'siapa yang tergolong dalam kelas' bahagian ”:
Kaedah 3: Pilih Elemen DOM Menggunakan Kaedah 'getElementsByTagName()'.
Sekiranya tiada id atau kelas yang diberikan kepada elemen, gunakan ' getElementsByTagName() ” kaedah untuk mendapatkan elemen dengan nama tag mereka. Ia juga mengembalikan objek HTMLCollection langsung, yang merupakan objek seperti tatasusunan yang mengandungi semua elemen yang mempunyai nama teg yang ditentukan.
Sintaks
Ikuti sintaks yang diberikan untuk memilih elemen berdasarkan nama teg:
getElementsByTagName ( tagName )Contoh
Guna kaedah 'getElementsByTagName()' dengan menghantar nama teg ' h4 ”. Kemudian, cetak senarai elemen yang sepadan dengan nama teg yang ditentukan pada konsol:
adalah getByTag = dokumen. getElementsByTagName ( 'h4' ) ;konsol. log ( getByTag ) ;
Pengeluaran
Kaedah 4: Pilih Elemen DOM Menggunakan Kaedah 'querySelector()'.
Menggunakan ' querySelector() ” kaedah untuk mendapatkan elemen DOM. Ia memilih satu elemen yang sepadan dengan pemilih CSS tertentu. Ia mengembalikan elemen padanan pertama yang ditemui dalam dokumen. Jika tiada unsur dipadankan, ia memberikan “ null ”.
Sintaks
Sintaks yang disebutkan di bawah digunakan untuk kaedah 'querySelector()':
dokumen. querySelector ( atribut )Di sini, atribut ialah pemilih CSS, seperti id atau kelas sebagai “ #myId ” “ .kelas saya “.
Contoh
Panggil kaedah 'querySelector()' dan lulus id ' #heading ” untuk mendapatkan elemen yang mengandungi id yang sama:
adalah getByquery = dokumen. querySelector ( '#heading' ) ;konsol. log ( getByquery ) ;
Ia memberikan elemen dipadankan pertama sebagai output:
Kaedah 5: Pilih Elemen DOM Menggunakan Kaedah 'querySelectorAll()'.
Jika anda ingin memilih semua elemen yang mengandungi atribut tertentu (id atau kelas), gunakan “ querySelectorAll() ” kaedah. Ia memilih senarai elemen yang sepadan dengan pemilih CSS tertentu yang ditentukan. Ia memberikan objek NodeList yang mengandungi semua elemen dalam dokumen yang sepadan dengan pemilih CSS tertentu.
Sintaks
Gunakan sintaks berikut untuk mendapatkan senarai elemen:
dokumen. querySelectorAll ( atribut )Contoh
Untuk mendapatkan senarai elemen dipadankan yang mengandungi id “ tajuk ' dengan ' querySelectorAll() ” kaedah dan cetak pada elemen pada konsol:
adalah getByqueryAll = dokumen. querySelectorAll ( '#heading' ) ;konsol. log ( getByqueryAll ) ;
Pengeluaran
Itu sahaja tentang memilih elemen DOM dalam JavaScript.
Kesimpulan
Untuk memilih elemen DOM dalam JavaScript, gunakan ' getElementById() ”, “ getElementsByClassName() ”, “ getElementsByTagName() ”, “ querySelector() ', atau ' querySelectorAll() ” kaedah. Kaedah ini menyediakan cara yang berbeza untuk memilih elemen daripada DOM berdasarkan pengecam uniknya, nama kelas, nama teg atau pemilih CSS. Tutorial ini menunjukkan kaedah yang berbeza untuk memilih elemen DOM dalam JavaScript.