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.
Catatan: Properti classList tidak didukung penggunaannya pada IE9, dan versi sebelumnya.
Sintak: const elementClasses = elementNodeReference.classList;
Method:
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.
Sebelum memahami lebih dalam materi tentang Mendapatkan Nama Class HTML Menggunakan classList DOM, terlebih dahulu pelajari materi tentang: Properti Children DOM HTML dan Fungsinya, Mendapatkan Node Child HTML Menggunakan childNodes DOM, dan Menghitung Elemen Child HTML Menggunakan childElementCount DOM.
Sintak: const elementClasses = elementNodeReference.classList;
- 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.
Contoh: Penambahan dan penghapusan sebuah class.
Contoh: Toggling diantara class.
Contoh:
<!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
HTML atau bahasa penanda hipermedia adalah salah satu bahasa yang sangat penting dalam dunia pengembangan web. Elemen-elemen yang ada di dalam dokumen HTML dapat diberikan identitas atau penanda yang dikenal dengan istilah kelas. Kelas atau dalam bahasa Inggris disebut class adalah salah satu atribut yang sering digunakan untuk memberi identitas pada elemen-elemen HTML, seperti paragraf, div, atau elemen-elemen lainnya. Penamaan kelas ini sangat penting karena dapat mempengaruhi tampilan serta fungsi dari elemen-elemen tersebut pada halaman web.
Pengelolaan kelas dalam HTML tidak hanya sebatas pada penambahan atau penghapusan nama kelas secara manual dalam kode HTML itu sendiri. Dalam pengembangan web dinamis, sering kali dibutuhkan kemampuan untuk mengelola kelas elemen-elemen tersebut secara otomatis dengan memanfaatkan JavaScript. Salah satu metode yang dapat digunakan dalam pengelolaan kelas HTML adalah dengan memanfaatkan objek classList. classList adalah sebuah objek yang memberikan akses untuk mengelola kelas pada elemen-elemen HTML secara lebih mudah dan efisien.
Metode classList pada objek elemen HTML memberikan sejumlah kemampuan yang memungkinkan untuk mendapatkan, menambah, menghapus, serta memeriksa keberadaan kelas pada suatu elemen. Salah satu keuntungan besar dari menggunakan classList adalah cara yang lebih mudah dan terstruktur dalam mengakses kelas dari elemen HTML dibandingkan dengan menggunakan metode lama yang mengharuskan manipulasi langsung terhadap atribut class. classList memberikan cara yang lebih fleksibel dalam memanipulasi kelas pada elemen tanpa mengubah atribut class secara keseluruhan.
Baca Juga:
Salah satu fitur utama dari classList adalah kemampuan untuk mendapatkan nama kelas yang diterapkan pada elemen. Ketika menggunakan classList, elemen HTML yang memiliki beberapa kelas akan disajikan dalam bentuk koleksi yang mudah diakses. Dengan memanfaatkan objek classList, nama-nama kelas yang diterapkan pada elemen dapat diakses dengan lebih terstruktur. Hal ini sangat berguna dalam situasi dimana perlu dilakukan penyesuaian terhadap tampilan atau perilaku elemen tertentu berdasarkan kelas-kelas yang diterapkannya.
Penggunaan classList untuk mendapatkan nama kelas memberikan keuntungan tersendiri karena dapat diakses dengan cara yang sangat mudah. classList menyediakan metode seperti item untuk mendapatkan nama kelas berdasarkan indeksnya dalam daftar kelas elemen tersebut. Hal ini mempermudah proses pemrograman ketika diperlukan untuk mengetahui nama kelas yang digunakan pada elemen tanpa harus mengakses seluruh daftar kelas secara manual. Selain itu, dengan menggunakan classList, proses manipulasi kelas menjadi lebih mudah dan lebih intuitif, tanpa harus khawatir mengenai pengubahan nilai atribut class secara langsung.
Sering kali, elemen-elemen dalam sebuah halaman web memiliki lebih dari satu kelas yang diterapkan padanya. Ini sering terjadi dalam pengembangan web, karena kelas digunakan untuk mengelompokkan elemen-elemen yang memiliki kesamaan dalam hal tampilan atau fungsi. classList memungkinkan untuk mengelola beberapa kelas sekaligus pada elemen yang sama tanpa harus memisahkan setiap kelas secara terpisah dalam kode HTML. Dengan cara ini, pengelolaan kelas menjadi lebih efisien dan lebih mudah dikelola dalam kode sumber.
Selain itu, classList juga mendukung metode lain yang memungkinkan untuk melakukan pemeriksaan terhadap keberadaan kelas tertentu pada elemen. Metode contains pada classList dapat digunakan untuk memeriksa apakah elemen memiliki kelas tertentu. Dengan demikian, memungkinkan untuk membuat logika yang dapat merespons perubahan kelas pada elemen berdasarkan kondisi tertentu. Misalnya, dapat dibuat kondisi yang memeriksa apakah elemen memiliki kelas tertentu sebelum melakukan tindakan tertentu, seperti mengubah gaya atau menambahkan interaktivitas.
Keuntungan lain yang diberikan oleh classList adalah kemampuannya untuk menambah atau menghapus kelas dari elemen dengan cara yang lebih mudah. Menggunakan metode seperti add dan remove pada classList memungkinkan untuk menambah atau menghapus kelas dengan cara yang lebih terstruktur dan tidak memerlukan manipulasi langsung terhadap atribut class. Hal ini menjadikan pengelolaan kelas menjadi lebih dinamis dan responsif terhadap perubahan yang diperlukan dalam proses pengembangan web.
Selain itu, classList juga mendukung metode toggle yang memungkinkan untuk menambahkan atau menghapus kelas dengan cara yang lebih efisien. Metode ini sangat berguna dalam situasi dimana perlu untuk mengubah kelas elemen berdasarkan interaksi pengguna, seperti saat pengguna mengklik suatu elemen atau saat terjadi perubahan kondisi lain pada halaman web. Dengan menggunakan toggle, kelas akan ditambahkan jika elemen tidak memiliki kelas tersebut, dan akan dihapus jika elemen sudah memiliki kelas yang dimaksud.
Penting untuk dicatat bahwa meskipun classList memberikan banyak kemudahan dalam pengelolaan kelas, penggunaan metode ini tetap memerlukan pemahaman yang baik tentang bagaimana elemen-elemen HTML diberi kelas. Setiap elemen pada halaman web dapat memiliki satu atau lebih kelas, dan setiap kelas dapat memiliki pengaruh terhadap tampilan atau perilaku elemen tersebut. Oleh karena itu, pengelolaan kelas harus dilakukan dengan hati-hati agar tidak menyebabkan konflik antar kelas atau mengubah tampilan yang tidak diinginkan pada elemen.
Secara keseluruhan, classList adalah alat yang sangat berguna dalam pengelolaan kelas elemen-elemen HTML. Dengan kemampuan untuk menambah, menghapus, memeriksa, dan mendapatkan nama kelas, classList memungkinkan untuk membuat pengelolaan kelas menjadi lebih efisien, mudah dipahami, dan lebih terstruktur. Kemampuan ini sangat bermanfaat dalam pengembangan halaman web yang dinamis dan interaktif, dimana elemen-elemen perlu diperbarui atau dimodifikasi secara otomatis berdasarkan kondisi tertentu. Penggunaan classList memberikan pendekatan yang lebih modern dan lebih fleksibel dalam menangani kelas elemen, yang memungkinkan pengembang web untuk lebih fokus pada logika aplikasi dan interaksi pengguna tanpa harus terjebak dalam kompleksitas pengelolaan atribut class secara manual.
Keunggulan penggunaan classList dalam pengelolaan kelas pada elemen HTML tidak hanya terletak pada kemudahan akses dan manipulasi, tetapi juga pada kemampuannya untuk meningkatkan kinerja aplikasi web. Dalam pengembangan web modern, pengoptimalan kinerja menjadi sangat penting. Proses manipulasi elemen yang lebih cepat dan efisien, seperti yang dapat dicapai dengan menggunakan classList, dapat memberikan dampak besar terhadap pengalaman pengguna. Misalnya, perubahan gaya atau status elemen yang lebih responsif terhadap interaksi pengguna dapat menghasilkan halaman yang lebih dinamis dan interaktif tanpa membebani kinerja halaman secara berlebihan.
Salah satu contoh penerapan classList yang sangat bermanfaat adalah dalam pengembangan aplikasi web yang memerlukan interaksi langsung dengan elemen-elemen halaman, seperti tombol, menu, atau elemen-elemen lain yang dapat berubah statusnya saat berinteraksi dengan pengguna. Dalam kasus ini, classList memungkinkan untuk mengubah status atau tampilan elemen hanya dengan menambahkan atau menghapus kelas tertentu, tanpa perlu mengubah atribut lainnya pada elemen tersebut. Misalnya, saat pengguna mengklik sebuah tombol, kelas tertentu bisa ditambahkan untuk memberikan efek visual seperti perubahan warna atau animasi, sementara kelas lain bisa dihapus untuk mengembalikan tampilan semula setelah beberapa detik atau berdasarkan interaksi lain.
Salah satu keuntungan besar lainnya dari classList adalah kemampuannya untuk mendukung berbagai macam pengelolaan kelas pada elemen-elemen yang lebih kompleks. Dalam hal ini, classList dapat digunakan untuk menangani berbagai elemen sekaligus, baik itu dengan cara menambah kelas secara massal atau dengan cara mengubah kelas-kelas tertentu pada elemen-elemen yang berbeda dalam dokumen HTML. Ini mempermudah pekerjaan pengembang dalam menangani elemen-elemen dinamis yang saling berinteraksi. Selain itu, dengan mengelola kelas dengan cara ini, pengembang bisa memastikan bahwa elemen-elemen dalam halaman tetap terorganisir dan mudah dikelola.
Keberadaan classList juga sangat membantu dalam pengembangan aplikasi yang melibatkan pengaturan atau perubahan tampilan berbasis tema atau kondisi tertentu. Misalnya, dalam aplikasi yang mendukung penggantian tema antara terang dan gelap, classList memungkinkan untuk mengelola kelas yang mengatur tema tampilan halaman. Dengan hanya menambahkan atau menghapus kelas yang mengatur tema, seluruh tampilan halaman dapat berubah sesuai dengan preferensi pengguna tanpa memerlukan perubahan besar dalam kode HTML atau CSS. Hal ini membuat pengembangan aplikasi web yang responsif terhadap preferensi pengguna menjadi lebih sederhana dan lebih mudah diterapkan.
Tak hanya itu, classList juga mendukung kemudahan dalam pengelolaan elemen-elemen yang menggunakan gaya responsif. Gaya responsif sering kali mengandalkan perubahan pada kelas elemen-elemen HTML untuk menyesuaikan tampilan elemen berdasarkan ukuran layar atau perangkat yang digunakan. Dengan menggunakan classList, pengelolaan kelas menjadi lebih mudah, karena perubahan kelas dapat dilakukan tanpa harus menulis ulang atau memodifikasi kode yang lebih kompleks. Sebagai contoh, elemen-elemen seperti gambar, menu navigasi, atau tombol yang perlu diubah posisinya atau tampilannya pada perangkat seluler dapat dengan mudah disesuaikan hanya dengan menambah atau menghapus kelas responsif tertentu.
Penggunaan classList juga dapat meningkatkan modularitas dan keterbacaan kode. Dalam pengembangan aplikasi atau situs web besar, pengelolaan kelas yang efektif dapat membuat kode lebih terstruktur dan mudah dipahami. Dengan memisahkan kelas-kelas tertentu dalam gaya atau fungsi yang berbeda, serta mengelola kelas-kelas tersebut menggunakan classList, pengembang dapat menghindari kode yang berantakan atau berulang-ulang. Hal ini mempermudah pemeliharaan dan pengembangan lebih lanjut dari aplikasi atau situs web tersebut, karena setiap bagian kode dapat dengan mudah dilacak dan diubah tanpa mempengaruhi bagian lainnya.
Penting untuk dicatat bahwa meskipun classList memberikan banyak kemudahan, tidak semua lingkungan pengembangan atau browser mendukung sepenuhnya metode ini, terutama pada versi-versi lama dari browser tertentu. Oleh karena itu, perlu dipastikan bahwa browser yang digunakan mendukung classList atau memiliki alternatif untuk menyediakan fungsionalitas serupa. Dalam pengembangan aplikasi web modern, penggunaan classList sudah menjadi standar yang umum dan banyak digunakan, namun tetap penting untuk melakukan pengujian terhadap kompatibilitas dengan berbagai platform dan perangkat.
Di sisi lain, penggunaan classList memberikan keuntungan dalam hal kesederhanaan. Banyak fitur yang dapat diakses melalui classList seperti menambah, menghapus, dan memeriksa kelas, memungkinkan pengembang untuk memfokuskan perhatian pada logika aplikasi atau desain antarmuka tanpa terlalu khawatir tentang pengelolaan kelas secara manual. Hal ini membuat classList menjadi alat yang sangat penting dalam pengembangan aplikasi web yang dinamis dan interaktif, serta memungkinkan pengembang untuk lebih efisien dalam bekerja dengan elemen-elemen HTML.
Secara keseluruhan, classList menyediakan berbagai fitur yang sangat berguna bagi pengembang dalam mengelola kelas elemen-elemen HTML. Dengan menawarkan kemampuan untuk menambah, menghapus, dan memeriksa kelas dengan cara yang lebih terstruktur dan efisien, classList memungkinkan pengembang untuk membuat halaman web yang lebih dinamis, interaktif, dan responsif terhadap kebutuhan pengguna. Keuntungan ini, ditambah dengan kemudahan pengelolaan kelas pada elemen-elemen dengan cara yang lebih modular, menjadikan classList sebagai alat yang sangat berharga dalam pengembangan aplikasi web yang modern dan kompleks.
Referensi Tambahan:
- Cara Penggunaan Properti clientTop DOM pada HTML
- Cara Penggunaan Properti clientWidth DOM pada HTML
- 2 Contoh Penggunaan Method cloneNode() DOM pada HTML
- 2 Contoh Penggunaan Method compareDocumentPosition() DOM pada HTML
- Cara Penggunaan Method contains() DOM pada HTML
- Cara Penggunaan Properti dir DOM pada HTML
- Cara Penggunaan Method exitFullscreen() DOM pada HTML
Artikel ini akan dibaca oleh: Fadlan Satya Hakim, Fadzilah Sukmawati, Fahnida Kiftiya, Fajar Dwi Hermawan, dan Fajrin Dewi Santika.
5 komentar untuk "Mendapatkan Nama Class HTML Menggunakan classList DOM"
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 -
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti classList DOM pada HTML?
BalasHapusBerikut adalah jenis browser yang dapat digunakan untuk mengaktifkan properti classList DOM pada HTML:
Hapus1. Google Chrome 8.0
2. Internet Explorer 10.0
3. Firefox 3.6
4. Opera 11.5
5. Safari 5.1
Apa yang dimaksud dengan properti classList DOM pada HTML?
BalasHapusProperti 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().
HapusclassList 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