WebAPI(part8)--节点操作
學(xué)習(xí)筆記，僅供參考，有錯必究
文章目錄
- 節(jié)點(diǎn)操作
- 節(jié)點(diǎn)概述
- 節(jié)點(diǎn)層級
- 父節(jié)點(diǎn)
- 子節(jié)點(diǎn)
- 兄弟節(jié)點(diǎn)
- 創(chuàng)建節(jié)點(diǎn)
- 刪除節(jié)點(diǎn)
- 復(fù)制節(jié)點(diǎn)
- 創(chuàng)建元素三種方式
節(jié)點(diǎn)操作
節(jié)點(diǎn)概述
網(wǎng)頁中的所有內(nèi)容都是節(jié)點(diǎn)（標(biāo)簽、屬性、文本、注釋等），在DOM 中，節(jié)點(diǎn)使用 node 來表示。
HTML DOM 樹中的所有節(jié)點(diǎn)均可通過 JavaScript 進(jìn)行訪問，所有 HTML 元素（節(jié)點(diǎn)）均可被修改，也可以創(chuàng)建或刪除。
一般地，節(jié)點(diǎn)至少擁有nodeType（節(jié)點(diǎn)類型）、nodeName（節(jié)點(diǎn)名稱）和nodeValue（節(jié)點(diǎn)值）這三個基本屬性。
| 元素節(jié)點(diǎn) | 1 |
| 屬性節(jié)點(diǎn) | 2 |
| 文本節(jié)點(diǎn) | 3 |
我們在實(shí)際開發(fā)中，主要操作的是元素節(jié)點(diǎn)。
- 舉個例子
HTML：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head><body><div class="test01">我是div</div><script>var test01 = document.querySelector(".test01")console.dir(test01);</script> </body></html>控制臺的部分輸出：
nodeName: "DIV" nodeType: 1 nodeValue: null節(jié)點(diǎn)層級
父節(jié)點(diǎn)
利用 DOM 樹可以把節(jié)點(diǎn)劃分為不同的層級關(guān)系，常見的是父子兄層級關(guān)系：
node.parentNodeparentNode屬性可返回某節(jié)點(diǎn)的父節(jié)點(diǎn)，注意！是最近的一個父節(jié)點(diǎn)。；
如果指定的節(jié)點(diǎn)沒有父節(jié)點(diǎn)，則返回null.
子節(jié)點(diǎn)
獲取所有子節(jié)點(diǎn)：
parentNode.childNodesparentNode.childNodes返回包含指定節(jié)點(diǎn)的子節(jié)點(diǎn)的集合，該集合為即時更新的集合。
注意，返回值里包含了所有節(jié)點(diǎn)，包括元素節(jié)點(diǎn)、文本節(jié)點(diǎn)等。
如果我們只想獲取子元素節(jié)點(diǎn)，可以使用如下代碼：
parentNode.childrenparentNode.children是一個只讀屬性，返回該節(jié)點(diǎn)所有的子元素節(jié)點(diǎn)，它只返回子元素節(jié)點(diǎn)，其他節(jié)點(diǎn)不返回。
第一個子節(jié)點(diǎn)：
parentNode.firstChild最后一個子節(jié)點(diǎn)：
parentNode.lastChild第一個子元素節(jié)點(diǎn)(IE9以上)：
parentNode.firstElementChild最后一個子元素節(jié)點(diǎn)(IE9以上)：
parentNode.lastElementChild在實(shí)際開發(fā)中，firstChild 和 lastChild 包含其他節(jié)點(diǎn)，操作不方便，而 firstElementChild 和 lastElementChild 又有兼容性問題，那么我們?nèi)绾潍@取第一個子元素節(jié)點(diǎn)或最后一個子元素節(jié)點(diǎn)呢？解決方案如下：
<ol><li>我是li1</li><li>我是li2</li><li>我是li3</li><li>我是li4</li><li>我是li5</li> </ol> <script>//實(shí)際開發(fā)的寫法 既沒有兼容性問題又返回第一個子元素console.log(ol.children[0]);console.log(ol.children[ol.children.length - 1]); </script>兄弟節(jié)點(diǎn)
返回當(dāng)前元素的下一個兄弟節(jié)點(diǎn)：
node.nextSibling返回當(dāng)前元素的上一個兄弟節(jié)點(diǎn)：
node.previousSibling返回當(dāng)前元素的下一個元素節(jié)點(diǎn)：
node.nextElementSibling返回當(dāng)前元素的上一個元素節(jié)點(diǎn)：
node.previousElementSibling創(chuàng)建節(jié)點(diǎn)
創(chuàng)建節(jié)點(diǎn)：
document.createElement("tagName")將節(jié)點(diǎn)添加到指定父節(jié)點(diǎn)的子節(jié)點(diǎn)列表的末尾：
node.appendChild(child)將節(jié)點(diǎn)添加到指定父節(jié)點(diǎn)的指定子節(jié)點(diǎn)的前面：
node.insertBefore(child, 指定節(jié)點(diǎn))刪除節(jié)點(diǎn)
該方法從 node節(jié)點(diǎn)中刪除一個子節(jié)點(diǎn)，返回刪除的節(jié)點(diǎn)。
node.removeChild()- 舉個例子
復(fù)制節(jié)點(diǎn)
該方法返回一個節(jié)點(diǎn)的副本：
node.cloneNode()注意，括號中，若填寫的參數(shù)為false則為淺拷貝，只復(fù)制節(jié)點(diǎn)本身，不克隆里面的子節(jié)點(diǎn)；若為true則為深拷貝，則復(fù)制節(jié)點(diǎn)本身及節(jié)點(diǎn)內(nèi)的所有子節(jié)點(diǎn)。
- 舉個例子
創(chuàng)建元素三種方式
document.write() element.innerHTML document.createElement()- 舉個例子
總結(jié)
以上是生活随笔為你收集整理的WebAPI(part8)--节点操作的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 十年结婚是什么婚 十年锡婚是什么意思
- 下一篇： WebAPI(part9)--下拉菜单及