描述你的问题
想写JavaScript原生获取元素节点,兼容IE低版本浏览器。但是IE7中无法识别ul标签下的li标签之后的span和a标签。也就是HTML中注释的部分。
贴上相关代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>获取元素子节点-兼容低版本浏览器</title>
<script>
window.onload=function(){
var oUl=document.getElementById("ul1");
var op=document.getElementById("p1");
function getEleChild(ele){
var eleChildArr=ele.children || ele.childNodes;
var childArrTmp=[];
for(var i=0;i<eleChildArr.length;i++){
if(eleChildArr[i].nodeType==1){
childArrTmp.push(eleChildArr[i]);
}
}
return childArrTmp;
}
console.log(getEleChild(op));
console.log(getEleChild(oUl));
alert(getEleChild(op).length);
alert(getEleChild(oUl).length);
}
</script>
</head>
<body>
<p id="p1">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<p></p>
<span></span>
<a href="#">链接</a>
<a href="#">点击</a>
<input type="text" />
1111
</p>
<ul id="ul1">
<a href="#">li之前的a标签</a>
<span>li之前的span标签</span>
<li></li>
<li></li>
<span>li之前的span标签</span><!-- IE7下无法识别这个span标签,不知道为啥 -->
<li></li>
<span>li之后的span标签</span><!-- IE7下无法识别这个span标签,不知道为啥 -->
<a href="#">li之后的a标签</a><!-- IE7下无法识别这个a标签,不知道为啥 -->
2222
</ul>
</body>
</html>
贴上报错信息
执行代码后,谷歌和火狐浏览器、IE8及以上依次弹出6,8.但IE7下,却弹出6,5.没能识别到li之后的span标签和a标签。
贴上相关截图
望解答,谢谢~
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
ie7- 会把位于li元素之后的元素修复到其前面最近的li元素内,成为该li元素的子元素。
IE6 IE7 IE8(Q) 会忽略 LI DD DT 元素的结束标记
同没看出什么毛病出来,不行就看看jQuery的源码说不定有帮助
html规则ul子集只应该是li,不同的浏览器解析的结果不一样,有些可以有些不可以,就像p标签下嵌套p解析后p跑到外面是一个道理