文件物件模型（Document Object Model 簡稱 DOM）--筆記一
HTML & JavaScript & DOM 之關係
文件物件模型(DOM)提供了HTML文件轉化為樹狀結構化表示，並定義讓JavaScript可以存取節點(node)並改變其結構、樣式(CSS)和內容的方法。DOM 規範中定義了這些類型的 API：
- 定義了 HTML 的元素 (element) 當作是 JavaScript 物件 (object) 來操作。
- 定義了 HTML 元素有哪些屬性 (properties) 可以來做存取。
- 定義了 HTML 元素有哪些方法 (methods) 可以來被操作。
- 定義了 HTML 元素事件 (events)，讓我們可以針對特定元素來綁定事件處理函式 (例如使用者按下滑鼠、在鍵盤打字都是所謂的事件)。
參考MDN:文件物件模型(DOM)先來一張風景放鬆心情吧 😆~~~。
JavaScript DOM 查找元素 (DOM Traversing)
document 物件是 DOM tree 的根節點來表示整份 HTML 文件，如果你要存取 HTML 都是從 document 物件開始。
如上圖， DOM 中的節點類型除了 HTML 元素節點 (element nodes) 還有文字節點 (text nodes)，另外還有註解節點 (comment nodes) 和空白節點 (white space nodes，另一種說法 text node)。
補充:
選取元素的語法大多寫成
getElementBy*或getElementsBy*(注意有單複數的差別 )。如上補充，選取元素的語法如為複數時， 會回傳 Node List，是一組類似陣列 (array like) 的集合，可以使用陣列索引，但不能使用其他陣列操作方法如
pop或push。
那就來介紹以下幾種:
- document.getElementById(id)
用來找尋 id 的 DOM Element 對象並取得這個 HTML 元素。我們可以這樣取得其中 id 為 about的 p 元素。
如下HTML 頁面:
- document.getElementsByTagName(name)
用來根據 getElementsByTagName(name)，取得所有這個標籤(tag)的元素集合 (HTML Collection)，返回的結果是一個類陣列 (array) 的物件。每個 HTML DOM 元素也有 getElementsByTagName 方法 — node.getElementsByTagName(name)，用來找該元素子層的子元素。
例如這一個 HTML 頁面：
我們可以用 DOM API中document.getElementsByTagName(name)來存取所有特定 P 標籤(name)的HTML 元素，例如下圖 JavaScript頁面。
- document.getElementsByName(name)
getElementsByName(name)用來取得所有特定屬性(name)的 HTML 元素集合 (Node List)，返回的結果是一個像陣列 (array) 的物件。每個 HTML DOM 元素也有 getElementsByTagName 方法 — node.getElementsByTagName(name)，用來找該元素子層的子元素。
如上圖，使用 DOM API中document.getElementsByName(name)用來取得特定屬性 name 為 text 的HTML 元素。
- document.getElementsByClassName(names)
getElementsByClassName(names) 用來取得所有特定類別名稱(class name)的 HTML 元素集合(HTML Collection)，返回的結果是一個類陣列(array)的物件。每個 HTML DOM 元素也有 getElementsByClassName(names) 方法 — node.getElementsByClassName(name)，用來找該元素子層的子元素。
如上圖，使用 DOM API中document.getElementsByClassName(names)來存取 test1 類別名稱(class name)的HTML元素。
- document.querySelector(selectors)
querySelector(selectors) 讓你使用 CSS 選擇器 (CSS selectors) 來取得符合CSS 選擇器條件且第一個的 HTML 元素。每個 HTML DOM 元素也有 querySelector(selectors) 方法 — node.querySelector(selectors)，用來找該元素子層的子元素。
- document.querySelectorAll(selectors)
querySelectorAll(selectors) 讓你使用 CSS 選擇器 (CSS selectors) 來尋找所有符合 CSS 選擇器 (CSS selectors)條件的 HTML 元素集合(Node List)，返回的結果是一個類陣列(array)的物件。補充:
selectors可以使用一個或多個 選擇器 (CSS selectors)，這些選擇器 (CSS selectors)可由逗號間隔開。
每個 HTML DOM 元素也有 querySelectorAll(selectors) 方法 — node.querySelectorAll(selectors)，用來找該元素子層的子元素。
