getElementsByClassName（）有两个类

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

Answer 1

你不能用getElementsByClassName()方法来代替，而是使用带逗号分隔的类select器的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()调用来实现。 该函数返回第一个参数中指定的所有类作为空格分隔string的元素。

有两种可能的解决scheme。 首先是使用document.querySelectorAll()而不是使用CSSselect器。

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

第二个解决scheme是调用document.getElementsByClassName()两次，使用Array.from()将结果转换为数组，并使用Array.prototype.concat()合并它们。 为避免重复（例如，当元素同时 a和b类），必须从该数组创build一个新的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="ab"></div> <div class="c"></div> 

Answer 4

你可以通过用空格分隔多个类名来传递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()确实给你提供了更多的灵活性。