getElementsByClassName () avec deux classes

Question

Est-il possible d'obtenir tous les éléments avec la classe a ou b utilisant getElementsByClassName() une seule fois? Je préférerais JavaScript vanille.

Answer 1

Vous ne pouvez pas le faire avec getElementsByClassName() méthode plutôt utiliser querySelectorAll() méthode avec sélecteurs de classe séparées par des virgules.

 document.querySelectorAll('.a,.b')
 

Answer 2

Vous pouvez passer plus d'un nom de classe à l' getElementsByClassName() en les séparant par des espaces:

var elems = document.getElementsByClassName("class1 class2 class3");

Maintenant, ce qui diffère de l' .querySelectorAll(".class1,.class2,.class3") approche qu'elle s'applique à un concert, pas une disjonction — "et" au lieu de "ou". Ainsi

var elems = document.getElementsByClassName("class1 class2 class3");

c'est comme

var elems = document.querySelectorAll(".class1.class2.class3");

Parfois, vous en voulez un, parfois, vous voulez que les autres. Il est certainement vrai que l' .querySelectorAll() vous donne beaucoup plus de flexibilité.

Answer 3

Non, vous ne pouvez pas réaliser qu'avec un seul document.getElementsByClassName() appel. Cette fonction retourne les éléments qui ont tous des classes indiquées dans le premier argument est une chaîne séparée par des espaces.

Il y a deux solution possible. La première est d'utiliser document.querySelectorAll() au lieu de cela, qui utilise des sélecteurs CSS.

document.querySelectorAll(".a, .b")

La deuxième solution est d'appeler document.getElementsByClassName() deux fois, tour les résultats dans des tableaux à l'aide d' Array.from() et de les fusionner à l'aide de Array.prototype.concat(). Pour éviter les doublons (par exemple lors de l'élément a à la fois a et b de la classe), vous devez créer un nouvel Ensemble à partir de ce tableau, puis remettez-le au tableau à l'aide d' Array.from().

const classA = Array.from(document.getElementsByClassName("a"))
     ,classB = Array.from(document.getElementsByClassName("b"))
     ,result = Array.from(new Set(classA.concat(classB)))

Voir démonstration ci-dessous:

console.log("first solution", document.querySelectorAll(".a, .b"))

const classA = Array.from(document.getElementsByClassName("a"))
     ,classB = Array.from(document.getElementsByClassName("b"))
     ,result = Array.from(new Set(classA.concat(classB)))

console.log("second solution", result)

<div class="a"></div>
<div class="b"></div>
<div class="a b"></div>
<div class="c"></div>

Notez que la première solution donne un tableau comme NodeList objet, tandis que la seconde donne juste un tableau.

Answer 4

Juste pour ajouter un peu plus de support, voici une version compatible avec les anciennes versions de IE et utilisant pure vanilla js:

 function getElementsByClassNameOr(root, classNameString) // classNameString like '.a, .b' don't forget the comma separator
 {
    var arr = [],
    rx = new RegExp('(^|[ \n\r\t\f])' + classNameString + '([ \n\r\t\f]|$)'),
    elements = root.getElementsByTagName("*");

    var elem;

    for (i=0 ; i < elements.length ; i++) {
        elem = elements[i];
        if (rx.test(elem.className)) {
            arr.push(elem);
        }

    }

    return arr; // will contain all the elements that have one of the classes in ClassNameString, root can be document or a div.
}