【前言】
最近讲课讲到DOM操作和遍历,之前讲课只讲了普通获取节点方法,今天又讲了个升级版。这里备注下,以后再讲课强调下
【主体】
(1)原生JS遍历时操作如下
childNodes | 获取所有子节点(包括包括文本节点、注释节点即回车、换行、空格、文本等等) |
firstChild | 获取第一个子节点(可以为注释节点) |
lastChild | 获取最后一个子节点(与firstChild类似) |
parentNode | 返回给定节点的父级节点 |
nextSibling | 返回给定节点的下一个节点 |
previousSibling | 返回给定节点的上一个节点 |
注意:上面写法是IE8之前旧版本写法,也可以在IE8以上及IE9+正常运行。但随着更新,出现新方法选取子节点,同时可以进行过滤,只获取元素节点。
(2)新方法--兼容IE9+
children | 返回元素子节点(元素节点) |
firstElementChild | 返回第一个子节点(元素节点) |
lastElementChild | 返回最后一个子节点(元素节点) |
parentElement | 父节点(元素节点) |
nextElementSibling | 返回元素的上一个兄弟元素节点(不包括文本节点、注释节点) |
previousElementSibling | 返回元素的下一个兄弟元素节点(不包括文本节点、注释节点) |
注意: 空格、回车也会看作文本,以文本节点对待
(3)previousSibling 模拟 previousElementSibling:
<div id="box">
<ul id="ul">
<li>第一个</li>
<li id="one">第二个</li>
<li>第三个</li>
</ul>
<p>我是第二个子节点</p>
</div>
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
<ul><li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
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兼容
</script>
兼容方案:
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;
.