Javascript ParentNode和ChildNode接口原理解析
ParentNode 接口，ChildNode 接口
節(jié)點(diǎn)對(duì)象除了繼承 Node 接口以外，還擁有其他接口。ParentNode接口表示當(dāng)前節(jié)點(diǎn)是一個(gè)父節(jié)點(diǎn)，提供一些處理子節(jié)點(diǎn)的方法。ChildNode接口表示當(dāng)前節(jié)點(diǎn)是一個(gè)子節(jié)點(diǎn)，提供一些相關(guān)方法。
ParentNode 接口
如果當(dāng)前節(jié)點(diǎn)是父節(jié)點(diǎn)，就會(huì)混入了（mixin）ParentNode接口。由于只有元素節(jié)點(diǎn)（element）、文檔節(jié)點(diǎn)（document）和文檔片段節(jié)點(diǎn)（documentFragment）擁有子節(jié)點(diǎn)，因此只有這三類節(jié)點(diǎn)會(huì)擁有ParentNode接口。
ParentNode.childrenchildren屬性返回一個(gè)HTMLCollection實(shí)例，成員是當(dāng)前節(jié)點(diǎn)的所有元素子節(jié)點(diǎn)。該屬性只讀。
下面是遍歷某個(gè)節(jié)點(diǎn)的所有元素子節(jié)點(diǎn)的示例。
for (var i = 0; i < el.children.length; i++) { // ...}
注意，children屬性只包括元素子節(jié)點(diǎn)，不包括其他類型的子節(jié)點(diǎn)（比如文本子節(jié)點(diǎn)）。如果沒有元素類型的子節(jié)點(diǎn)，返回值HTMLCollection實(shí)例的length屬性為0。
另外，HTMLCollection是動(dòng)態(tài)集合，會(huì)實(shí)時(shí)反映 DOM 的任何變化。
ParentNode.firstElementChild
firstElementChild屬性返回當(dāng)前節(jié)點(diǎn)的第一個(gè)元素子節(jié)點(diǎn)。如果沒有任何元素子節(jié)點(diǎn)，則返回null。
document.firstElementChild.nodeName// 'HTML'
上面代碼中，document節(jié)點(diǎn)的第一個(gè)元素子節(jié)點(diǎn)是<HTML>。
ParentNode.lastElementChildlastElementChild屬性返回當(dāng)前節(jié)點(diǎn)的最后一個(gè)元素子節(jié)點(diǎn)，如果不存在任何元素子節(jié)點(diǎn)，則返回null。
document.lastElementChild.nodeName// 'HTML'
上面代碼中，document節(jié)點(diǎn)的最后一個(gè)元素子節(jié)點(diǎn)是<HTML>（因?yàn)閐ocument只包含這一個(gè)元素子節(jié)點(diǎn)）。
ParentNode.childElementCountchildElementCount屬性返回一個(gè)整數(shù)，表示當(dāng)前節(jié)點(diǎn)的所有元素子節(jié)點(diǎn)的數(shù)目。如果不包含任何元素子節(jié)點(diǎn)，則返回0。
document.body.childElementCount // 13
ParentNode.append()，ParentNode.prepend()
append方法為當(dāng)前節(jié)點(diǎn)追加一個(gè)或多個(gè)子節(jié)點(diǎn)，位置是最后一個(gè)元素子節(jié)點(diǎn)的后面。
該方法不僅可以添加元素子節(jié)點(diǎn)，還可以添加文本子節(jié)點(diǎn)。
var parent = document.body;// 添加元素子節(jié)點(diǎn)var p = document.createElement(’p’);parent.append(p);// 添加文本子節(jié)點(diǎn)parent.append(’Hello’);// 添加多個(gè)元素子節(jié)點(diǎn)var p1 = document.createElement(’p’);var p2 = document.createElement(’p’);parent.append(p1, p2);// 添加元素子節(jié)點(diǎn)和文本子節(jié)點(diǎn)var p = document.createElement(’p’);parent.append(’Hello’, p);
注意，該方法沒有返回值。
prepend方法為當(dāng)前節(jié)點(diǎn)追加一個(gè)或多個(gè)子節(jié)點(diǎn)，位置是第一個(gè)元素子節(jié)點(diǎn)的前面。它的用法與append方法完全一致，也是沒有返回值。
ChildNode 接口
如果一個(gè)節(jié)點(diǎn)有父節(jié)點(diǎn)，那么該節(jié)點(diǎn)就擁有了ChildNode接口。
ChildNode.remove()remove方法用于從父節(jié)點(diǎn)移除當(dāng)前節(jié)點(diǎn)。
el.remove()
上面代碼在 DOM 里面移除了el節(jié)點(diǎn)。
ChildNode.before()，ChildNode.after()before方法用于在當(dāng)前節(jié)點(diǎn)的前面，插入一個(gè)或多個(gè)同級(jí)節(jié)點(diǎn)。兩者擁有相同的父節(jié)點(diǎn)。
注意，該方法不僅可以插入元素節(jié)點(diǎn)，還可以插入文本節(jié)點(diǎn)。
var p = document.createElement(’p’);var p1 = document.createElement(’p’);// 插入元素節(jié)點(diǎn)el.before(p);// 插入文本節(jié)點(diǎn)el.before(’Hello’);// 插入多個(gè)元素節(jié)點(diǎn)el.before(p, p1);// 插入元素節(jié)點(diǎn)和文本節(jié)點(diǎn)el.before(p, ’Hello’);
after方法用于在當(dāng)前節(jié)點(diǎn)的后面，插入一個(gè)或多個(gè)同級(jí)節(jié)點(diǎn)，兩者擁有相同的父節(jié)點(diǎn)。用法與before方法完全相同。
ChildNode.replaceWith()replaceWith方法使用參數(shù)節(jié)點(diǎn)，替換當(dāng)前節(jié)點(diǎn)。參數(shù)可以是元素節(jié)點(diǎn)，也可以是文本節(jié)點(diǎn)。
var span = document.createElement(’span’);el.replaceWith(span);
上面代碼中，el節(jié)點(diǎn)將被span節(jié)點(diǎn)替換。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. moment轉(zhuǎn)化時(shí)間戳出現(xiàn)Invalid Date的問題及解決2. python爬蟲實(shí)戰(zhàn)之制作屬于自己的一個(gè)IP代理模塊3. 使用JSP技術(shù)實(shí)現(xiàn)一個(gè)簡單的在線測試系統(tǒng)的實(shí)例詳解4. asp批量添加修改刪除操作示例代碼5. 開發(fā)效率翻倍的Web API使用技巧6. HTML 絕對(duì)路徑與相對(duì)路徑概念詳細(xì)7. 解決ajax請(qǐng)求后臺(tái),有時(shí)收不到返回值的問題8. ajax請(qǐng)求后臺(tái)得到j(luò)son數(shù)據(jù)后動(dòng)態(tài)生成樹形下拉框的方法9. .NET6打包部署到Windows Service的全過程10. WML的簡單例子及編輯、測試方法第1/2頁
網(wǎng)公網(wǎng)安備