原生JS之lastChild和lastElementChild、childNodes和children区别

阅读更多

【前言】

    最近讲课讲到DOM操作和遍历，之前讲课只讲了普通获取节点方法，今天又讲了个升级版。这里备注下，以后再讲课强调下

 

【主体】

（1）原生JS遍历时操作如下

childNodes	获取所有子节点（包括包括文本节点、注释节点即回车、换行、空格、文本等等）
firstChild	获取第一个子节点（可以为注释节点）
lastChild	获取最后一个子节点（与firstChild类似）
parentNode	返回给定节点的父级节点
nextSibling	返回给定节点的下一个节点
previousSibling	返回给定节点的上一个节点

注意：上面写法是IE8之前旧版本写法，也可以在IE8以上及IE9+正常运行。但随着更新，出现新方法选取子节点，同时可以进行过滤，只获取元素节点。

 

（2）新方法--兼容IE9+

children	返回元素子节点（元素节点）
firstElementChild	返回第一个子节点（元素节点）
lastElementChild	返回最后一个子节点（元素节点）
parentElement	父节点（元素节点）
nextElementSibling	返回元素的上一个兄弟元素节点（不包括文本节点、注释节点）
previousElementSibling	返回元素的下一个兄弟元素节点（不包括文本节点、注释节点）

 注意: 空格、回车也会看作文本，以文本节点对待

 

（3）previousSibling 模拟 previousElementSibling：

 

                        

			    

			        
第一个
			        
第二个
			        
第三个
			    
			    
我是第二个子节点
			
			function myPre(ele){
			    if(ele.previousElementSibling !== undefined){
			        return ele.previousElementSibling;
			    }else{
			        var item = ele.previousSibling;
			        while(item && item.nodeType !=1){
			            item = item.previousSibling;
			        }
			        return item;
			    }
			}
			var oNe = document.getElementById("one");
			console.log(myPre(oNe));

 

 

（4）firstChild,lastChild兼容方案1

1
    
2
    
3
    
4

兼容方案：

function firstChild(obj) {
    return obj.firstElementChild ? obj.firstElementChild : obj.firstChild;
}
function lastChild(obj) {
    return obj.lastElementChild ? obj.lastElementChild : obj.lastChild;
}
var ul = document.getElementsByTagName('ul')[0];
firstChild(ul).style.background = '#ff0000';
lastChild(ul).style.background = '#00ff00';

 

（5）firstChild,lastChild兼容方案2

   firstChild与lastChild 兼容Ie6,7,8    返回指定节点的首个子节点与返回指定节点的最后一个子节点

   firstElementChild与lastElementChild 不兼容低版本的浏览器

var first=e.firstElementChild||e.firstChild;
var last=e.lastElementChild||e.lastChild;
var pre=e.previousElementSibling || e.previousSibling;
var next=e.nextElementSibling || e.nextSibling;

 

.