好久不見～ 看完前兩集 JS 概念大補帖大家有沒有更清楚核心概念了呢？
來快速複習一下前 10 點吧😎
- console控制台/ console.log
- 變數
- 型別
- 陣列
- 物件/ 物件導向
- 迴圈 for & while
- 函式
- 函式宣告式/表達式
- 建立函式的方法
- 閉包
如果看過以上主題還有覺得概念模糊的地方，歡迎回頭複習上集、下集～
這集，小白要來看大家討論 DOM 的概念。但不僅如此，最重要小白想帶到的概念是 DOM 如何實用於 JS 中🤔 在開始閱讀前，請大家先問問自己，你清楚 getElementById() 的用法嗎？你曉得 querySelector() 能帶你什麼嗎？
如果可以那麼恭喜你，闖關成功🔑 請直接 unlock 下一關；如果仍有不清楚，也沒有關係，小白今天陪你一起弄明白😃
第一關，了解基礎 DOM 概念
- 何謂 DOM？ 為什麼我們要在意 DOM 呢？
DOM (Document Object Model) 簡稱為「文件物件模型」。如果這個名詞讓你頭大，你可以試試看理解這個圖。
由此圖你可以觀察到當中元素的樹（層）狀結構，尤其 (a.) 上下關係和 (b.) 左右旁枝。不瞞你說，這張圖就是一張標準的 DOM 模型，其中涵蓋了DOM 最基礎的「節點 (node)」觀念，更說明了 HTML/XML 文件紀錄資料時的邏輯結構與層次。而這將影響到的是未來操作上如何(1.) 訪問各層級的節點，進而 (2.) 新增、(3.) 刪除或 (4.) 修改它。
🧠 進一步說明
(a.) 上下關係：即有父子、直系血親關係
(b.) 左右旁枝：即有手足、旁系血親關係
節點 (node) 間量化後的層級關係（1-12）
上圖對應的 HTML 程式碼：
<html> <head> <title>小白一次把 DOM 概念說給你聽</title> </head> <body> <h1>DOM 概念全系列</h1> <ul> <li>節點 Node </li> <li>特性 Attribute</li> </ul> </body>
OK😍 了解完 DOM 架構後，我們就要來看看 JS 若要與 DOM 互動（如上所提 4 種互動）需要些什麼吧！
第二關，了解 DOM 與 JS 互動方式
壹、你需要找到你要互動的對象 (target)
如何找到對象？也就是如何找到節點中的 Element？
答案很簡單，你最少需要知道該對象的 (1) 名字、(2) id、(3) tag 或 (4) class 名稱
如果你知道四者其一，恭喜你離找到它不遠了🥳
這時根據你手上的資訊，你可以使用的工具為：
(1) document.getElementById()
(2) document.getElementsByName()
(3) document.getElementsByTagName()
(4) document.getElementsByClassName()
🔺注意後 3 的 Element 有 s！
這時你一定會想說，如果不知道名字怎麼辦？
別緊張～ 你還有兩種方法✌️
第一：假使你知道對象的 (parent.) 爸媽、(child.) 小孩 或是 (siblings) 兄弟姊妹，你可以求助：
(parent.) node.parentNode
(child.) element.firstChild/ .firstElementChild/ .lastChild/ .lastElementChild
(siblings) node.nextElementSibling/ previousElementSibling
第二：querySelector() 小能手會秉持灰姑娘無名王子試鞋子的精神，幫忙你找出那個你尋尋覓覓的對象🙌
但，若是你想要一個百年一見有耐心的工具人幫你家家戶戶的去尋，將每個符合條件（CSS selectors）的都把資料記錄下來給你，你就需要個名叫 querySelectorAll() 的超能助手來幫你做全面匹配檢查
如果你以上資料都沒有，那… 你可能就要思考為什麼你要找這個對象 也許早點放下會更好歐😀
貳、你需要準備好你準備對此對象做的事
找到對象後，你必須開始籌劃你想對該對象做的事。舉例來說，你可能想 (1) 挖掘它的過去、(2) 改變它的想法、(3) 和它創造屬於你們的回憶，或是 (4) 生個小孩（誤 >> 以上價值觀若有偏差，純粹為了貼合舉例
參、鼓起勇氣做下去！
最後一步，依據你前一步想法的籌備 (1, 2, 3, 4…) 把步驟實踐出來。這一步的成敗就需要考驗你的邏輯和完成手法～ 以下為上方四種「想對該對象做的事」的對應實踐法
(1) node.textContent/ node.innerText 解讀/獲取到內文
(2) node.innerText = text/ HTMLElementObject.innerHTML = text 改變內文的文字或是 HTML 內屬性
🔥 更甚，附加節點在已經存在的節點上
附加在前：node.insertBefore(newNode, existingNode)
附加在後：目前還不支援 node.insertAfter 唷～
(3) document.createElement() 字面意思：創造新元素
(4) node.appendChild() 附加新元素至節點上最後一個元素
🔥 node.removeChild() 刪除特定節點上的元素/ replaceChild() 替換特定節點上的元素
假如你的控制欲已經走火入魔，連對象的個性都想掌握，那你可以考慮以下👇
要控制個性一定要對於個性的本質有一定的認知
所以到底什麼是個性（類比到 HTML 中為特性 attribute），我們又要如何修改它？
先來用簡單幾行邏輯來說明 attribute 究竟是何方神聖～
已知條件一：JS 中所見即「物件 (object)」，每個物件都有其屬性 (property) 及方法 (method)。
已知條件二：HTML 中的元素擁有它們各自的特性 (attribute)
條件：當瀏覽器載入 HTML 頁面時，瀏覽器會依據 DOM 模型上的節點關係來生成對應的「物件」。
結論：HTML 元素中的特性 (attribute) 在載入時會對應轉換為 JS 物件中的屬性 (property)
舉例：
<title type="text" id="greeting">Hi JS learners!<title>
以上 title 元素之中擁有 2 個特性 (attributes) ，分別為 type 和 id，其分別有 text 和 greeting 兩個值 (value)
同個時間，瀏覽器會依據 DOM 結構自動對應產生出一個「HTMLTitleElement」物件。物件底下有 2 個屬性：title.type 和 title.id，同理，兩個屬性也都有其對應值 text 和 greeting
🙆♀️ 對 attribute（特性，或以上說的個性）有點認識後，直接看看能怎麼改變它吧！
(1) 得到 attribute 的值（了解個性）：
element.getAttribute(name)
(2) 設定 attribute 的值（替對象勾勒特性）：
element.setAttribute(name, value)
(3) 檢查特定 attribute 是否存在（確認對象某方面的個性）
element.hasAttribute(name)
(4) 去除特定的 attribute （剔除對象的特定個性）
element.removeAttribute(name)
最後，小白以實作例子總複習一下 JS 如何與 DOM 互動🔍
壹、你需要找到你要互動的對象 (target)
首先要搞清楚 WHO
小白的對象：<h1> 和 <div>
貳、你需要準備好打算對此對象做的事
再來，對該對象做的事
事件：點擊 <h1> 時會在 <div> 下加上 “DOM DOM DOM!”
參、你需要真的做下去！
第三步，將以上想法化為 JS 程式碼😍
<html>
<body>
<h1 onclick = "createIrisDiv()">DOM 太簡單，動不 DOM 我！</h1> // 在目標對象 <h1> 中利用 onclick 觸發以下寫好的 irisFunction()
<div id="irisDiv">
JS 必拜觀念
</div>
</body>
<script>
function createIrisDiv() { // 建立函式，來包裝以下一整套的功能
var DOM = document.createElement("p"); // 創造一個 p 元素丟到變數 DOM 中
var text = document.createTextNode("DOM DOM DOM!"); // 創造一段文字丟到變數 text 中
DOM.appendChild(text); // 把該段 text 附加上 P 元素
if (document.getElementById("irisDiv") !== null) {
document.getElementById("irisDiv").appendChild(DOM); // 最後，把已經附加完成的 text 再附加上 id 擁有 “irisDiv” 的 <div> 上
}
}
</script>
如果覺得小白的筆記對你有幫助＆等不及想看下一集，歡迎 follow 程式小白臉書群～
小白最近也開始有在錄 Podcast，如果對 程式/設計 相關主題有興趣也歡迎收聽唷！
References 參考資料:
- https://www.w3schools.com/js/js_htmldom_nodes.asp
- https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
- https://www.runoob.com/jsref/met-element-queryselector.html
- https://ithelp.ithome.com.tw/articles/10202689
- https://www.w3schools.com/jsref/met_document_queryselector.asp
- http://www.tastones.com/zh-tw/tutorial/javascript/javascript-dom-get-set-attributes/
