IE、Edge 和 Safari 中 document.querySelectorAll 的兼容性答案

【问题标题】：Compatibility of document.querySelectorAll in IE, Edge and SafariIE、Edge 和 Safari 中 document.querySelectorAll 的兼容性
【发布时间】：2016-12-06 10:49:12
【问题描述】：

参考答案：https://stackoverflow.com/a/38399344/5132413

请参考my question，链接above的答案仅适用于Firefox、Chrome和Opera。

我做了一些研究，发现它（不区分大小写标志）不兼容。我需要 IE、Edge 和 Safari 中的等价物。

var divs = document.querySelectorAll('div[class^="foo" i]');

【问题讨论】：

这是 CSS4，你现在不应该使用它，因为没有太多支持。
我使用它没有问题，但我现在不知道“i”的用途：所以试试 document.querySelectorAll('div[class^="foo"]');跨度>
这是不区分大小写的限定符。检查this's answer。
“我做了一些研究，发现它不兼容。”您的研究结果表明这是 querySelectorAll 的问题，而不是不区分大小写标志的问题？
@BoltClock 我的意思是，不区分大小写标志与 IE 和 Edge 不兼容，因为 CSS4。这就是为什么我引用了我的一个问题及其答案。现已编辑。

标签： javascript internet-explorer safari microsoft-edge selectors-api

【解决方案1】：

由于 css 级别 4 仍处于草稿中，区分大小写的选择器与大多数浏览器不兼容。您可以使用这样的过滤方法：

var divs = [].slice.call(document.querySelectorAll('div')).filter(function(el){
   return el.className.match(/^foo/i);
});

更新：需要说明您现在可以使用 css4 选择器。

document.querySelectorAll('div[class^="foo" i]');

请参阅this link 了解浏览器兼容性。

【讨论】：

我收到一个错误 - .filter is not a function。使用 Chrome 52 x64。
document.querySelectorAll 返回NodeList，而不是array。我想这可能是问题所在。我已经编辑了答案。它有效。
哦！我不在乎。谢谢。