DOM
DOM是JavaScript操作網頁的接口，全稱為“文檔對象模型”（Document Object Model）。它的作用是將網頁轉為一個JavaScript對象，從而可以用腳本進行各種操作（比如增刪內容）。
節點
DOM的最小組成單位叫做節點（node）。文檔的樹形結構（DOM樹），就是由各種不同類型的節點組成。每個節點可以看作是文檔樹的一片葉子。
增
| 方法 | 說明 |
|---|---|
| document.createElement(x) | 創建元素 |
| document.createAttribute(x) | 創建屬性節點 |
| document.createTextNode(x) | 創建文本節點 |
| parent.appendChild(x) | 向節點添加最后一個子節點。 |
| parent.insertBefore(new,old) | 在指定的已有子節點之前插入新的子節點。 |
| ele.classList.add(x) | 為元素添加 class |
刪
| 方法 | 說明 |
|---|---|
| ele.remove() | 刪除某個元素 |
| ele.removeChild(x) | 刪除某個元素的子節點 |
| ele.removeAttribute(attr) | 刪除某個元素的屬性 |
| ele.style.removeProperty(attr) | 刪除某個元素的屬性 |
| ele.classList.remove(x) | 為元素刪除class |
改
| 方法 | 說明 |
|---|---|
| ele.innerHTML | 設置或獲取某個元素內的內容 包括html標簽 |
| ele.outerHTML | 設置或獲取某個元素內的內容 還包含標簽本身 |
| ele.innerText | 設置或獲取某個元素內的文本 Firefox不支持 |
| ele.textContent | 設置或獲取某個元素內的文本 |
| ele.setAttribute(name,value) | 設置或修改某個元素的屬性 |
| ele.style.property | 設置或修改某個元素的樣式 |
| ele.nodeValue | 設置或獲取屬性節點和文本節點的值 |
| parent.replaceChild(new, old) | 替換某個元素的子節點 |
查
| 方法 | 說明 |
|---|---|
| document.getElementById(x) | 獲取指定 ID 的元素 |
| document.getElementsByTagName(x) | 獲取指定標簽名的對象的集合 |
| document.getElementsByClassName(x) | 獲取所有指定類名的元素集合 |
| document.querySelector(x) | 獲取匹配指定選擇器的第一個元素 |
| document.querySelectorAll(x) | 獲取匹配指定選擇器的元素集合 |
| ele.getAttribute(x) | 獲取某個元素屬性的值 |
| node.parentNode() | 獲取指定節點的父節點 |
| node.childNodes() | 獲取指定節點的子節點集合 |
| node.firstNode() | 獲取某個節點的首個子節點 |
| node.lastNode() | 獲取某個節點的最后一個子節點 |
