是否可以使用类a 或 仅b使用getElementsByClassName()一次来获取所有元素？我更喜欢香草 JavaScript。
getElementsByClassName() 有两个类
IT技术
javascript
html
dom
2021-03-08 14:14:10
4个回答
您不能使用getElementsByClassName()方法来实现，而是使用querySelectorAll()带有逗号分隔的类选择器的方法。
document.querySelectorAll('.a,.b')
您可以通过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()为您提供了更多的灵活性。
不，你不能只通过一个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 兼容并使用纯 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.
}