Javascript mendapatkan kelas elemen

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 _______ 25 _______ metode dari ________ 29 _______ properti 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)

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

Bagaimana cara mendapatkan kelas CSS dari suatu elemen dalam JavaScript?

CSS suatu elemen dapat diperoleh menggunakan fungsi elemen getComputedStyle di JavaScript. Ini mengembalikan objek JavaScript yang berisi properti CSS dan nilainya. Objek ini diindeks dan dapat diubah di atas nama properti. getPropertyValue(property) digunakan untuk mendapatkan nilai properti.

Bagaimana Anda menemukan semua kelas elemen?

Anda cukup menggunakan metode attr() untuk mendapatkan daftar kelas i. e. daftar semua kelas yang ditugaskan ke elemen menggunakan jQuery. Nama kelas dipisahkan dengan spasi.

Bagaimana cara mendapatkan nilai atribut kelas dalam JavaScript?

JavaScript metode getAttribute() . Metode getAttribute() digunakan untuk mendapatkan nilai atribut dari elemen tertentu. Jika atributnya ada, ia mengembalikan string yang mewakili nilai atribut yang sesuai. Jika atribut yang sesuai tidak ada, itu akan mengembalikan string kosong atau nol.

Bagaimana Anda menemukan kelas elemen yang diklik?

Untuk menemukan kelas elemen yang diklik, kami menggunakan ini. properti className . Properti className digunakan untuk mengatur atau mengembalikan nilai atribut kelas elemen. Dengan menggunakan properti ini, pengguna dapat mengubah kelas elemen ke kelas yang diinginkan.