Chrome无法正确实现getElementsByClassName：无法使用多个类

Question

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

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

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

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

但是在Chrome上尝试此操作会得到零结果！有没有人能够在Chrome中使用它？它只是Chrome或WebKit吗？

Answer 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