# [JavaScript] DOM - 常用屬性、方法、事件 ###### tags: `JavaScript` ## 屬性 | 屬性 | 介面 | 說明 | | --- | --- | --- | | attributes | Element | 指定節點所有屬性的資訊，是一個 NamedNodeMap 集合 | | childNodes | Node | 是一個 NodeList，為一個有順序性、由目前元素之 DOM 子節點組成之集合 | | classList | Element | 指定節點的 class，不能直接變更值，但可以透過 add() / remove() 來新增 / 刪除 class | | className | Element | | | clientHeight | Element | | | clientWidth | Element | | | dataset | HTMLElement | | | firstChild | Node | 第一個子節點，包括"空白"節點 | | id | Element | | | innerHTML | Element | 節點內所有 HTML 標籤和文字 | | innerText | HTMLElement | 節點內渲染至畫面上的文字，不包含被隱藏的內容 | | lastChild | Node | 最後一個子節點，包括"空白"節點 | | nextSibling | Node | 下一個兄弟節點 | | nodeName | Node | 大寫 tag 標籤名稱 | | nodeType | Node | 節點類型，以數字表示。<br>1：元素的 Element 節點<br>3：實際文字字元的 Text 節點，包括換行與空格<br>8：註解的 Comment 節點<br>9：文件的 Document 節點<br>10：文件類型的 DocumentType 節點，例如 HTML5 的 <!DOCTYPE html> | | nodeValue | Node | | | offsetHeight | HTMLElement | | | offsetLeft | HTMLElement | | | offsetTop | HTMLElement | | | offsetWidth | HTMLElement | | | parentNode | Node | 父節點 | | previousSibling | Node | 前一個兄弟節點 | | scrollHeight | Element | | | scrollTop | Element | | | style | HTMLElement | | | tagName | Element | | | textContent | Node | 節點內所有文字，包括 `<script>` 、 `<style>`、被隱藏的內容 | ## 方法 | 方法 | 介面 | 說明 | | --- | --- | --- | | cloneNode(deep) | Node | 複製節點。<br>deep：false 只複製指定的節點，true 複製指定的節點及其所有子節點 | | dispatchEvent() | Element | | | getAttribute() | Element | | | getAttributeNames() | Element | | | getElementsByClassName() | Element | 回傳 HTMLCollection 物件 | | getElementsByTagName() | Element | 回傳 HTMLCollection 物件 | | hasAttribute() | Element | 是否有該屬性 | | hasChildNodes() | Node | 是否有子節點，回傳 Boolean | | querySelector() | Element | | | querySelectorAll() | Element | 回傳 NodeList 物件 | | removeAttribute() | Element | | | scroll() | Element | | | scrollTo() | Element | | | setAttribute() | Element | | ## 事件 | 方法 | 說明 | | --- | --- | | fullscreenchange | 切換或退出全螢幕時觸發 | | scroll | 瀏覽器捲軸捲動時觸發 | | DOMContentLoaded | HTML 文件解析後觸發，不會等待圖片、async script 等內容 | ![DOMContentLoaded 與 1oad 示意圖](https://d1dwq032kyr03c.cloudfront.net/upload/images/20171219/20065504och2Xekk7T.png "DOMContentLoaded 與 1oad 示意圖 | Kuro Hsu - 重新認識 JavaScript 番外篇 (6) - 網頁的生命週期") ## 事件監聽 ### addEventListener * 事件監聽，可以同時綁定多個事件 * 語法：`addEventListener(type, listener, useCapture/options)` * 參數： * type：click、change、keydown、blur、mouseover 等等，詳細清單可參閱 [HTML DOM Events](https://www.w3schools.com/jsref/dom_obj_event.asp "HTML DOM Events - W3Schools") * listener * `stopPropagation()`：停止冒泡事件 * `preventDefault()`：取消預設觸發行為 * useCapture：（選擇性） * 值 * `false`：default。事件冒泡（event bubbling），從啟動事件的元素往外（上層） * `true`：事件捕獲（event capturing），從最外往內 * options：（選擇性）IE 不支援 * capture：與 useCapture 相同 * once * 值 * `false`：default * `true`：事件只會被觸發一次，觸發後自動解除事件監聽 * passive * 值 * `false`：default * `true`：不會調用 `preventDefault()` ### removeEventListener * 解除事件監聽 * 語法：`removeEventListener(type, listener, useCapture/options)` * `listener` 必須要和 `addEventListener()` 綁定的 `listener` 相同（同一個實體） ## DOM Node 建立 ### createElement * 依指定的 tagName 建立新的 HTML 元素 * 語法：`document.createElement(tagName)` ### createTextNode * 建立文字節點 * 語法：`document.createTextNode(data)` ### createDocumentFragment * 建立文本片段 (document fragment)，然後將 element 加入文本片段中，本身沒有父節點，將文本片段加入 DOM tree 時是插入本身所有的子節點 * 語法：`document.createDocumentFragment()` * 適合用在操作大量的 DOM 時，比起直接操作效能會較好，因為 `DocumentFragment` 是存在記憶體中，變動不會影響目前的網頁文件 * 例：新增大量清單時 ```javascript const parent = document.querySelector('.list'); const fragment = document.createDocumentFragment(); let num = 1; while(num < 101) { const child = document.createElement('li'); child.textContent = num; fragment.appendChild(child); num++; } parent.appendChild(fragment); ``` ### write * 將內容寫入網頁 * [**不建議使用！**](https://developer.mozilla.org/en-US/docs/Web/API/Document/write) * 語法：`document.write(markup)` ## DOM Node 新增 ### appendChild * 新增指定的 childNode 到 Node 父容器的末端，成為最後一個子節點 * 語法：`NODE.appendChild(childNode)` ### insertBefore * 將 newNode 新增到 referenceNode 之前，若 referenceNode 為 null，則成為最後一個子節點 * 語法：`NODE.insertBefore(newNode, referenceNode)` ## DOM Node 更新 ### replaceChild * newChildNode 取代 oldChildNode * 語法：`NODE.replaceChild(newChildNode, oldChildNode)` ## DOM Node 刪除 ### removeChild * 移除 childNode 子節點 * 語法：`removeChild(childNode)` --- ## HTMLCollection 和 NodeList * 兩者在大部分情況下是即時更新 * HTMLCollection：收集 HTML element 節點 * NodeList：收集 HTML element 節點、文字節點、屬性節點等 * 透過 `querySelector`、`querySelectorAll` 取得的 NodeList 是靜態的，不會因為 DOM 更新而改變 ```javascript // 假設目前已有一個 .item 的 element const itemQuery = document.querySelectorAll('.item'); const itemGet = document.getElementsByClassName('item'); console.log(itemQuery.length); // 1 console.log(itemGet.length); // 1 // 再新增一個 .item 的 element const newItem = document.createElement('div'); newItem.classList.add('item'); document.body.appendChild(newItem); console.log(itemQuery.length); // 1，不會因更新改變 console.log(itemGet.length); // 2，會因更新改變 ``` ## 參考資料 * [Document - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document "Document - Web APIs | MDN") * [Element - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element "Element - Web APIs | MDN") * [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement "HTMLElement - Web APIs | MDN") * [Node - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Node "Node - Web APIs | MDN") --- :::info 建立日期：2021-03-10 更新日期：2024-02-11 :::