QuerySelector/QuerySelectorAll和getElementById/getElementsByClassName的区别

时间 2019-12-04

标签 queryselector queryselectorall getelementbyid getelementsbyclassname 区别繁體版

原文原文链接

在React、Vue框架流行的今天，操做DOM这种方式已经用的比较少了，不过工做中有时候仍是会用到的。今天就来讲一下QS/QSA和GEBI/GEBC（这里为了方便偷个懒使用了缩写）的区别。javascript

1. 兼容性：

上图是我从大名鼎鼎的Can I Use上截的图，能够看到各个浏览器对于这几种的支持状况。html

结论：

若是你不考虑兼容特定版本的浏览器，这一点你能够忽略。java

2. 效率：

首先咱们来比较 GEBI和QS 的差异，建立测试文件以下：浏览器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="test"></div>
    <script> console.time('querySelector'); for (var i = 0; i < 100000; i++) { document.querySelector("#test"); } console.timeEnd('querySelector'); console.time('getElementById'); for (var i = 0; i < 100000; i++) { document.getElementById("test"); } console.timeEnd('getElementById'); </script>
</body>
</html>
复制代码

咱们再建立一个测试文件来比较GEBC和QSA，以下：app

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
    <script> console.time('querySelectorAll'); for (var i = 0; i < 10000; i++) { document.querySelectorAll(".test"); } console.timeEnd('querySelectorAll'); console.time('getElementsByClassName'); for (var i = 0; i < 10000; i++) { document.getElementsByClassName("test"); } console.timeEnd('getElementsByClassName'); </script>
</body>
</html>
复制代码

结论：

总的来讲QS和QSA要比GEBI和GEBC要慢。框架

有人要问了，这QS和QSA不是后来提出来的吗？为何效率这么低还要用？不要着急，接下来咱们就要讲到了。性能

灵活性：

QS/QSA 均支持CSS的选择器，也就是说你能够这么写：测试

querySelector('div img .test')
//找到div下面的img下面类名为test的元素
复制代码

怎么样？GEBI和GEBC作不到吧，他们只能选择固定id或者固定类名，在这一点上QS/QSA差距仍是挺大的（QS/QSA 不能使用伪类选择器）。ui

结论：

QS/QSA相较于GEBI/GEBC更加灵活和方便
QS/QSA对于CSS伪类选择器不生效，具体见mdn querySelector

动态性：

接下来咱们来讨论QSA与GEBC最大的区别动态性。不知道我在说什么？不要紧继续往下看吧。spa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script> a = document.querySelectorAll('img') b = document.getElementsByTagName('img') document.body.appendChild(new Image()) console.log(a.length) // 0 console.log(b.length) // 1 </script>
</body>
</html>
复制代码

结论：

经过QSA选择的不受后来DOM变化的影响，可是经过GEBC会受DOM的影响。

总结：

QS/QSA 给咱们提供了极大的灵活性和便利性，但性能相较GEBI/GEBC有必定差距，而且兼容性上存在必定差距。再不引入第三方库如jQuery的状况下，使用哪一种要根据具体需求来定，找到最优的解决方案便可。