Pelajari cara mendapatkan satu atau lebih objek elemen HTML dengan nama kelas menggunakan metode getElementsByClassName() dan querySelectorAll() di JavaScript
1. Dapatkan Elemen Dengan Nama Kelas Menggunakan getElementsByClassName()
Buat lima elemen div dengan kotak nama kelas yang sama
<div class="box">box 1</div> <div class="box">box 2</div> <div class="box">box 3</div> <div class="box">box 4</div> <div class="box">box 5</div>Tidak seperti nama ID, satu dokumen HTML dapat memiliki banyak nama kelas
Dapatkan semua objek elemen HTML yang memiliki kelas kotak di dalamnya dengan menjalankan metode getElementsByClassName() pada objek dokumen
const boxes = document.getElementsByClassName("box"); console.log(boxes); // HTMLCollection_Metode getElementsByClassName() mengambil satu argumen yang merupakan nilai atribut kelas
Dalam kasus ini kotak
String dalam argumen metode getElementsByClassName() harus cocok dengan nilai atribut kelas yang ditentukan dalam Markup HTML
Setelah metode getElementsByClassName() menemukan satu atau beberapa elemen, ia akan mengembalikannya sebagai HTMLCollection
HTMLCollection adalah objek mirip array dan memiliki properti length yang mengembalikan sejumlah item di dalamnya
boxes.length; // 5Ulangi HTMLCollection menggunakan for…of untuk mendapatkan setiap elemen di dalamnya
for(box of boxes) { console.log(box); // div.box, div.box, div.box, div.box, div.box }Cobalah
Lihat Pen Get Element By Class Name #1 oleh SoftAuthor (@softauthor) di CodePen
2. Dapatkan Elemen Dengan Nama Kelas Menggunakan querySelectorAll()
Alternatifnya, metode querySelectorAll() juga mendapatkan satu atau beberapa elemen dengan nama kelas
Panggil metode querySelectorAll() pada objek dokumen
Metode querySelectorAll() mengambil satu argumen yang merupakan nama kelas yang mirip dengan metode getElementsByClassName()
Tidak seperti argumen di getElementsByClassName(), nama kelas di argumen querySelectAll() harus diawali dengan titik (. )
const boxes = document.querySelectorAll(".box"); console.log(boxes); // NodeList_Ini mengembalikan NodeList yang merupakan kumpulan node dokumen
NodeList dapat diulang dengan metode forEach() atau for…of loop
boxes.forEach(box => { console.log(box); });Cobalah
Lihat Pen Get Element By Class Name #2 oleh SoftAuthor (@softauthor) di CodePen
3. Dapatkan Elemen Dengan Beberapa Nama Kelas
Mari kita lihat bagaimana mendapatkan satu atau lebih elemen yang memiliki lebih dari satu nama class
<div class="box">box 1</div> <div class="box">box 2</div> <div class="box red">box 3</div> <div class="box red">box 4</div> <div class="box">box 5</div>_Dapatkan elemen HTML yang memiliki dua kelas yaitu kotak dan merah
Untuk melakukannya, aktifkan metode getElementsByClassName() pada objek dokumen
Dibutuhkan satu argumen, yaitu nama kelas kotak dan merah dipisahkan oleh spasi dalam tanda kutip
const redBoxes = document.getElementsByClassName("box red"); redBoxes.length; // 2Cobalah
Lihat Pen Get Element By Class Name #2 oleh SoftAuthor (@softauthor) di CodePen
4. Dapatkan Elemen Dengan Nama Kelas Dari Elemen Induk
Pelajari cara mendapatkan elemen berdasarkan nama kelas dari elemen induk
<section id="box-container"> <div class="box">box 1</div> <div class="box">box 2</div> <div class="box">box 3</div> <div class="box">box 4</div> <div class="box">box 5</div> </section>_Dapatkan elemen induk dengan memanggil metode getElementById() pada objek dokumen
Tetapkan ke boxContainer konstan
Kemudian, aktifkan getElementsByClassName() pada boxContainer, yang merupakan elemen induk
getElementsByClassName() dapat dipanggil pada objek elemen induk apa pun, sedangkan metode getElementById() hanya dapat dipanggil pada objek dokumen global
Anda juga dapat menggunakan getElementsByClassName(), getElementsByTagName(), getElementsByName() untuk mendapatkan referensi DOM dari satu atau beberapa elemen
Tetapkan ke kotak konstan
Sekarang, Anda dapat dengan mudah mendapatkan semua nama kelas dengan mengakses properti classList pada objek elemen
const box = document.getElementById("box"); console.log(box.classList); // ['shape', 'orange', value: 'shape orange'] console.log(typeof box.classList); //DOMTokenList_Ini mengembalikan DOMTokenList yang merupakan objek tipe array yang berisi semua nama kelas
Anda dapat mengakses nama kelas apa pun dengan nilai indeksnya yang sangat berguna
2. Dapatkan Nama Kelas Menggunakan Metode getAttribute()
Alternatifnya, Anda juga bisa menggunakan metode getAttribute() untuk mendapatkan satu atau beberapa nama kelas dari suatu elemen
Untuk melakukannya, panggil metode getAttribute() pada objek elemen kotak, dengan meneruskan nama kelas sebagai argumen dalam tanda kutip
Tidak seperti properti classList, getAttribute() akan mengembalikan sebuah string yang berisi semua nama kelas
Yang TIDAK berguna dan saya akan selalu merekomendasikan menggunakan classList sebagai gantinya
const box = document.getElementById("box"); console.log(box.getAttribute("class")); // "shape orange" console.log(typeof box.getAttribute("class")); //String3. Dapatkan Nama Kelas Menggunakan Properti className
Mirip dengan metode getAttribute(), Anda juga bisa menggunakan properti className pada objek elemen untuk mendapatkan satu atau lebih nama kelas di JavaScript
Sekali lagi, ini akan mengembalikan nama kelas sebagai tipe string
4. Dapatkan Nama Kelas Dengan Indeks
Terkadang, Anda mungkin ingin mendapatkan nama kelas tertentu dari suatu elemen berdasarkan posisinya
Berikut adalah elemen div sederhana yang memiliki tiga nama kelas. bentuk, oranye dan kecil
<div class="shape orange small " id="box">box</div>Katakanlah saya ingin mendapatkan nama kelas ketiga kecil
const box = document.getElementById("box"); console.log(box.classList); // ['shape', 'orange', 'small', value: 'shape orange small'] console.log(box.classList[2]); // "small"Menggunakan properti classList pada objek elemen, kita dapat dengan mudah melakukannya karena akan mengembalikan DOMTokenList yang merupakan objek tipe array
Terakhir, dapatkan nama kelas kecil dengan nomor indeksnya yaitu 2
Cukup mudah
5. Dapatkan Nama Kelas Jika Ada
Mari kita periksa untuk melihat apakah ada nama kelas di elemen sebelum mengaksesnya untuk menghindari kesalahan
<div class="shape orange small" id="box">box</div>Untungnya, classList API memiliki metode bernama contains() yang melakukan hal itu
Metode contains() mengambil argumen yang merupakan nama kelas yang ingin Anda periksa untuk melihat apakah itu ada
const box = document.getElementById("box"); console.log(box.classList.contains("small")); // true console.log(box.classList.contains("blue")); // falseJika ya, metode contains() mengembalikan nilai true, jika tidak, false
6. Dapatkan Nama Kelas Sebagai Daftar-A dan Panjang
Bagaimana jika Anda ingin mendapatkan semua nama kelas individual dari suatu elemen dalam JavaScript?
Seperti yang Anda ketahui, properti classList pada objek elemen akan mengembalikan DOMTokenList yang merupakan objek tipe array