Cara mendapatkan elemen dengan banyak kelas

135

Katakanlah saya punya ini:

<div class="class1 class2"></div>

Bagaimana cara memilih divelemen ini ?

document.getElementsByClassName('class1')[0].getElementsByClassName('class2')[0]

Itu tidak berhasil.

Saya tahu itu, di jQuery $('.class1.class2'), tapi saya ingin memilihnya dengan vanilla JavaScript.

javascript class element

— Nathan Prometheus
sumber

183

Ini sebenarnya sangat mirip dengan jQuery:

document.getElementsByClassName('class1 class2')

Dokumen MDN getElementsByClassName

— Joe
sumber

bagaimana dengan mendapatkan elemen hanya dengan satu kelas, yang ditentukan @Joe

— CodeGuru

1

seingat saya, kelas-kelas itu tidak memiliki "." document.getElementsByClassName ('class1 class2')

— Misha Beskin

2

Di tautan MDN yang diberikan, titik tidak digunakan sebelum nama kelas dalam parameter getElements. Saya memeriksanya di firefox serta chrome dan ini berfungsi tanpa titik, tetapi tidak dengan titik.

— Gaurav Singh

41

DAN (kedua kelas)

var list = document.getElementsByClassName("class1 class2");
var list = document.querySelectorAll(".class1.class2");

ATAU (setidaknya satu kelas)

var list = document.querySelectorAll(".class1,.class2");

XOR (satu kelas tetapi tidak yang lain)

var list = document.querySelectorAll(".class1:not(.class2),.class2:not(.class1)");

NAND (bukan kedua kelas)

var list = document.querySelectorAll(":not(.class1),:not(.class2)");

NOR (bukan salah satu dari dua kelas)

var list = document.querySelectorAll(":not(.class1):not(.class2)");

— Bitterblue
sumber

Ini fantastis. Harus top.

— Hackstaar

37

querySelectorAll dengan penyeleksi kelas standar juga berfungsi untuk ini.

document.querySelectorAll('.class1.class2');

— filoxo.dll
sumber

2

Itu tidak berhasil, itu harus document.querySelectorAll('.class1, .class2');

— bazzlebrush

9

@bazzlebrush, pemilih Anda akan menangkap elemen dengan .class1ATAU .class2, sedangkan yang di atas hanya akan menangkap elemen dengan kedua kelas dan sebenarnya berfungsi. Lihat keluaran konsol dari tes ini: jsfiddle.net/0ph1p9p2

— filoxo

Ok, saya salah, saya salah paham apa yang OP ingin lakukan. Tapi IMO kasus penggunaan yang lebih umum adalah ingin memilih elemen yang memiliki salah satu kelas atau keduanya, dalam hal ini contoh saya adalah yang Anda inginkan.

— bazzlebrush

12

Seperti yang dikatakan @filoxo, Anda dapat menggunakan document.querySelectorAll.

Jika Anda tahu bahwa hanya ada satu elemen dengan kelas yang Anda cari, atau Anda hanya tertarik pada yang pertama, Anda dapat menggunakan:

document.querySelector('.class1.class2');

BTW, while .class1.class2menunjukkan elemen dengan kedua kelas, .class1 .class2(perhatikan spasi) menunjukkan hierarki - dan elemen dengan kelas class2yang ada di dalam elemen en dengan kelas class1:

<div class='class1'>
  <div>
    <div class='class2'>
      :
      :

Dan jika Anda ingin memaksa mengambil turunan langsung, gunakan >tanda ( .class1 > .class2):

<div class='class1'>
  <div class='class2'>
    :
    :

Untuk seluruh informasi tentang penyeleksi:
https://www.w3schools.com/jquery/jquery_ref_selectors.asp

— guyaloni
sumber

1

html

<h2 class="example example2">A heading with class="example"</h2>

kode javascritp

var element = document.querySelectorAll(".example.example2");
element.style.backgroundColor = "green";

Metode querySelectorAll () mengembalikan semua elemen dalam dokumen yang cocok dengan pemilih CSS yang ditentukan, sebagai objek NodeList statis.

Objek NodeList merepresentasikan kumpulan node. Node dapat diakses dengan nomor indeks. Indeks dimulai dari 0.

juga pelajari lebih lanjut tentang https://www.w3schools.com/jsref/met_document_queryselectorall.asp

== Terima Kasih ==

— Md. Abu Sayed
sumber

1

Oke kode ini melakukan apa yang Anda butuhkan:

HTML:

<div class="class1">nothing happens hear.</div>

<div class="class1 class2">This element will receive yout code.</div>

<div class="class1">nothing happens hear.</div>

JS:

function getElementMultipleClasses() {
    var x = document.getElementsByClassName("class1 class2");
    x[0].innerHTML = "This is the element you want";
}
getElementMultipleClasses();

Semoga membantu! ;)

— Gabriel Marques
sumber

0

sebenarnya jawaban @bazzlebrush dan komentar @filoxo banyak membantu saya.

Saya perlu menemukan elemen di mana kelas bisa menjadi "zA yO" ATAU "zA zE"

Menggunakan jquery, saya pertama-tama memilih induk dari elemen yang diinginkan:

(div dengan kelas yang dimulai dengan 'abc' dan style! = 'display: none')

var tom = $('div[class^="abc"][style!="display: none;"]')[0];

kemudian anak yang diinginkan dari elemen itu:

var ax = tom.querySelectorAll('.zA.yO, .zA.zE');

bekerja dengan sempurna! Perhatikan bahwa Anda tidak perlu melakukan document.querySelector, Anda bisa seperti di atas meneruskan objek yang telah dipilih sebelumnya.

— pengguna2677034
sumber