Chrome 没有正确实现 getElementsByClassName：不能使用多个类答案

【问题标题】：Chrome does not properly implement getElementsByClassName: cannot use multiple classesChrome 没有正确实现 getElementsByClassName：不能使用多个类
【发布时间】：2013-06-22 14:50:10
【问题描述】：

getElementsByClassName 的规范规定，您可以通过将它们放在空格分隔的字符串中来一次搜索多个类。

https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName

/* From MDN */
elements = document.getElementsByClassName(names); // or:
elements = rootElement.getElementsByClassName(names);

elements 是已找到元素的 HTMLCollection。
names 是一个字符串，表示要匹配的类名列表；类名用空格分隔
getElementsByClassName 可以在任何元素上调用，而不仅仅是在文档上。调用它的元素将用作搜索的根。

但是在 Chrome 上尝试这个结果为零！有没有人能够让它在 Chrome 中工作？只是 Chrome 还是 WebKit？

【问题讨论】：

它 works 在我的 Chrome 副本中。
@Quentin 这不是它应该如何工作的。它应该能够获取这两个 div，但它返回零：jsbin.com/isusir/2/edit
@DonRhummy 实际上这正是它应该如何工作的“返回一组具有所有给定类名的元素”
这里一样，就像盒子上说的那样工作。我还要注意，传递给 getElementsByClassName 的类的顺序对于具有 2 个类的元素并不重要（没有尝试其他类）。即"class1 class2" 返回与"class2 class1" 相同数量的结果。测试环境：Chrome 版本 28.0.1500.52 m, Win7, 64bit
@PatrickEvans 谢谢，我想我误解了。

标签： javascript html google-chrome dom webkit

【解决方案1】：

您错过了，这不是 OR。这是一个 AND。

elements = document.getElementsByClassName("foo bar");

它说元素需要同时具有 foo 和 bar 类。

<div class="foo">Not Selected</div>
<div class="bar">Not Selected</div>
<div class="foo bar">Selected</div>

变量元素只会找到上面那个集合中的最后一个元素。

Running Example on JSFiddle

如果你想做一个或，你可以在现代浏览器上使用quersySelectorAll()

var elements = document.querySelectorAll(".foo, .bar");

JSFiddle Example

【讨论】：

我更新了我的答案，向您展示了如何使用 querySelectorAll 进行或操作的方法。希望这能得到你想要的。