【笔记】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 的下一级同辈元素的前面

 

大功告成~~