Cara mendapatkan elemen dengan banyak kelas

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.

Ini sebenarnya sangat mirip dengan jQuery:

document.getElementsByClassName('class1 class2')

Dokumen MDN getElementsByClassName

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)");

querySelectorAll dengan penyeleksi kelas standar juga berfungsi untuk ini.

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

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

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 ==

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! ;)

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.