Как получить элементы с несколькими классами

Скажем, у меня есть это:

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

Как выбрать этот divэлемент?

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

Это не работает.

Я знаю, что в jQuery это так $('.class1.class2'), но я хотел бы выбрать его с помощью ванильного JavaScript.

На самом деле это очень похоже на jQuery:

document.getElementsByClassName('class1 class2')

Документ MDN 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)");

НИ (не любой из двух классов)

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

querySelectorAll со стандартными селекторами классов также работает для этого.

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

Как сказал @filoxo, вы можете использовать document.querySelectorAll.

Если вы знаете, что существует только один элемент с классом, который вы ищете, или вас интересует только первый, вы можете использовать:

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

Кстати, в то время как .class1.class2указывает элемент с обоими классами .class1 .class2(обратите внимание на пробел), указывает иерархию - и элемент с классом, class2который находится внутри элемента en с классом class1:

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

А если вы хотите принудительно получить прямого потомка, используйте >sign ( .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" OR "zA zE"

Используя jquery, я сначала выбираю родительский элемент желаемых элементов:

(div с классом, начинающимся с 'abc' и стилем! = 'display: none')

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

затем желаемые дочерние элементы этого элемента:

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

работает отлично! обратите внимание, что вам не нужно делать document.querySelector, вы можете, как указано выше, передать предварительно выбранный объект.