在前端开发中，querySelectorAll 是一个非常常用的方法，它能够通过 CSS 选择器获取 DOM 元素列表。然而，在 IE8 浏览器中却不支持这个方法，这对于需要兼容 IE8 的网站开发者来说是一个巨大的挑战。
解决方案
一种解决方案是使用 getElementsByTagName 方法获取元素列表，然后通过遍历筛选符合条件的元素。这种方式虽然可行，但是效率比较低，尤其是当页面中有很多元素时。另外，也可以考虑使用第三方库，如 jQuery 或 Zepto 等，它们提供了类似的选择器方法并且兼容 IE8。
下面是通过 getElementsByTagName 方法实现的一个类似于 querySelectorAll 的函数：
-- -------------------- ---- -------
-------- -------------------------- -------- -
------- - ------- -- ---------
--- -------- - ----------------------------------
--- ------ - ---
--- ---- - - -- - - ---------------- ---- -
-- ----------------------------- ---------- -
-------------------------
-
-
------ -------
-
-------- ------------------------ --------- -
--- ------- - --------------- --
----------------------------- --
-------------------------- --
------------------------- --
-------------------------
------ --------------------- ----------
-该函数接受两个参数：selector 表示要查找的 CSS 选择器，context 表示要在哪个元素中查找。如果不传入 context 参数，则默认在整个文档中查找。
该函数首先通过 getElementsByTagName 方法获取到所有的元素列表，然后遍历每个元素，通过 matchesSelector 函数判断它是否符合选择器条件，并将符合条件的元素放入一个数组中返回。
学习意义
虽然 IE8 的市场份额已经非常小了，但是对于一些老旧的网站还需要考虑兼容性问题。解决 IE8 不支持 querySelectorAll 的问题，不仅可以提高开发者的技能水平，也可以加深对 DOM 和 CSS 选择器的理解。
此外，遇到类似的兼容性问题时，我们需要掌握相关的知识点并且善于寻找解决方案。这样能够提高我们的解决问题的能力，也能够为我们未来的工作打下基础。
示例代码
以下是使用上述 querySelectorAll 函数获取所有 class 为 example 的元素的示例代码：
var elements = querySelectorAll('.example');
for (var i = 0; i < elements.length; i++) {
console.log(elements[i]);
}来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29000