Como obter elementos com várias classes

Digamos que eu tenho isso:

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

Como faço para selecionar esse divelemento?

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

Isso não funciona.

Eu sei que, no jQuery, é $('.class1.class2'), mas gostaria de selecioná-lo com JavaScript vanilla.

Na verdade, é muito semelhante ao jQuery:

document.getElementsByClassName('class1 class2')

Doc MDN getElementsByClassName

AND (ambas as classes)

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

OU (pelo menos uma classe)

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

XOR (uma classe, mas não a outra)

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

NAND (não ambas as classes)

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

NOR (nenhuma das duas classes)

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

querySelectorAll com seletores de classe padrão também funciona para isso.

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

Como o @filoxo disse, você pode usar document.querySelectorAll.

Se você sabe que existe apenas um elemento com a classe que está procurando ou se interessa apenas pelo primeiro, pode usar:

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

BTW, enquanto .class1.class2indica um elemento com ambas as classes, .class1 .class2(observe o espaço em branco) indica uma hierarquia - e um elemento com a classe class2que está dentro de um elemento com a classe class1:

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

E se você deseja forçar a recuperação de um filho direto, use >sign ( .class1 > .class2):

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

Para obter informações completas sobre os seletores:
https://www.w3schools.com/jquery/jquery_ref_selectors.asp

html

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

código javascritp

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

O método querySelectorAll () retorna todos os elementos no documento que correspondem aos seletores CSS especificados, como um objeto estático NodeList.

O objeto NodeList representa uma coleção de nós. Os nós podem ser acessados ​​por números de índice. O índice começa em 0.

também saiba mais sobre https://www.w3schools.com/jsref/met_document_queryselectorall.asp

== Obrigado ==

Ok, este código faz exatamente o que você precisa:

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

Espero que ajude! ;)

na verdade, a resposta do @bazzlebrush e o comentário do @filoxo me ajudaram bastante.

Eu precisava encontrar os elementos em que a classe poderia ser "zA yO" OU "zA zE"

Usando jquery, primeiro seleciono o pai dos elementos desejados:

(uma div com classe começando com 'abc' e style! = 'display: none')

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

então os filhos desejados desse elemento:

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

funciona perfeitamente! note que você não precisa document.querySelector como pode passar acima em um objeto pré-selecionado.