Lompat ke konten Lompat ke sidebar Lompat ke footer

Mendapatkan Nama Class HTML Menggunakan classList DOM

Properti classList DOM pada HTML adalah properti yang bersifat read-only. Properti ini menggunakan properti "classList.length" yang mengembalikan nama class dari elemen pada form DOMTokenlist(sekumpulan ruang yang dipisahkan oleh token-token). Properti ini digunakan untuk penambahan, penghapusan, dan toggle CSS classes pada elemen html.

3 Contoh Penggunaan Properti classList DOM pada HTML
Ilustrasi classList DOM HTML

Sebelum memahami lebih dalam materi tentang Mendapatkan Nama Class HTML Menggunakan classList DOM, terlebih dahulu pelajari materi tentang: Properti Children DOM HTML dan Fungsinya [klik], Mendapatkan Node Child HTML Menggunakan childNodes DOM [klik], dan Menghitung Elemen Child HTML Menggunakan childElementCount DOM [klik].

Catatan: properti classList tidak didukung penggunaannya pada IE9, dan versi sebelumnya.

Sintak:
const elementClasses = elementNodeReference.classList;

Method:
  • add(class1, class2, …): menambahkan satu buah class pada elemen. Jika class-nya sudah ada pada atribut elemen class, maka penambahan tersebut akan diabaikan.
  • remove(class1, class2, …): menghapus class spesifik pada elemen. Dimana class yang tidak terdapat pada elemen akan dihilangkan tidak dianggap sebagai error.
  • contains(class): berfungsi untuk memeriksa apakah value class spesifik sudah atau atau belum pada suatu elemen atribut class, yang akan mengembalikan hasil berupa nilai Boolean TRUE atau FALSE.
  • item(index): berfungsi untuk mengembalikan nilai class berdasarkan nilai indeks dalam koleksi class. Jika nilai indeks yang diberikan berada diluar jangkauan nilai, maka akan mengembalikan nilai null.
  • toggle(class, force): Toggle diantara nama class untuk suatu elemen.

Parameter pertama menghapus class spesifik dari elemen dan akan mengembalikan nilai FALSE. Jika nilai class tersebut tidak ada, maka akan dilakukan penambahan class ke elemen, dan akan mengembalikan nilai TRUE.

Parameter opsional kedua adalah sebuah nilai Boolean yang akan memaksa class untuk ditambahkan atau dihapus pada elemen. Ketika sebuah parameter kedua ditampilkan dan dievaluasi untuk bernilai TRUE, maka akan ditambahkan value class spesifik, jika tidak maka akan dievaluasi sebagai nilai FALSE, yang akan memaksa untuk dilakukan penghapusan class spesifik meskipun class tersebut sudah tersedia ataupun tidak.

Baca Juga:

Contoh: Penambahan dan penghapusan sebuah class.

<!DOCTYPE html>

<html>

 

<head>

<title>

Properti classList DOM HTML

</title>

 

<style>

.mystyle 

{

align: center;

border: 1px solid black;

height: 100px;

padding-top: 35px;

background: lightgreen;

color: Black;

font-size: 70px;

}

</style>

</head>

 

<body>

 

<p>

Klik tombol untuk melihat

penambahan dan penghapusan

class "mystyle" DIV.

</p>

 

<button onclick="myFunction()">

Add class

</button>

 

<div id="myDIV">

Blog Elfan

</div>

 

<script>

function myFunction() 

{

document.getElementById(

"myDIV").classList.add("mystyle");

}

 

function Remove() 

{

document.getElementById(

"myDIV").classList.remove("mystyle");

}

</script>

 

<button onclick="Remove()">

Remove class

</button>

 

</body>

 

</html>

Output:

Klik tombol untuk melihat penambahan dan penghapusan class "mystyle" DIV.

Blog Elfan


Contoh: Toggling diantara class.

<!DOCTYPE html>

<html>

 

<head>

<title>

Properti classList DOM HTML

</title>

 

<style>

.mystyle 

{

align: center;

border: 1px solid black;

height: 100px;

padding-top: 35px;

background: lightgreen;

color: Black;

font-size: 70px;}

 

.newClassName 

{

align: center;

border: 1px solid black;

height: 50px;

padding-top: 35px;

background: green;

color: white;

font-size: 50px;}

</style>

</head>

 

<body>

 

<p>

Klik tombol untuk melihat 

penambahan dan pengurangan 

class "mystyle" DIV.

</p>

 

<button onclick="myFunction()">

toggle

</button>

 

<div 

id="myDIV" 

class="mystyle">

Blog Elfan

</div>

 

<script>

function myFunction() 

{

document.getElementById(

"myDIV").classList.toggle("newClassName");

}

</script>

 

</body>

 

</html>

Output:

Klik tombol untuk melihat penambahan dan pengurangan class "mystyle" DIV.

Blog Elfan


Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

Properti classList DOM HTML

</title>

 

<style>

.mystyle 

{

width: 500px;

height: 50px;}

 

.anotherClass 

{

background-color: lightGreen;}

 

.thirdClass 

{

text-align: center;

font-size: 25px;

color: black;

margin-bottom: 10px;}

</style>

</head>

 

<body>

 

<div 

id="myDIV" 

class="mystyle anotherClass thirdClass">

Blog Elfan

</div>

 

<button 

onclick="myFunction()">

Klik untuk menghitung class

</button>

 

<p id="demo"></p>

 

<script>

function myFunction() 

{

var x = document.getElementById(

"myDIV").classList.length;

document.getElementById("demo").innerHTML = x;

}

</script>

 

</body>

 

</html>

Output:
Blog Elfan

Artikel ini didedikasikan kepada: Fadlan Satya Hakim, Fadzilah Sukmawati, Fahnida Kiftiya, Fajar Dwi Hermawan, dan Fajrin Dewi Santika.

5 komentar untuk "Mendapatkan Nama Class HTML Menggunakan classList DOM"

  1. Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti classList DOM pada HTML?

    BalasHapus
    Balasan
    1. Berikut adalah jenis browser yang dapat digunakan untuk mengaktifkan properti classList DOM pada HTML:
      1. Google Chrome 8.0
      2. Internet Explorer 10.0
      3. Firefox 3.6
      4. Opera 11.5
      5. Safari 5.1

      Hapus
  2. Apa yang dimaksud dengan properti classList DOM pada HTML?

    BalasHapus
    Balasan
    1. Properti classList DOM pada HTML berfungsi untuk mengembalikan nama kelas CSS dari suatu elemen tertentu. Properti classList mengembalikan object DOMTokenList. Properti classList bersifat read-only, tetapi dapat dilakukan penambahan atau penghapusan class CSS dengan menggunakan method add() atau remove().

      Hapus
    2. classList merupakan properti read-only yang berfungsi untuk mengembalikan koleksi DOMTokenList secara langsung dari atribut class elemen. Properti classList kemudian dapat digunakan untuk memanipulasi daftar class. Penggunaan properti classList merupakan bentuk alternatif yang mudah untuk mengakses daftar class elemen sebagai string yang dibatasi spasi melalui elemen.

      Hapus

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -