終於來到第10週, 算是達到一個里程碑了~!!

這週要來寫DOM元素及驅動它的Selector選擇器~
這邊提到兩個名詞 - DOM元素 及 選擇器(Selector)

什麼是DOM?

文件物件模型（英語：Document Object Model，縮寫DOM），是W3C組織推薦的處理可延伸標示語言的標準程式介面。
-- 維基百科-文件物件模型

維基百科講的好文言文, 考試可能會考吧? 還好我已經畢業很久了xD
我自己是將DOM直接理解為html標籤元素, 而對DOM做操作就是對html標籤元素做操作的意思, 這樣可能比較好懂

什麼是選擇器(Selector)?

要對DOM元素做操作之前, 我們必須透過選擇器, 去選擇要對哪個元素操作
選擇器的話, 在JavaScript的世界中有多種方法, 如下:

• getElementById: 根據傳入的Id來對應到指定的元素
• getElementsByClassName: 根據傳入的ClassName來對應到指定的元素
• getElementsByName: 根據傳入的Name來對應到指定的元素
• getElementsByTagName: 根據傳入的TagName來對應到指定的元素
• querySelector: 根據傳入的 值 來對應到指定的元素
• querySelectorAll: 根據傳入的 值 來對應到指定的元素

這些方法都是要用document做起頭再去呼叫使用, 例如:

var myElemantA = document.getElementById('myId');
var myElemantB = document.getElementsByClassName('myClass');
var myElemantC = document.querySelector('#myId');

而根據方法的不同, 傳入的值的內容也不同
例如 getElementById 就必須傳入元素的Id才能對應
getElementsByClassName 就必須傳入元素的ClassName才能對應
神奇的是, querySelector 與 querySelectorAll 傳入的值並不是像 getElementBy... 系列, 都是屬於固定內容, 這兩種屬於CSS選擇器, 也就是說, 可以傳入Id、ClassName甚至是[attr=value]、:checked
(詳細CSS選擇器及規範可參考 w3school)
所以用法也就更多元, 可以更深入取得需要的元素

querySelector & getElementBy... 的差別

既然 querySelector 這麼好用為什麼還需要 **getElementBy...**系列呢?
這部分我也有稍微做了一下功課, 因為我相信不會只有我有這個疑問xD
雖然這兩種都能取到一樣的結果
但 querySelector 是屬於 靜態結果, 而 getElementBy... 是屬於 動態結果

動態? 靜態? 洗勒小公鯊大母鯊?
當初我看到這邊真的是一堆黑人問號, 後來直接用程式碼演練一次才知道到底是什麼意思...
不多說直上程式碼

假設今天有個ul長這樣

<ul id="myul">
    <li>li 1</li>
    <li>li 2</li>
    <li>li 3</li>
</ul>

使用兩種選擇器去取得li清單

// 使用getElementBy系列取得li清單
var ulbyid = document.getElementById('myul');
var libytag = ulbyid.getElementsByTagName('li');

// 使用querySelector取得li清單
var ulqs = document.querySelector('ul');
var ulqsa = ulqs.querySelectorAll('li');

// 輸出取得的清單長度都是3
console.log(libytag.length); // 3
console.log(ulqsa.length); // 3

// 在ulbyid加入新的li元素
ulbyid.appendChild(document.createElement('li'));

// 再次輸出清單長度
console.log(libytag.length); // 4
console.log(ulqsa.length); // 3

// 在ulqsa加入新的li元素
// 這裡打錯了~ulbyid要換成ulqsa  感謝幫友imjoe協助修正^_^
// ulbyid.appendChild(document.createElement('li'));
ulqsa.appendChild(document.createElement('li'));

// 再次輸出清單長度
console.log(libytag.length); // 5
console.log(ulqsa.length); // 3

用上面的程式碼測試會發現, 在ul元素內加入新的li元素後, getElementBy...系列都能抓到當前所有項目(有點像自動更新的功能), 而querySelector在取得後不管加了多少新元素, 都只有取得當下的清單內容而已

兩種方式根據用途也有操作上的變化

DOM與選擇器基本說明到這
下週來寫怎麼利用選擇器操作DOM
累~