Cara meneruskan nama kelas dalam fungsi javascript

Untuk memeriksa apakah suatu elemen berisi kelas, Anda menggunakan metode contains() dari properti classList dari elemen tersebut

element.classList.contains(className);
Code language: CSS (css)

Dalam metode ini, Anda meneruskan className_ ke metode contains() dari properti classList dari elemen. Jika elemen berisi className, metode mengembalikan

<div class="secondary info">Item</div>
Code language: HTML, XML (xml)

<div class="secondary info">Item</div>
Code language: HTML, XML (xml)

Misalnya, Anda memiliki elemen

<div class="secondary info">Item</div>
Code language: HTML, XML (xml)

<div class="secondary info">Item</div>
Code language: HTML, XML (xml)

<div class="secondary info">Item</div>
Code language: HTML, XML (xml)

<div class="secondary info">Item</div>
Code language: HTML, XML (xml)

Untuk memeriksa apakah elemen

<div class="secondary info">Item</div>
Code language: HTML, XML (xml)

<div class="secondary info">Item</div>
Code language: HTML, XML (xml)

const div = document.querySelector('div');
div.classList.contains('secondary'); // true
Code language: JavaScript (javascript)

Dalam contoh ini, kami menggunakan metode

<div class="secondary info">Item</div>
Code language: HTML, XML (xml)

<div class="secondary info">Item</div>
Code language: HTML, XML (xml)

<div class="secondary info">Item</div>
Code language: HTML, XML (xml)

Contoh berikut mengembalikan

<div class="secondary info">Item</div>
Code language: HTML, XML (xml)

<div class="secondary info">Item</div>
Code language: HTML, XML (xml)

const div = document.querySelector('div');
div.classList.contains('secondary'); // true
Code language: JavaScript (javascript)

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 meneruskan nama kelas dalam JavaScript?

Bagaimana cara melewatkan tipe kelas sebagai parameter dalam JavaScript?

Bagaimana cara mendapatkan nama kelas dalam HTML menggunakan JavaScript?

Bagaimana cara menambahkan atribut kelas dalam JavaScript?