Як отримати елементи з кількома класами

Скажіть, у мене це:

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

Як вибрати цей divелемент?

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

Це не працює.

Я знаю, що в jQuery це так $('.class1.class2'), але я хотів би вибрати його за допомогою ванільного JavaScript.

Він насправді дуже схожий на jQuery:

document.getElementsByClassName('class1 class2')

MDN Doc getElementsByClassName

І (обидва класи)

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

АБО (принаймні один клас)

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

XOR (один клас, але не інший)

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

NAND (не обидва класи)

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

NOR (не будь-який з двох класів)

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

querySelectorAll зі стандартними селекторами класу також працює для цього.

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

Як сказав @filoxo, ви можете використовувати document.querySelectorAll.

Якщо ви знаєте, що з класом, який ви шукаєте, є лише один елемент, або вас цікавить лише перший, ви можете використовувати:

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

BTW, хоча .class1.class2вказує на елемент обох класів, .class1 .class2(помічайте пробіл) вказує ієрархію - і елемент з класом, class2який знаходиться всередині en елемента з класом class1:

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

І якщо ви хочете змусити отримати пряму дитину, використовуйте >знак ( .class1 > .class2):

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

Повна інформація про селектори:
https://www.w3schools.com/jquery/jquery_ref_selectors.asp

html

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

код javascritp

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

Метод querySelectorAll () повертає всі елементи в документі, які відповідають вказаним селекторам (-ям) CSS, як статичний об'єкт NodeList.

Об'єкт NodeList являє собою сукупність вузлів. До вузлів можна отримати доступ за номерами індексу. Індекс починається з 0.

також дізнайтеся більше про https://www.w3schools.com/jsref/met_document_queryselectorall.asp

== Дякую ==

Гаразд, цей код робить саме те, що вам потрібно:

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

Сподіваюся, це допомагає! ;)

насправді відповідь @bazzlebrush та коментар @filoxo мені дуже допомогли.

Мені потрібно було знайти елементи, де клас міг би бути "zA yO" АБО "zA zE"

Використовуючи jquery, я спочатку вибираю батько потрібних елементів:

(div з класом, що починається з 'abc' та style! = 'display: none')

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

то бажані діти цього елемента:

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

працює чудово! зауважте, що вам не потрібно робити document.querySelector, який ви можете передати вищезазначеному об'єкту.