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

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

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

*注意一下，在調用parentNode 方法的時候 調用的對象必須是用ID 或是精確地獲取的對象（要么getElementById 要么 ByTagName然后加上獲取對象的下標[index]），不然會出現undefined 的錯誤

 

lastChild：獲取最后一個子元素.

 

appendChild：在某元素內最后面添加一個子元素.

 

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

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

寫法：targetelem.parentNode.insertBefore(newelem,targetelem);

 

 

就像下面這樣寫

       var h1ByTagName = document.getElementsByTagName('h1');
       var h1ById = document.getElementById('h1');

       console.log(h1ByTagName[0].parentNode);
       console.log(h1ById[0].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 的下一級同輩元素的前面

 

大功告成~~