EP.3 RE:從零開始的學習 JS 生活-第三日之選取器

前言

轉生第三日,這一篇要來認識該如何選取 HTML 的元素,所以將會來介紹選取器。

選取器

選取 HTML 元素的方式有很多種語法,但是最常見的方式有兩種,一種是只能夠使用 ID 選擇,另一種則是可以選擇 ID 也可以選擇 ClassName,而以我個人開發習慣來講都是使用選擇 ID 的方式比較多,通常選取器的撰寫模式不外乎是這樣子 ↓

選取器

首先先來講講選取 ID 的語法,而這個語法也是我個人比較習慣的方式,那麼也就是 getElementById()

1
var boxId = document.getElementById('box');

那麼使用了這個選取器選取元素後會出現什麼呢?我們可以試著將 Code 丟到 codepen 上,然後再輸入 boxId 來看看它選取了什麼東西 ↓

box

而這裡面就是關於 box 的元素,這又稱之為 DOM 元素,你可以將選取器的概念想像成你是一位持有鑑定眼技能的人,而這個鑑定眼就是選取器的概念,那你就可以拿來查看(選取)別人的狀態、數值與技能,只是這個鑑定眼很 OP 還可以偷用別人技能就是了(被揍)。

接下來是另一種寫法,這種寫法可以選擇使用 ID 或是 ClassName 來當作選取器,寫過 jQuery 的人可能會覺得有點神似:

1
2
var boxId = document.querySelector('#box'); // 選取 ID 就帶上 # 字號
var boxId = document.querySelector('.box'); // 選取 Class 就用 . 字號

那麼上面這個結果是與單純選取 ID 是一樣的,所以我就不多做示範,那麼你可能會問 「那使用 querySelector(); 還是 getElementById(); 哪一個好?」

如果你希望可以比較完整支援所有瀏覽器的話,我個人會建議使用 getElementById();,雖然 querySelector(); 目前支援性也非常高,只有部分很舊的瀏覽器不支援,所以主要還是看個人習慣哪一種選取方式擇一即可,但是如果專案的使用者偏向使用較舊的瀏覽器,那麼我就會建議使用 getElementById();

querySelector();

getElementById();

如果是以我個人開發習慣來講,我會比較習慣使用 getElementById();,畢竟整個 HTML ID 是唯一一個。

當然 JavaScript 還有提供其他選取 DOM 元素的方式,例如 JavaScript 還有提供針對選取 tagName 的方式:

1
var boxId = document.getElementsByTagName('div');

結果當然會是一樣的,但是你可以看到結構會稍微不太一樣,會有點類似陣列的東西 ↓

getElementsByTagName

當然 getElementsByTagName 的支援性也是非常高的,所以也可以使用 getElementsByTagName 來選取 DOM,但是一般來講 getElementsByTagName 比較常見用於選取多個 tagName ↓

ID 請忽略我忘記改了

但是一般來講會比較常使用 querySelector() 以及 getElementById()

最後補充一件事情,querySelector(); 也有與 getElementsByTagName(); 類似的語法,也就是 querySelectorAll();,那這個寫法跟 querySelector(); 是一樣的,只是多了一個 All 而已。

codepen:https://codepen.io/hsiangfeng/pen/zYORxNv

See the Pen 選取器 by HF (@hsiangfeng) on CodePen.

結尾

下一篇的 RE:從零開始的學習 JS 生活-第四日 將會介紹事件。