【筆記】js parentsNode,lastChild,appendChild,insertBefore,nextSibling的意義及運用

標籤：

 這幾天看書看到這幾個屬性做幾個筆記

parentNode：顧名思義，就是擷取某元素的父元素等同於jq的parent().

 

lastChild：擷取最後一個子項目.

 

appendChild：在某元素內最後面添加一個子項目.

 

insertBefore：在某元素外的 前面添加一個元素. 此函數有兩個參數insertBefore(newelem,targetelem)，newelem是要插入的元素，targetelem是與newelem相對的

元素，調用此方法必須用 targetelem的父元素調用 即targetelem.parentNode

 

nextSibling：擷取某元素的下一個兄弟元素.

 

關於添加元素這裡就有一個疑問了 既然有insertBefore 那麼肯定有insertAfter 吧？但畢竟這是js 並不是jq 所以一切並沒有那麼完美

所以既然沒有我們就造出來唄！

 

先上一個js 代碼

function insertAfter(newelem,targetelem){   var parent = targetelem.parentNode;//擷取目標元素的父元素   if (parent.lastChild == targetelem) {        parent.appendChild(newelem);   } else {        parent.insertBefore(newelem,targetelem.nextSibling);   }}

 

代碼是怎麼一回事呢分析一下

首先這個方法有兩個參數 newelem 和 targetelem

newelem 是你想插入的元素 而 targetelem 是你插入新元素的對照物

這個方法的意義就在於 你要把newelem插入到targetelem的後面，但是要實現還談何容易所以還要寫一下的判斷：

1.擷取targetelem 的父元素 （用到了parentNode 方法）並且儲存在變數parent 裡面

 

2.對父元素進行判斷，如果targetelem是它的父元素的最後一個子項目 那麼它的父元素直接調用 appendChild 方法 將newelem插入到最後

 

3.如果不是的話 parent調用insertBefore 將 newelem 插入到 targetelem 的下一級同輩元素的前面

 

大功告成~~

 

【筆記】js parentsNode,lastChild,appendChild,insertBefore,nextSibling的意義及運用