web-dev-qa-db-fra.com

Comment obtenir des éléments avec plusieurs classes

Dis que j'ai ceci:

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

Comment sélectionner cet élément div?

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

Cela ne fonctionne pas.

Je sais que, dans jQuery, c’est $('.class1.class2'), mais j’aimerais le sélectionner avec JavaScript.

javascriptclasselement
86
Nathan Prometheus

C'est en fait très similaire à jQuery:

document.getElementsByClassName('class1 class2')

Doc MDN getElementsByClassName

138
Joe

querySelectorAll avec les sélecteurs de classe standard fonctionne également pour cela. 

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

Comme @filoxo l'a dit, vous pouvez utiliser document.querySelectorAll. 

Si vous savez qu'il n'y a qu'un seul élément dans la classe que vous recherchez ou si vous ne vous intéressez qu'au premier, vous pouvez utiliser: 

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

BTW, alors que .class1.class2 indique un élément avec les classes deux, .class1 .class2 (notez les espaces) indique une hiérarchie - et un élément avec la classe class2 qui est à l'intérieur d'un élément avec la classe class1: 

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

Et si vous voulez forcer la récupération d'un enfant direct, utilisez le signe > (.class1 > .class2):

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

Pour des informations complètes sur les sélecteurs:
https://www.w3schools.com/jquery/jquery_ref_selectors.asp

6
guyaloni

Ok, ce code fait exactement ce dont vous avez besoin:

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

J'espère que ça aide! ;)

1
Gabriel Marques

html

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

code javascritp

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

La méthode querySelectorAll () renvoie tous les éléments du document correspondant à un ou plusieurs sélecteurs CSS spécifiés, sous forme d'objet NodeList statique.

L'objet NodeList représente une collection de nœuds. Les nœuds sont accessibles par des numéros d'index. L'index commence à 0.

en savoir plus sur https://www.w3schools.com/jsref/met_document_queryselectorall.asp

== Merci ==

0
Md. Abu Sayed

en fait, la réponse de @bazzlebrush et le commentaire de @filoxo m'ont beaucoup aidé.

Je devais trouver les éléments où la classe pourrait être "zA yO"OU"zA zE" 

En utilisant jquery, je sélectionne d’abord le parent des éléments souhaités:

(une div dont la classe commence par 'abc' et style! = 'display: none')

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

alors les enfants désirés de cet élément:

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

marche parfaitement! notez que vous n'avez pas besoin de document.querySelector, vous pouvez comme ci-dessus faire passer un objet présélectionné.

0
user2677034