具有两个类的getElementsByClassName（）

是否可以使用类a 或 仅b使用getElementsByClassName()一次获取所有元素？我更喜欢香草JavaScript。

您不能使用getElementsByClassName()method来做到这一点，而只能使用querySelectorAll()带有逗号分隔的类选择器的method。

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

您可以通过getElementsByClassName()使用空格分隔多个类名来传递它们：

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

现在，这与.querySelectorAll(".class1,.class2,.class3")方法不同之处在于它应用了一个连词，而不是一个析取词-“和”而不是“或”。从而

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

就好像

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

有时您想要一个，有时您想要另一个。的确，它.querySelectorAll()为您提供了更大的灵活性。

不，您仅凭一个document.getElementsByClassName()电话就无法实现这一目标。该函数返回具有第一个参数中指定的所有类的元素，以空格分隔。

有两种可能的解决方案。首先是document.querySelectorAll()使用CSS选择器。

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

第二种解决方案是调用document.getElementsByClassName()两次，使用将结果转换成数组，然后使用Array.from()合并它们Array.prototype.concat()。为了避免重复（例如，当元素有两个 a和b类），你必须创建一个新的集合从数组，然后使用重新设置为阵列Array.from()。

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

请参见下面的演示：

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>

请注意，第一个解决方案给出了一个类似数组的NodeList对象，而第二个解决方案给出了一个数组。

只是为了增加一点支持，这是一个与IE的较早版本兼容并使用纯香草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.
}