Bisakah saya mendapatkan elemen berdasarkan kelas dalam javascript?

Question

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

Table of Contents Show

Contoh untuk Menerapkan JavaScript Dapatkan Elemen berdasarkan Kelas
Artikel yang Direkomendasikan
Bagaimana Anda memilih elemen berdasarkan kelas?
Bagaimana cara mendapatkan elemen pertama berdasarkan kelas dalam JavaScript?
Bagaimana cara mendapatkan nilai atribut kelas dalam JavaScript?
Bagaimana cara memilih div berdasarkan kelas di js?

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 onclick="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 onclick="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

<!DOCTYPE html>
<html>
<body>
<h2>Demonstration of getting first element of a single 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="demo">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 onclick="sampleFunction()">Change background color of first element with demo class if present</button>
<script>
function sampleFunction() {
var myElement = document.getElementsByClassName('demo')[0]; if(myElement!=undefined){
myElement.style.background = "pink";
}
}
</script>
</body>
</html>

_

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 onclick="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?

Untuk memilih elemen dengan nama kelas tertentu, Anda menggunakan metode getElementsByClassName(). .

biarkan elemen = dokumen. getElementsByClassName('NamaKelas');.

Contoh JavaScript getElementsByClassName()

Catatan pertama.

Bagaimana cara mendapatkan elemen pertama berdasarkan kelas dalam JavaScript?

Jika Anda hanya menginginkan elemen pertama dalam DOM dengan kelas tersebut, Anda dapat memilih elemen pertama dari HTMLCollection seperti array yang dikembalikan. var elemen = dokumen. getElementsByClassName('className');

Bagaimana cara mendapatkan nilai atribut kelas dalam JavaScript?

JavaScript metode getAttribute() . Metode getAttribute() digunakan untuk mendapatkan nilai atribut dari elemen tertentu. Jika atributnya ada, ia mengembalikan string yang mewakili nilai atribut yang sesuai. Jika atribut yang sesuai tidak ada, itu akan mengembalikan string kosong atau nol.

Bagaimana cara memilih div berdasarkan kelas di js?

Gunakan dokumen. querySelector aktif untuk memilih div lalu pilih elemen di dalamnya dengan kelas yang diberikan setelah itu . Kami hanya memanggil querySelector pada elemen dengan ID mydiv untuk memilih item di dalam div itu. Oleh karena itu, innerDiv adalah div dengan kelas myclass.

kode javascript