Question

是否可以使用a只使用b 或 getElementsByClassName()的所有元素？我更喜欢vanilla JavaScript。

Answer 1

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

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

Answer 2

只是为了增加一点支持，这里有一个与旧版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.
}

Answer 3

不，只有一次document.getElementsByClassName()来电，你无法做到这一点。该函数返回将第一个参数中指定的类 all 的元素作为空格分隔的字符串。

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

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

第二个解决方案是调用document.getElementsByClassName()两次，使用Array.from()将结果转换为数组，并使用Array.prototype.concat()合并它们。为避免重复（例如，当元素 a和b类时），您必须从该数组创建一个新的Set，然后将其转换使用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对象，而第二个解决方案只提供了一个数组。

Answer 4

你可以通过用空格分隔多个类名来传递给getElementsByClassName()：

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

现在，这与.querySelectorAll(".class1,.class2,.class3")方法的不同之处在于它应用连接，而不是析取 - ＆＃34;＆＃34;而不是＆＃34;或＆＃34;。因此

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

就像

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

有时你想要一个，有时你想要另一个。 .querySelectorAll()为您提供更多灵活性，这绝对是正确的。

getElementsByClassName（）有两个类

4 个答案: