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

Posted 2023-05-09

【中文标题】IE、Edge 和 Safari 中 document.querySelectorAll 的兼容性

【英文标题】：Compatibility of document.querySelectorAll in IE, Edge and Safari

【发布时间】：2016-12-06 10:49:12

【问题描述】：

参考答案：https://***.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'sanswer。

“我做了一些研究，发现它不兼容。”您的研究结果表明这是 querySelectorAll 的问题，而不是不区分大小写标志的问题？

@BoltClock 我的意思是，不区分大小写标志与 IE 和 Edge 不兼容，因为 CSS4。这就是为什么我引用了我的一个问题及其答案。现已编辑。

【参考方案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。我想这可能是问题所在。我已经编辑了答案。它有效。

哦！我不在乎。谢谢。