Kapan pun kita ingin mengakses dan mendapatkan elemen yang ada di DOM HTML dalam javascript, kita bisa mendapatkan elemen tersebut baik berdasarkan id, kelas, atau namanya. Ada metode dan fungsi yang telah ditentukan yang disediakan untuk mengakses elemen HTML dalam javascript yang disebutkan di antarmuka Dokumen. Pada artikel ini, kita akan belajar bagaimana kita dapat mengakses suatu elemen berdasarkan kelasnya
Paket Pengembangan Perangkat Lunak Semua dalam Satu(600+ Kursus, 50+ proyek)
Harga
Lihat Kursus
600+ Kursus Daring. 50+ proyek. 3000+ Jam. Sertifikat yang Dapat Diverifikasi. Akses Seumur Hidup
4. 6 (86.130 peringkat)
Metode GetElementsByClassName() digunakan untuk mengambil kumpulan atau larik dari semua elemen HTML yang merupakan simpul anak dari elemen yang memanggil metode ini dan memiliki kelas seperti yang disebutkan dalam parameter metode ini. Jika kita ingin mengambil elemen lebih dari satu kelas, kita dapat menentukan beberapa nama kelas dengan memisahkan semua nama kelas dengan spasi. Metode ini dapat dipanggil dari dokumen atau menggunakan elemen lain. Setiap kali metode dipanggil menggunakan dokumen, maka semua simpul anak DOM termasuk simpul akar dicari untuk kelas yang cocok seperti yang ditentukan dalam parameter metode saat dipanggil. Jika metode dipanggil menggunakan objek lain, maka semua elemen HTML yang merupakan simpul anak dicari untuk nama kelas yang cocok.
Mulai Kursus Pengembangan Perangkat Lunak Gratis Anda
Pengembangan web, bahasa pemrograman, pengujian Perangkat Lunak & lainnya
Sintaksis
var htmlElements = document.getElementsByClassName(class names seperated with space);ATAU
var htmlElements = rootElement.getElementsByClassName(class names seperated with space);_Contoh untuk Menerapkan JavaScript Dapatkan Elemen berdasarkan Kelas
Di bawah ini adalah contoh JavaScript Get Element by Class
Contoh 1
Cakupan dokumen dengan satu kelas. Mari kita lihat bagaimana kita bisa menggunakan metode ini untuk semua elemen DOM untuk satu kelas dengan bantuan sebuah contoh
Kode
<!DOCTYPE html> <html> <body> <h2>Demonstration of getting elements of a particular class in javascript</h2> <div class="sample">IT Websites.</div> <div class="demo">Educational Websites.</div> <div class="sample">EDUCBA is the best platform to learn languages.</div> <p>Let us change the background color of all the elements of the DOM who have sample class to pink.</p> <button title="sampleFunction()">Change background color of elements with sample class</button> <script> function sampleFunction() { var myElements = document.getElementsByClassName("sample"); for(var counter = 0; counter < myElements.length; counter++){ myElements[counter].style.background = "pink"; } } </script> </body> </html>Keluaran
Setelah mengklik tombol “Ubah warna latar belakang elemen dengan kelas sampel” adalah sebagai berikut –
Contoh #2
Lingkup Dokumen dengan Banyak Kelas. Sekarang mari kita pelajari bagaimana kita bisa mengambil elemen dari semua DOM dengan kelas yang ditentukan lebih dari satu dalam parameter metode getElementsByClass()
Kode
<!DOCTYPE html> <html> <body> <h2>Demonstration of getting elements of a multiple class in javascript</h2> <div class="sample">IT Websites.</div> <div class="demo">Educational Websites.</div> <div class="sample demo">Educational IT Websites.</div> <div class="sample">EDUCBA is the best platform to learn languages.</div> <p>Let us change the background color of all the elements of the DOM who have sample class to pink.</p> <button title="sampleFunction()">Change background color of elements with sample or demo class</button> <script> function sampleFunction() { var myElements = document.getElementsByClassName('sample demo'); for(var counter = 0; counter < myElements.length; counter++){ myElements[counter].style.background = "pink"; } } </script> </body> </html>Keluaran
Setelah mengklik tombol "Ubah warna latar belakang elemen dengan sampel dan kelas demo", hanya elemen dengan kelas yang memiliki sampel dan demo yang akan diambil. Dan output dari kodenya adalah sebagai berikut
Contoh #3
Mendapatkan elemen pertama yang cocok dengan kelas yang ditentukan tidak ditentukan. Sebagian besar waktu, ada kebutuhan untuk mengambil hanya elemen pertama dari DOM yang cocok dengan kelas yang ditentukan dan jika diperoleh atau ada kemudian melakukan manipulasi khusus pada yang sama. Mari kita lihat bagaimana kita dapat mengambil elemen ini dengan bantuan sebuah contoh
Kode
Keluaran
Setelah mengklik tombol, output menyerupai sebagai berikut
Contoh #4
Lingkup elemen dan kelas tunggal. Sekarang, kita akan menggunakan metode ini untuk mendapatkan semua elemen yang memiliki kelas tertentu tetapi alih-alih memiliki lingkup DOM, kita akan memanggil metode ini pada sebuah elemen. Apa yang terjadi ketika kita memanggil metode ini pada elemen alih-alih dokumen adalah bahwa semua elemen di bawah elemen ini dan elemen itu sendiri dipertimbangkan saat menemukan elemen kelas yang cocok. Mari kita lihat, bagaimana kita bisa menggunakan ini dan mengimplementasikannya dengan bantuan sebuah contoh. Pada contoh di bawah ini, ada satu div dengan id sebagai myDiv yang diambil dengan menggunakan metode getElementById(). Selanjutnya, kita akan memanggil metode getElementsByClassName() pada elemen myDiv untuk mengambil semua elemen dengan kelas bernama myText dan menampilkan peringatan yang menentukan sejumlah elemen yang cocok yang ditemukannya
Kode
<head> <style> .myText { color:#FF0000; } </style> <script type="text/javascript"> function GetmyTextElements () { var outerElement = document.getElementById ("outerElement"); if (outerElement.getElementsByClassName) { var innerElements = outerElement.getElementsByClassName ("myText"); alert ("There are " + innerElements.length + " elements in the outerElement with class 'myText'."); } else { alert ("I think your browser does not supports this method."); } } </script> </head> <body> <button title="GetmyTextElements ()">Get the elements in the outerElement with 'myText' class!</button> <br /><br /> <div id="outerElement"> <b class="myText">EDUCBA is the best place to learn about new technologies and coding!</b> <br /> <i class="myText">Here, We are focussing on getting the insights of javascript.</i> <br /> </div> </body>Keluaran
Setelah mengklik "Dapatkan elemen di outerElement dengan kelas 'myText'. ”, ini memberi peringatan yang mengatakan jumlah elemen yang ditemukan dengan kelas yang ditentukan di bawah elemen itu
Artikel yang Direkomendasikan
Ini adalah panduan untuk JavaScript Dapatkan Elemen berdasarkan Kelas. Disini kita membahas Pengantar JavaScript Get Element by Class dan Contoh-contohnya beserta Implementasi Kodenya. Anda juga dapat membaca artikel kami yang lain yang disarankan untuk mempelajari lebih lanjut –
Bagaimana Anda memilih elemen berdasarkan kelas?
Catatan pertama.