Chrome没有正确实现getElementsByClassName:不能使用多个类

Chrome does not properly implement getElementsByClassName: cannot use multiple classes

本文关键字：不能 getElementsByClassName 实现 Chrome      更新时间：2023-09-26

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？

您没有理解它不是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>

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

在JSFiddle 上运行示例

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

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

JSFiddle示例

相关文章：