java children,原生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

var ul = document.getElementsByTagName('ul')[0];

ul.firstChild.style.background = '#ff0000';

// IE8/7/5兼容， IE9+及其它browser不兼容,获取的是空白文本节点

ul.firstElementChild.style.background = '#ff0000';

// IE8/7/5不兼容，IE9+及其它browser兼容

兼容方案：

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;

.