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 vs 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 的人可能會覺得很奇怪，那麼這個小技巧就不是那麼實用了，所以算是額外補充一個在自己小專案內可以使用的小技巧哩~