getElementsByClassName()有两个类

Question

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

Answer 1

您不能使用getElementsByClassName()方法而是使用querySelectorAll()逗号分隔的类选择器的方法.

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

Answer 2

您可以通过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()为您提供了更大的灵活性。

Answer 3

只是为了增加一点支持,这里有一个与旧版IE兼容的版本并使用纯粹的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.
}

Answer 4

不,只用一个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对象,而第二个解决方案只提供了一个数组.