Temukan nama kelas dalam javascript

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

Tidak seperti nama ID, satu dokumen HTML dapat memiliki banyak nama kelas

<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>

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; // 5

Ulangi 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; // 2

Cobalah

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")); //String

3. 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

const box = document.getElementById("box");
console.log(box.className); //  "shape orange"
console.log(typeof box.className); //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")); // false

Jika 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

Bagaimana cara mendapatkan nama kelas CSS di JavaScript?

Bagaimana cara mendapatkan nama kelas dengan id di JavaScript?

Bagaimana cara mendapatkan nama kelas di JavaScript dom?

Apa nama kelas dalam JavaScript?