getElementsByClassName() 有两个类

Question

是否有可能只使用一次getElementsByClassName() 获得所有具有类a 或 b 的元素？我更喜欢原生 JavaScript。

Answer 1

您不能使用 getElementsByClassName() 方法来代替使用带有逗号分隔的类选择器的 querySelectorAll() 方法。

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

Answer 2

您可以通过用空格分隔多个类名给getElementsByClassName()：

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

现在，这与.querySelectorAll(".class1,.class2,.class3") 方法的不同之处在于它应用了连词，而不是连词——“and”而不是“or”。因此

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() 调用是无法实现的。该函数将具有 all 在第一个参数中指定的类的元素作为空格分隔的字符串返回。

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

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

第二种解决方案是调用document.getElementsByClassName() 两次，使用Array.from() 将结果转换为数组，然后使用Array.prototype.concat() 将它们合并。为避免重复（例如，当元素 both a 和 b 类时），您必须从该数组创建一个新的 Set，然后使用 @987654335 将其转回数组@。

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 对象，而第二个解决方案只给出了一个数组。