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的狀況下，使用哪一種要根據具體需求來定，找到最優的解決方案便可。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。