昨天我們解釋了什麼是DOM跟BOM，今天我們繼續來認識DOM Tree 和 DOM Node
DOM Tree
DOM 採用樹狀結構 (tree) 來儲存網頁元素，樹狀結構是資料結構的一種，特色是有明確的父子階層關係，也因為階層關係明確，按相對關係查找資料特別方便。
圖片來源：維基百科
樹狀裡每一個部分叫做「節點 (node)」，節點有四種類型：
- 元素節點 (element node)
- 文字節點 (text node)
- 屬性節點 (attribute node)
- 註解節點 (comment node)
DOM Node
DOM的根節點：document
還記得這張圖嗎？
在 DOM 的樹狀結構裡，根節點是 document，代表網頁的本身。
今天我們打開網頁按下F12，然後在主控台(Consoie)輸入document，會回傳#document ，我們把他展開後就會看到所有的 HTML 文件內容：
而這時候我們在 DevTool 的 元素(Elements) 面板裡看到的內容就是 DOM 的結構，他不是HTML 文件，而是 DOM 操作的結果，如果使用 JavaScript 改變 DOM 的狀態，瀏覽器顯示在 元素(Elements) 會同步更新。
剛剛那張圖我們看到因為document是整個DOM的最頂部，所以他是DOM的跟節點，那window會是BOM的根節點嗎？
BOM的跟節點：window
沒錯就如標題所示，window確實是BOM的根節點，我們一樣在主控台(Consoie)輸入window ，這次跑出來的是一個object，裡面有很多的屬性和方法：
還記得昨天有提到：
在瀏覽器裡的 window object扮演著兩種角色：
- ECMAScript 標準裡的「全域物件」 (Global Object)
- JavaScript 用來與瀏覽器溝通的窗口
因此我們就可以得知 window object 它是 global variable，只要開啟瀏覽器的瞬間，window object 就會出現。它擁有自己的 Methods 跟 Properties。
接下來稍微介紹一些Methods 跟 Properties：
Window Object Methods：
💡 標準語法：window.alert() Tips: 在window object底下成員，window可以不用寫
alert():
執行後會跳出一個帶有 button 的視窗
prompt():
執行後會跳出一個對話視窗，可讓使用者輸入內容。（輸入的內容，最後都會是 String）
setInterval()：
設定每隔幾秒的時間要執行一個 function
（1000 為 1 秒，1500 為 1.5 秒，2000 為 2 秒…依此類推）
clearInterval()：
停止setInterval()的執行
addEventListener()：
DOM Event(事件處理)時會再說明！！！
Window Object Properties :
💡 OOP 物件導向： 一個object可以是另一個 object 的 Properties
console
console.log()檢查程式碼是否正確被執行時常使用的功能
console 的 properties 並不常拿來做使用，因此這裡只介紹 console 的 methods。
1 | let map = ["台中", "台北", "新北", "桃園", "高雄"] |
console.error()定義如果錯誤時會出現什麼
1 | let map = ["台中", "台北", "新北", "桃園", "高雄"] |
console.table()將資料整理成表格來顯示
1 | let map = ["台中", "台北", "新北", "桃園", "高雄"]; |
console.warn()會出現黃色驚嘆號
1 | let map = ["台中", "台北", "新北", "桃園", "高雄"] |
Document
Document is an object. 所以他擁有自己的 methods 和 properties
getElement家族return 的是 HTMLCollection
querySelectorAll()return 的是 NodeList
Array 和 NodeList 可以使用 forEach，但是 HTMLCollection 無法使用 forEach
所以大多數人使用 querySelector 系列而不使用 get 系列，因為資料無法用 forEach 操作
property:
有 body、doctype、charset、head…等。
methods:
getElementsByld()
- 用 id 取得 Element，存在一個 HTMLCollection 裡面
getElementsByClassName()
- 用 class 取得 Element，存在一個 HTMLCollection 裡面
addEventListener()
- DOM Event(事件處理)時會在再說明！！！
createElement()
- 依指定的標籤名稱（
tagName）建立 HTML 元素
1 | let element = document.createElement(tagName); |
querySelector()
- 只會return 滿足第一個css selector 的 HTML element
querySelectorAll()
- 所有滿足條件的都會 return 回來，存在一個 NodeList 裡面
這邊先簡單介紹，下一篇會在更詳細說明。
結果補充資料比主題還多ＸＤＤ但拿出來變得主題好少，只好先這樣了。
參考資料：
udemy-2022網頁開發全攻略