Como obter elementos com várias classes


132

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.

Respostas:


180

Na verdade, é muito semelhante ao jQuery:

document.getElementsByClassName('class1 class2')

Doc MDN getElementsByClassName


o que sobre a obtenção de elemento com apenas uma classe, que é o especificado @ Joe
CodeGuru

1
como eu me lembro, as aulas vêm sem "." document.getElementsByClassName ('class1 class2')
Misha Beskin

2
No link MDN fornecido, o ponto não é usado antes dos nomes das classes no parâmetro getElements. Eu verifiquei isso no firefox e no chrome e funcionou sem pontos, mas não com pontos.
Gaurav Singh

38

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

Isto é fantástico. Deve estar no topo.
Hackstaar

36

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

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

2
Isso não funciona, ele precisa ser document.querySelectorAll('.class1, .class2');
bazzlebrush

9
@bazzlebrush, seu seletor capturaria elementos com .class1OR .class2, enquanto o acima capturaria apenas elementos com ambas as classes e, de fato, funciona. Veja a saída do console deste teste: jsfiddle.net/0ph1p9p2
filoxo

Ok, meu mal, eu não entendi o que o OP queria fazer. Mas, na IMO, um caso de uso mais típico é querer selecionar elementos que tenham uma classe ou ambas, nesse caso, meu exemplo é o que você deseja.
precisa saber é o seguinte

12

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


1

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


1

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


0

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.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.