querySelector与getElementById两者差异与特别之处

querySelector与getElementById是实战开发上最常使用的语法，但是两者使用上有什么差异呢？所以这一篇就顺便来记录跟学习一下querySelector与getElementById两者差异与特别之处。

document.getElementById

document.getElementById主要是用来选取HTML 的DOM 元素，而语法其实也算是满白话文的，也就是「透过ID 选取DOM 元素」，因此会需要传入一个HTML ID 的属性值

<div id="test">IsRayNotArray</div>

const test = document.getElementById('test');
console.log(test); // <div id="test">IsRayNotArray</div>

以上是document.getElementById基本的使用方式，接下来我们要来聊一下它有一些特别的地方。

• 大小写敏感

• 只能在 document 上使用

当选取的元素不存在时，会回传null

假使你今天选取了一个不存在于HTML 画面上的元素，那么在预设状况下，document.getElementById会回传null，而不是undefined

<div id="test">IsRayNotArray</div>

const example = document.getElementById('example');
console.log(example); // null

只会选取第一个符合的元素

虽然我们知道HTML 上的ID 是唯一的，但是却有一个有趣的事情会发生，也就是当如果你的HTML 画面上有多个相同ID 时，HTML 并不会出现任何错误与警告，但是document.getElementById只会选取第一个符合的元素。

<div id="test">IsRayNotArray 1</div>
<div id="test">IsRayNotArray 2</div>

const test = document.getElementById('test');
console.log(test); // <div id="test">IsRayNotArray 1</div>

大小写敏感

document.getElementById是大小写敏感的，也就是说如果你的HTML 画面上的ID 是test，那么你在使用document.getElementById时，也必须要使用test，而不是Test。

<div id="test">IsRayNotArray</div>

const test1 = document.getElementById('Test');
console.log(test1); // null

const test2 = document.getElementById('test');
console.log(test2); // <div id="test">IsRayNotArray</div>

只能在 document 上使用

这个稍微有一点特别了，有时候我们会选取一个元素后，然后再从这个元素中选取其他元素，但是document.getElementById只能在document上使用，也就是说你不能这样写：

<div id="test">
  <div id="example">Example</div>
</div>

const test = document.getElementById('test');
const example = test.getElementById('example');
console.log(example); // Uncaught TypeError: test.getElementById is not a function

document.querySelector

虽然document.querySelector与document.getElementById都可以做到选取HTML 的DOM 元素，但是在使用上满明显的差异，document.getElementById只能针对ID 来选取元素，而document.querySelector则可以针对CSS Selector 来选取元素，所以选取的方式就非常多种

<div id="test">IsRayNotArray</div>
<button class="btn">Button</button>
<div class="content">
  <p>Content</p>
</div>

<input type="text" name="name" value="Ray" />

const test = document.querySelector('#test');
console.log(test); // <div id="test">IsRayNotArray</div>

const btn = document.querySelector('.btn');
console.log(btn); // <button class="btn">Button</button>\

const content = document.querySelector('.content p');
console.log(content); // <p>Content</p>

const name = document.querySelector('input[name="name"]');
console.log(name); // <input type="text" name="name" value="Ray">

我们可以看到document.querySelector的选取方式非常的多元化，选取的方式有ID、Class、Tag、属性、属性值等等，这些都可以使用document.querySelector来选取，可以说是非常的方便。

如果你有写过jQuery 的话，那么就会发现document.querySelector与jQuery 的$()选取方式是非常相似的，所以如果你有使用过jQuery 的话，那么document.querySelector就会非常的熟悉。

以上是document.querySelector基本的使用方式，接下来一样要来聊聊document.querySelector的注意事项。

只会选取第一个符合的元素

document.querySelector会选取第一个符合的元素，也就是说如果你的HTML 画面上有多个符合的元素，那么document.querySelector只会选取第一个符合的元素。

<div class="test">IsRayNotArray 1</div>
<div class="test">IsRayNotArray 2</div>

const test = document.querySelector('.test');
console.log(test); // <div class="test">IsRayNotArray 1</div>

这个特性其实与document.getElementById是一样的，所以如果你要选取多个符合的元素，那么你就必须要使用document.querySelectorAll，但是要注意document.querySelectorAll会回传一个NodeList，所以你必须要使用forEach或是for回圈来选取。

<div class="test">IsRayNotArray 1</div>
<div class="test">IsRayNotArray 2</div>

const test = document.querySelectorAll('.test');
test.forEach((item) => {
  console.log(item);
});

找不到會回傳 null

querySelector 與 querySelectorAll 都有一個共同的特性，就是如果找不到符合的元素，那麼就會回傳 null

<div class="test">IsRayNotArray 1</div>
<div class="test">IsRayNotArray 2</div>

const test = document.querySelector('.test1');
console.log(test); // null

可以在元素上使用

刚刚前面有提到document.getElementById只能在document上使用，但是document.querySelector可以在元素上使用，也就是说你可以这样写：

<div id="test">
  <div class="example">Example</div>
</div>

const test = document.getElementById('test');
const example = test.querySelector('.example');
console.log(example); // <div class="example">Example</div>

大小写有区别

当然document.querySelector一样也有大小写的区别，所以如果你的HTML 画面上有这样的元素：

<div class="test">IsRayNotArray</div>

const test = document.querySelector('.Test');
console.log(test); // null

那么必定是取得不到的。

querySelector与getElementById

在前面的许多介绍中，我们可以发现document.querySelector与document.getElementById都可以拿来选取元素，但是我们可以发现document.querySelector在选取上是比较方便且弹性的，但如果以效能来讲，那么document.getElementById的效能会比较好。

为什么呢？其主要原因是document.querySelector大多在选取时，大多都是采用CSS 的选取方式，因此document.querySelector会需要先解析CSS 的选取方式，然后再去选取元素，而则document.getElementById是直接依照ID 选取元素，所以在效能上就会比较好。

但我认为这不会是抛弃document.querySelector的理由，因为现今电脑的效能其实都非常的强大且有过剩（？）的问题，唯一有可能必须要使用的情况大概就是要选取document.getElementById的元素非常明确且浏览器版本较旧，否则一般来说，都会建议改用document.querySelector，毕竟真的比较方便。

document.querySelector小技巧

最后也补一个使用document.querySelector的小技巧，但这个小技巧如果要使用在团队专案上，最好大家都要有共识会比较好，否则可能会造成开发的混乱。

首先如果假设你有使用过jQuery 的话，你会知道jQuery 在选取元素是这样选取的：

$('.test');

非常的简洁且漂亮，但是如果你要使用document.querySelector的话，就必须要这样写：

document.querySelector('.test');

那么相对之下就非常的冗长了，所以我们可以透过宣告一个函式来建立一个$的方法，这样就可以让我们在选取元素时，可以像jQuery 一样简洁：

const $ = (selector) => document.querySelector(selector);

这样就可以让我们在选取元素时，可以像jQuery 一样简洁：

$('.test');

当然你也可以挂在window上，这样就可以在全域都可以使用了：

window.$ = (selector) => document.querySelector(selector);

以上就是一些小技巧的部分，可是再次强调，这个小技巧如果要用在团队专案下，还是建议要有共识比较好，否则会使用jQuery 的人可能会觉得很奇怪，那么这个小技巧就不是那么实用了，所以算是额外补充一个在自己小专案内可以使用的小技巧哩~