http兼容性问题 firstElementChild firstchild 以及 简单封装
首尾子节点
firstchild ie6-8
firstElementChild 兼容问题 if做兼容判断
lastChild、lastElementChild 类似
兄弟节点
有兼容性问题
nextSibling、nextElementSibling
previousSibling、previousElementsibling
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function(){
var oUil=document.getElementById('uil');
if(oUil.firstElementChild){
oUil.firstElementChild.style.background='red';
}else{
oUil.firstChild.style.background='red';
}
}
</script>
</head>
<body>
<ul id="uil">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
简单封装
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
function getByClass(oParent,sClass){
var result=[];
var oEle=oParent.getElementsByTagName('*');
for(var i=0;i<oEle.length;i++){
if(oEle[i].className==sClass){
result.push(oEle[i]);
}
}
return result;
}
window.onload=function(){
var oUl=document.getElementById('uil');
var oBox=getByClass(oUl,'box');
//var aLi=oUl.getElementsByTagName('li');
for(var i=0;i<oBox.length;i++){
//if(aLi[i].className=='box'){
oBox[i].style.background='red';
// }
}
}
</script>
</head>
<body>
<ul id="uil">
<li class="box"></li>
<li class="box"></li>
<li></li>
<li></li>
<li class="box"></li>
<li></li>
<li></li>
</ul>
</body>
</html>
