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