Ada beberapa metode yang digunakan untuk memeriksa apakah elemen berisi kelas. Mari kita bahas secara terpisah
Metode pertama yang dapat menangani tugas tersebut adalah elemen. Daftar kelas. berisi metode. Fungsi hanya membutuhkan satu parameter. Metode berisi memeriksa apakah classList Anda berisi elemen tunggal
element.classList.contains(class);
Tetapi jika Anda bekerja dengan browser lama dan tidak ingin menggunakan polyfill, gunakan seperti ini
function hasClass(element, clsName) { return (' ' + element.className + ' ').indexOf(' ' + clsName + ' ') > -1; }_
Jika tidak, akan mengembalikan nilai true jika kelas yang Anda cari adalah bagian dari nama kelas lain
Title of the document
Welcome to W3Docs
Metode hasClass() memeriksa apakah salah satu elemen yang dipilih memiliki nama kelas tertentu. Metode mengembalikan true jika salah satu elemen yang dipilih memiliki nama kelas yang ditentukan. Elemen mungkin memiliki beberapa kelas yang ditugaskan padanya
Dalam tutorial ini kita akan belajar cara Memeriksa Apakah Elemen HTML dari Kelas tertentu Ada menggunakan JavaScript. Metode HTML DOM getElementsByClassName() dan. panjang properti dapat digunakan untuk tujuan ini
Daftar isi
Kode HTML
Kode HTML diberikan di bawah ini, dalam kode ini kami memiliki tag paragraf dengan kelas merah, kami juga memiliki tag tombol dengan acara title
________0Kode JavaScript
Lihatlah kode JavaScript, metode HTML Dom getElementsByClassName() digunakan. properti panjang
HTML Dom getElementsByClassName() digunakan untuk memilih semua elemen HTML dengan kelas tertentu
properti panjang mengembalikan panjang string. Dalam contoh ini digunakan untuk menghitung jumlah elemen yang dipilih dengan kelas yang ditentukan (merah)
Jika jawaban elemen. panjang lebih besar dari 0, itu berarti kelas ada
________1Cara lain untuk memeriksa ini adalah dengan menggunakan kode berikut
________2Dalam kode di atas. properti classList digunakan yang digunakan untuk mengembalikan nama kelas sebagai objek
berisi digunakan untuk memeriksa kelas di objek classList. Jawaban dari. berisi adalah nilai Boolean
Memeriksa apakah suatu kelas ada pada suatu elemen sederhana dan cepat dengan metode contains() properti classList JavaScript
Pertama mari kita lihat rumus umum untuk menggunakan classList.contains() dan kemudian kita akan melihat kasus penggunaan praktis
Daftar kelas. berisi() rumus
var element = document.querySelector("selector") element.classList.contains("class")
Dalam contoh umum di atas, kami menggunakan metode serbaguna querySelector() untuk menemukan elemen target kami melalui nama pemilihnya. Pemilih bisa berupa pemilih kelas, pemilih elemen, atau jenis pemilih lainnya
Kami kemudian menetapkan elemen yang kami temukan dengan querySelector() ke variabel element yang kami nyatakan
Kemudian kami lampirkan metode contains() properti classList ke element kami melalui referensi variabelnya. Kemudian di dalam argumen metode contains() (di dalam tanda kurung) kami menentukan nama 'kelas' yang ingin kami periksa apakah ada
Contoh umum membosankan, mari kita praktis
Umpan Berita yang Rapi
Memfilter dengan classList. mengandung()
- kasus penggunaan praktis
Anda mengunjungi situs web dengan umpan berita campuran dari berbagai kategori. Tapi Anda hanya tertarik membaca tentang teknologi
Umpan berita yang berantakan adalah penghujatan. Mari memfilter semua kategori lainnya, menggunakan metode classList.contains()
Pertama, mari tambahkan beberapa HTML sehingga kita memiliki beberapa konten untuk dikerjakan. Lalu kita akan menatanya dengan cepat, dan beralih ke JavaScript
HTML untuk umpan berita kami
<div class="wrapper"> <h1>Newsfeed</h1> <div class="news-feed"> <h3 class="headline"> <a class="link category-health" href="#">Health</a> </h3> <h3 class="headline"> <a class="link category-finances" href="#">Finances</a> </h3> <h3 class="headline"> <a class="link category-politics" href="#">Politics</a> </h3> <h3 class="headline"> <a class="link category-nature" href="#">Nature</a> </h3> <h3 class="headline"> <a class="link category-humor" href="#">Humor</a> </h3> <h3 class="headline"> <a class="link category-weather" href="#">Weather</a> </h3> <h3 class="headline"> <a class="link category-technology" href="#">Technology</a> </h3> <h3 class="headline"> <a class="link category-sports" href="#">Sports</a> </h3> </div> <div class="fixed-container"> <span>Filter:</span> <button class="btn-technology">Technology</button> </div> </div> <!-- wrapper -->_
Untuk konten HTML kami, kami memiliki
- Judul besar
- Umpan berita dengan berbagai kategori
- Di luar umpan berita, kami memiliki tombol bernama Teknologi. Ini adalah tombol yang akan kami gunakan untuk mengalihkan (menyembunyikan/menampilkan) semua topik non-teknologi
Jelas, contoh feed berita kami di atas hanya memiliki beberapa item berita (untuk tujuan ilustrasi), sehingga tidak terlihat berantakan. Tapi umpan berita yang sangat beragam akan ada segudang artikel dari setiap kategori berita, membanjiri umpan. Saat itulah tombol pemfilteran berguna
Gaya CSS
Semua CSS berikut bersifat kosmetik dan opsional, kecuali kelas <div class="wrapper"> <h1>Newsfeed</h1> <div class="news-feed"> <h3 class="headline"> <a class="link category-health" href="#">Health</a> </h3> <h3 class="headline"> <a class="link category-finances" href="#">Finances</a> </h3> <h3 class="headline"> <a class="link category-politics" href="#">Politics</a> </h3> <h3 class="headline"> <a class="link category-nature" href="#">Nature</a> </h3> <h3 class="headline"> <a class="link category-humor" href="#">Humor</a> </h3> <h3 class="headline"> <a class="link category-weather" href="#">Weather</a> </h3> <h3 class="headline"> <a class="link category-technology" href="#">Technology</a> </h3> <h3 class="headline"> <a class="link category-sports" href="#">Sports</a> </h3> </div> <div class="fixed-container"> <span>Filter:</span> <button class="btn-technology">Technology</button> </div> </div> <!-- wrapper -->2, yang merupakan kelas pembantu yang akan kita gunakan dengan JavaScript di segmen berikutnya
body { font-family: "Source Sans Pro", "Helvetica", "Sans-Serif"; } .wrapper { position: relative; padding-left: 1rem; padding-right: 1rem; margin: 2rem auto; max-width: 50em; } .news-feed { border: 1px solid #eee; max-height: 256px; overflow-y: scroll; } .headline { font-size: 1.25rem; padding: 0.25rem 1.5rem; } .link { color: #252525; text-decoration: none; } .fixed-container { position: fixed; bottom: 0; left: 0; padding: 1.5rem; } .btn-technology { cursor: pointer; font-size: 1rem; padding: 0.5rem 1rem; margin-top: 2rem; margin-left: 1rem; border-radius: 4px; border: 1px solid #82b97e; outline: none; } .js-hide { display: none; }_
Pastikan Anda menambahkan kelas <div class="wrapper"> <h1>Newsfeed</h1> <div class="news-feed"> <h3 class="headline"> <a class="link category-health" href="#">Health</a> </h3> <h3 class="headline"> <a class="link category-finances" href="#">Finances</a> </h3> <h3 class="headline"> <a class="link category-politics" href="#">Politics</a> </h3> <h3 class="headline"> <a class="link category-nature" href="#">Nature</a> </h3> <h3 class="headline"> <a class="link category-humor" href="#">Humor</a> </h3> <h3 class="headline"> <a class="link category-weather" href="#">Weather</a> </h3> <h3 class="headline"> <a class="link category-technology" href="#">Technology</a> </h3> <h3 class="headline"> <a class="link category-sports" href="#">Sports</a> </h3> </div> <div class="fixed-container"> <span>Filter:</span> <button class="btn-technology">Technology</button> </div> </div> <!-- wrapper -->_2 itu ke stylesheet CSS Anda dan mari beralih ke JavaScript
JavaScript
Salin dan tempel kode berikut ke file JS Anda. Saya akan menjelaskan bagaimana semuanya bekerja tepat di bawah
var btnTechnology = document.querySelector(".btn-technology") var allNewsCategories = document.querySelectorAll(".news-feed .link") function showCategoryTechnology() { for (var i = 0; i < allNewsCategories.length; i++) { if (!allNewsCategories[i].classList.contains("category-technology")) { allNewsCategories[i].parentElement.classList.toggle("js-hide") } } } btnTechnology.addEventListener("click", showCategoryTechnology)_
Cara kerja kode JavaScript
- Pertama kami menggunakan _______ 29 _______ untuk mengambil elemen tombol Teknologi kami dengan pemilih kelasnya <div class="wrapper"> <h1>Newsfeed</h1> <div class="news-feed"> <h3 class="headline"> <a class="link category-health" href="#">Health</a> </h3> <h3 class="headline"> <a class="link category-finances" href="#">Finances</a> </h3> <h3 class="headline"> <a class="link category-politics" href="#">Politics</a> </h3> <h3 class="headline"> <a class="link category-nature" href="#">Nature</a> </h3> <h3 class="headline"> <a class="link category-humor" href="#">Humor</a> </h3> <h3 class="headline"> <a class="link category-weather" href="#">Weather</a> </h3> <h3 class="headline"> <a class="link category-technology" href="#">Technology</a> </h3> <h3 class="headline"> <a class="link category-sports" href="#">Sports</a> </h3> </div> <div class="fixed-container"> <span>Filter:</span> <button class="btn-technology">Technology</button> </div> </div> <!-- wrapper -->5. yang akan bertindak sebagai pemicu untuk fungsi pemfilteran kita nanti. Kami menetapkan elemen tombol kami ke variabel yang disebut <div class="wrapper"> <h1>Newsfeed</h1> <div class="news-feed"> <h3 class="headline"> <a class="link category-health" href="#">Health</a> </h3> <h3 class="headline"> <a class="link category-finances" href="#">Finances</a> </h3> <h3 class="headline"> <a class="link category-politics" href="#">Politics</a> </h3> <h3 class="headline"> <a class="link category-nature" href="#">Nature</a> </h3> <h3 class="headline"> <a class="link category-humor" href="#">Humor</a> </h3> <h3 class="headline"> <a class="link category-weather" href="#">Weather</a> </h3> <h3 class="headline"> <a class="link category-technology" href="#">Technology</a> </h3> <h3 class="headline"> <a class="link category-sports" href="#">Sports</a> </h3> </div> <div class="fixed-container"> <span>Filter:</span> <button class="btn-technology">Technology</button> </div> </div> <!-- wrapper -->6
- Kemudian kami menggunakan <div class="wrapper"> <h1>Newsfeed</h1> <div class="news-feed"> <h3 class="headline"> <a class="link category-health" href="#">Health</a> </h3> <h3 class="headline"> <a class="link category-finances" href="#">Finances</a> </h3> <h3 class="headline"> <a class="link category-politics" href="#">Politics</a> </h3> <h3 class="headline"> <a class="link category-nature" href="#">Nature</a> </h3> <h3 class="headline"> <a class="link category-humor" href="#">Humor</a> </h3> <h3 class="headline"> <a class="link category-weather" href="#">Weather</a> </h3> <h3 class="headline"> <a class="link category-technology" href="#">Technology</a> </h3> <h3 class="headline"> <a class="link category-sports" href="#">Sports</a> </h3> </div> <div class="fixed-container"> <span>Filter:</span> <button class="btn-technology">Technology</button> </div> </div> <!-- wrapper -->_7 untuk mengambil semua item Umpan Berita (<div class="wrapper"> <h1>Newsfeed</h1> <div class="news-feed"> <h3 class="headline"> <a class="link category-health" href="#">Health</a> </h3> <h3 class="headline"> <a class="link category-finances" href="#">Finances</a> </h3> <h3 class="headline"> <a class="link category-politics" href="#">Politics</a> </h3> <h3 class="headline"> <a class="link category-nature" href="#">Nature</a> </h3> <h3 class="headline"> <a class="link category-humor" href="#">Humor</a> </h3> <h3 class="headline"> <a class="link category-weather" href="#">Weather</a> </h3> <h3 class="headline"> <a class="link category-technology" href="#">Technology</a> </h3> <h3 class="headline"> <a class="link category-sports" href="#">Sports</a> </h3> </div> <div class="fixed-container"> <span>Filter:</span> <button class="btn-technology">Technology</button> </div> </div> <!-- wrapper -->8) kami dan memilih setiap tautan item dengan nama kelasnya (<div class="wrapper"> <h1>Newsfeed</h1> <div class="news-feed"> <h3 class="headline"> <a class="link category-health" href="#">Health</a> </h3> <h3 class="headline"> <a class="link category-finances" href="#">Finances</a> </h3> <h3 class="headline"> <a class="link category-politics" href="#">Politics</a> </h3> <h3 class="headline"> <a class="link category-nature" href="#">Nature</a> </h3> <h3 class="headline"> <a class="link category-humor" href="#">Humor</a> </h3> <h3 class="headline"> <a class="link category-weather" href="#">Weather</a> </h3> <h3 class="headline"> <a class="link category-technology" href="#">Technology</a> </h3> <h3 class="headline"> <a class="link category-sports" href="#">Sports</a> </h3> </div> <div class="fixed-container"> <span>Filter:</span> <button class="btn-technology">Technology</button> </div> </div> <!-- wrapper -->9). Kami kemudian menetapkan semua tautan item berita kami ke variabel yang disebut body { font-family: "Source Sans Pro", "Helvetica", "Sans-Serif"; } .wrapper { position: relative; padding-left: 1rem; padding-right: 1rem; margin: 2rem auto; max-width: 50em; } .news-feed { border: 1px solid #eee; max-height: 256px; overflow-y: scroll; } .headline { font-size: 1.25rem; padding: 0.25rem 1.5rem; } .link { color: #252525; text-decoration: none; } .fixed-container { position: fixed; bottom: 0; left: 0; padding: 1.5rem; } .btn-technology { cursor: pointer; font-size: 1rem; padding: 0.5rem 1rem; margin-top: 2rem; margin-left: 1rem; border-radius: 4px; border: 1px solid #82b97e; outline: none; } .js-hide { display: none; }0
- Kemudian kami membuat fungsi, body { font-family: "Source Sans Pro", "Helvetica", "Sans-Serif"; } .wrapper { position: relative; padding-left: 1rem; padding-right: 1rem; margin: 2rem auto; max-width: 50em; } .news-feed { border: 1px solid #eee; max-height: 256px; overflow-y: scroll; } .headline { font-size: 1.25rem; padding: 0.25rem 1.5rem; } .link { color: #252525; text-decoration: none; } .fixed-container { position: fixed; bottom: 0; left: 0; padding: 1.5rem; } .btn-technology { cursor: pointer; font-size: 1rem; padding: 0.5rem 1rem; margin-top: 2rem; margin-left: 1rem; border-radius: 4px; border: 1px solid #82b97e; outline: none; } .js-hide { display: none; }_1 yang akan kami panggil saat tombol Teknologi diklik
- Di dalam badan fungsi, kita mengulangi semua item () di dalam elemen Umpan Berita dan menyimpannya dalam larik body { font-family: "Source Sans Pro", "Helvetica", "Sans-Serif"; } .wrapper { position: relative; padding-left: 1rem; padding-right: 1rem; margin: 2rem auto; max-width: 50em; } .news-feed { border: 1px solid #eee; max-height: 256px; overflow-y: scroll; } .headline { font-size: 1.25rem; padding: 0.25rem 1.5rem; } .link { color: #252525; text-decoration: none; } .fixed-container { position: fixed; bottom: 0; left: 0; padding: 1.5rem; } .btn-technology { cursor: pointer; font-size: 1rem; padding: 0.5rem 1rem; margin-top: 2rem; margin-left: 1rem; border-radius: 4px; border: 1px solid #82b97e; outline: none; } .js-hide { display: none; }2
- Di dalam loop, kami menambahkan pernyataan if kondisional yang berbunyi. “jika salah satu item dalam daftar yang baru saja kita ulangi tidak mengandung kelas body { font-family: "Source Sans Pro", "Helvetica", "Sans-Serif"; } .wrapper { position: relative; padding-left: 1rem; padding-right: 1rem; margin: 2rem auto; max-width: 50em; } .news-feed { border: 1px solid #eee; max-height: 256px; overflow-y: scroll; } .headline { font-size: 1.25rem; padding: 0.25rem 1.5rem; } .link { color: #252525; text-decoration: none; } .fixed-container { position: fixed; bottom: 0; left: 0; padding: 1.5rem; } .btn-technology { cursor: pointer; font-size: 1rem; padding: 0.5rem 1rem; margin-top: 2rem; margin-left: 1rem; border-radius: 4px; border: 1px solid #82b97e; outline: none; } .js-hide { display: none; }3 — kemudian jalankan classList. beralih metode dengan kelas <div class="wrapper"> <h1>Newsfeed</h1> <div class="news-feed"> <h3 class="headline"> <a class="link category-health" href="#">Health</a> </h3> <h3 class="headline"> <a class="link category-finances" href="#">Finances</a> </h3> <h3 class="headline"> <a class="link category-politics" href="#">Politics</a> </h3> <h3 class="headline"> <a class="link category-nature" href="#">Nature</a> </h3> <h3 class="headline"> <a class="link category-humor" href="#">Humor</a> </h3> <h3 class="headline"> <a class="link category-weather" href="#">Weather</a> </h3> <h3 class="headline"> <a class="link category-technology" href="#">Technology</a> </h3> <h3 class="headline"> <a class="link category-sports" href="#">Sports</a> </h3> </div> <div class="fixed-container"> <span>Filter:</span> <button class="btn-technology">Technology</button> </div> </div> <!-- wrapper -->_2 pada item tersebut
- Pada baris terakhir, kami melampirkan metode body { font-family: "Source Sans Pro", "Helvetica", "Sans-Serif"; } .wrapper { position: relative; padding-left: 1rem; padding-right: 1rem; margin: 2rem auto; max-width: 50em; } .news-feed { border: 1px solid #eee; max-height: 256px; overflow-y: scroll; } .headline { font-size: 1.25rem; padding: 0.25rem 1.5rem; } .link { color: #252525; text-decoration: none; } .fixed-container { position: fixed; bottom: 0; left: 0; padding: 1.5rem; } .btn-technology { cursor: pointer; font-size: 1rem; padding: 0.5rem 1rem; margin-top: 2rem; margin-left: 1rem; border-radius: 4px; border: 1px solid #82b97e; outline: none; } .js-hide { display: none; }5 ke elemen tombol kami. Kami memberi tahu pendengar acara untuk mendengarkan acara 'klik'. Saat tombol diklik, ia memanggil fungsi body { font-family: "Source Sans Pro", "Helvetica", "Sans-Serif"; } .wrapper { position: relative; padding-left: 1rem; padding-right: 1rem; margin: 2rem auto; max-width: 50em; } .news-feed { border: 1px solid #eee; max-height: 256px; overflow-y: scroll; } .headline { font-size: 1.25rem; padding: 0.25rem 1.5rem; } .link { color: #252525; text-decoration: none; } .fixed-container { position: fixed; bottom: 0; left: 0; padding: 1.5rem; } .btn-technology { cursor: pointer; font-size: 1rem; padding: 0.5rem 1rem; margin-top: 2rem; margin-left: 1rem; border-radius: 4px; border: 1px solid #82b97e; outline: none; } .js-hide { display: none; }6, yang menjalankan seluruh blok kode yang memungkinkan fitur toggling ini
Simbol body { font-family: "Source Sans Pro", "Helvetica", "Sans-Serif"; } .wrapper { position: relative; padding-left: 1rem; padding-right: 1rem; margin: 2rem auto; max-width: 50em; } .news-feed { border: 1px solid #eee; max-height: 256px; overflow-y: scroll; } .headline { font-size: 1.25rem; padding: 0.25rem 1.5rem; } .link { color: #252525; text-decoration: none; } .fixed-container { position: fixed; bottom: 0; left: 0; padding: 1.5rem; } .btn-technology { cursor: pointer; font-size: 1rem; padding: 0.5rem 1rem; margin-top: 2rem; margin-left: 1rem; border-radius: 4px; border: 1px solid #82b97e; outline: none; } .js-hide { display: none; }7 (Operator Logika) yang kita tempatkan di depan body { font-family: "Source Sans Pro", "Helvetica", "Sans-Serif"; } .wrapper { position: relative; padding-left: 1rem; padding-right: 1rem; margin: 2rem auto; max-width: 50em; } .news-feed { border: 1px solid #eee; max-height: 256px; overflow-y: scroll; } .headline { font-size: 1.25rem; padding: 0.25rem 1.5rem; } .link { color: #252525; text-decoration: none; } .fixed-container { position: fixed; bottom: 0; left: 0; padding: 1.5rem; } .btn-technology { cursor: pointer; font-size: 1rem; padding: 0.5rem 1rem; margin-top: 2rem; margin-left: 1rem; border-radius: 4px; border: 1px solid #82b97e; outline: none; } .js-hide { display: none; }8 adalah yang menangani bagian "bukan" dari pernyataan body { font-family: "Source Sans Pro", "Helvetica", "Sans-Serif"; } .wrapper { position: relative; padding-left: 1rem; padding-right: 1rem; margin: 2rem auto; max-width: 50em; } .news-feed { border: 1px solid #eee; max-height: 256px; overflow-y: scroll; } .headline { font-size: 1.25rem; padding: 0.25rem 1.5rem; } .link { color: #252525; text-decoration: none; } .fixed-container { position: fixed; bottom: 0; left: 0; padding: 1.5rem; } .btn-technology { cursor: pointer; font-size: 1rem; padding: 0.5rem 1rem; margin-top: 2rem; margin-left: 1rem; border-radius: 4px; border: 1px solid #82b97e; outline: none; } .js-hide { display: none; }9 kita. Jika Anda menghapus body { font-family: "Source Sans Pro", "Helvetica", "Sans-Serif"; } .wrapper { position: relative; padding-left: 1rem; padding-right: 1rem; margin: 2rem auto; max-width: 50em; } .news-feed { border: 1px solid #eee; max-height: 256px; overflow-y: scroll; } .headline { font-size: 1.25rem; padding: 0.25rem 1.5rem; } .link { color: #252525; text-decoration: none; } .fixed-container { position: fixed; bottom: 0; left: 0; padding: 1.5rem; } .btn-technology { cursor: pointer; font-size: 1rem; padding: 0.5rem 1rem; margin-top: 2rem; margin-left: 1rem; border-radius: 4px; border: 1px solid #82b97e; outline: none; } .js-hide { display: none; }_7 maka kode kami akan melakukan kebalikan dari apa yang dilakukannya sekarang
Kita juga bisa menggunakan classList. remove() untuk menghapus item berita yang tidak diinginkan. Namun dalam banyak kasus, masuk akal untuk memberi pengguna kami opsi untuk menyembunyikan/menampilkan item, yang merupakan classList. beralih() tidak