上回說了希望選擇學習火屬性魔法後，艾草帶我走到一棵大樹下。
艾草：「來嘗試用自己現有的魔力試試看能否選取到樹上紅色的果實。」
「呃啊啊啊．．．呼哈呼哈．．．魔力呀，聽我號令，供我使喚．．．(下略一百字」
艾草：「就算把所有中二台詞都說完了，也不會選比較快唷！別急，等選到了來教你怎麼改體內的元素。」
「我我好像感覺到了，體內一股熱氣，從胃部到喉嚨，這難道就是魔力的感覺嗎？」
艾草：「那是你的胃食道逆流啦（・⊝・） ，沒關係，我從頭教導你選取方法吧！」
DOM 的英文全名是：Document Object Model ，那它指的是什麼呢？
平常我們在寫 HTML 的時候只會看到一堆程式碼，但網頁是如何解析我們撰寫的這些程式碼呢？
其實是透過 DOM tree 節點樹狀圖的方式，如下：
DOM tree 是從 document 物件的根節點開始透過樹狀結構的方式，一路解析下來，而我們在操作網頁元素時，可以去選取每個節點，並設定想要的操作，來達成想要的網頁互動效果。
也因為瀏覽器解析 HTML 結構是由上往下解析的關係，所以當你把要載入的 JavaScript 檔案放置於 head 時，卻想操作 body 內的節點時，會無法操作！
因為當瀏覽器一解析到 JavaScript 檔案，會跑去執行 JavaScript 檔案，執行完成後就不再執行了，所以要記得擺放於 body 上方！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- JavaScript 檔案載入放置處 -->
<script src="all.js"></script>
</body>
</html>
選取節點的方式有很多種，這邊來介紹我最常使用到的 querySelector 方式！
我們可以使用 querySelector 的方式選取想要的 Element ，而它會回傳符合的第一個節點，querySelector 的選取方式是透過字串的形式，且是使用 CSS 選擇器的方式選取。
HTML：
<h1 id="title" class="title"></h1>
JavaScript：
console.log(document.querySelector('h1'))//<h1 id="title" class="title"></h1>
console.log(document.querySelector('.title'))//<h1 id="title" class="title"></h1>
console.log(document.querySelector('#title')//<h1 id="title" class="title"></h1>
既然說了是透過 CSS 選擇器的方式選取，當然以上三種方法都選的到 h1 Element ，如果想透過後代選擇器方式選取也可以：
HTML：
<ul>
<li></li>
</ul>
JavaScript：
console.log(document.querySelector('ul li'))//<li></li>
剛剛有提到 querySelector 是選取到第一個節點，那如果我們 Element 想一次選取多個可以怎麼做呢？
可以透過 querySelectorAll 的方式。
querySelectorAll 可以選取多個 Element ，並透過 nodeList 的方式回傳給我們，如下：
HTML：
<a href="#">連結一</a>
<a href="#">連結二</a>
<a href="#">連結三</a>
JavaScript：
console.log(document.querySelectorAll('a'))//["<a/>","<a/>","<a/>"]
而該 nodeList 為類陣列物件，為何說是類陣列呢？
因為如果要讀取其中的資料，是必須透過陣列方式去讀取的。
HTML：
<a href="#">連結一</a>
<a href="#">連結二</a>
<a href="#">連結三</a>
JavaScript：
console.log(document.querySelectorAll('a')[0])//<a href="#">連結一</a>
另外 nodeList 也可以使用陣列方法 forEach 唷！
當我們選取到想要的 Element 後想在裡面插入文字內容可以使用什麼方式呢？
textContent 可以讓你在想要的節點 Node 插入文字 Text，請特別注意插入文字的地方指的是：
如果我想將某個 h1 Element 內的 Text 從"標題"改成"我是新標題"，可以這樣寫：
HTML：
<h1>標題</h1>
JavaScript：
//透過 querySelector 選取 h1 Element
let el = document.querySelector("h1");
//使用 textContent 替換文字內容
el.textContent = "我是新標題";
更改後的結果，就會顯示我是新標題囉！
但要留意，使用這個方法會將原有的文字內容覆蓋掉。
既然剛剛特別提到 textContent 是插入文字 Text ，那一定也有插入元素 Element 的方法，那就是 innerHTML ！
可以透過 innerHTML 來插入 element 元素。
例如想在列表元素 ul 內插入 li ，可以這樣操作：
HTML：
<ul class="list">
<li>我是原本就存在的 li </li>
</ul>
JavaScript：
//透過 querySelector 選取 class list
let list = document.querySelector(".list");
//使用 innerHTML 插入 Element
list.innerHTML = "<li>我是新增的 li </li>";
顯示後的結果：
因為 innerHTML 會將原有的內容覆蓋掉，所以會只剩下"我是新增的 li"。
可以透過 getAttribute 來讀取網頁元素的屬性，什麼是屬性呢？
如 a 連結的 href 、 img 的 src 等，每個不同的 HTML 元素內都會有對應的屬性，而我們可以使用 getAttribute 讀取那些屬性。
屬性舉例：
讀取的方式如下：
HTML：
<a href="#"></a>
JavaScript：
console.log(document.querySelector('a').getAttribute("href"))//#
透過 getAttribute() 這個函式，並將屬性用字串的方式當成參數填進去，就能成功讀取出屬性囉。
我們可以透過 setAttribute() 這個函式來新增或更改屬性的值，它總共需要傳入兩個參數，分別為：
而需要透過字串形式的方式，兩個參數間使用, 逗號區隔。
使用方式如下：
HTML：
<a href="#"></a>
JavaScript：
//透過 querySelector 選取 a
const link = document.querySelector("a");
// 透過 setAttribute 更改 href 屬性的值為 "https://www.google.com.tw/"
link.setAttribute("href","https://www.google.com.tw/")
console.log(link)//<a href="https://www.google.com.tw/"></a>
body 內querySelector 可以選取第一個符合的 Element
querySelectorAll 可以選取多個符合的 Element ，並透過 nodeList 回傳textContent 可以插入文字 Text 內容innerHTML 可以插入 element 元素getAttribute() 可以讀取網頁元素的屬性setAttribute() 可以更改網頁元素的屬性值，可以傳入兩個參數：
請問以下敘述何者錯誤？
A 網頁解析 HTML 時會透過 DOM tree 節點樹狀圖的方式
B querySelector、querySelectorAll 都可以選取 element 元素，差別在 querySelector 僅能選取第一個符合的
C 如果想讀取元素屬性，可以透過 getAttribute() 、想修改元素屬性，可以透過 setAttribute()
D 透過 innerHTML 插入element 元素時，不會覆蓋原本的element 元素，會透過新增的方式插入element 元素
解答： D 錯誤，使用 innerHTML 或 textContent 皆會覆蓋掉原本的內容
JavaScript 必修篇 - 前端修練全攻略(六角學院)
iThome鐵人賽
看影片追技術