费话少说,直接看例子:
1 <ul>
2 <li>this's one</li>
3 <li>this's two</li>
4 <li>this's three</li>
5 <li>this's four</li>
6 <ul>
2 <li>this's one</li>
3 <li>this's two</li>
4 <li>this's three</li>
5 <li>this's four</li>
6 <ul>
想用JS得到ul下的四个子元素,开始我代码这么写:
1 var objs = document.getElementsByTagName("ul")[0].all;
2 for(var i=0;i<objs.length;i++){
3 alert(objs[i].innerHTML);
4 }
2 for(var i=0;i<objs.length;i++){
3 alert(objs[i].innerHTML);
4 }
测试结果:在IE和Opera中运行正常,但在firefox和google的浏览器Chrome中都没有反应。通过跟踪得知,在firefox和Chrome中没有all这个属性。
1 var objs = document.getElementsByTagName("ul")[0].children;
2 for(var i=0;i<objs.length;i++){
3 alert(objs[i].innerHTML);
4 }
2 for(var i=0;i<objs.length;i++){
3 alert(objs[i].innerHTML);
4 }
测试发现在IE、Opera和Chrome都正常运行,但在firefox中依然不能运行。跟踪得知,firefox中依然没有children这个属性。
1 var objs = document.getElementsByTagName("ul")[0].childNodes;
2 for(var i=0;i<objs.length;i++){
3 alert(objs[i].innerHTML);
4 }
2 for(var i=0;i<objs.length;i++){
3 alert(objs[i].innerHTML);
4 }
测试发现在IE、Opera中都正常运行,但在firefox和Chrome中会得到长度为9的数组,比IE和Opera中多了5个"\n"。查资料如下:
all 返回对象所包含的元素集合的引用。
childNodes 获取作为指定对象直接后代的 HTML 元素和 TextNode 对象的集合。
children 获取作为对象直接后代的 DHTML 对象的集合。
这从验证了测试结果为什么firefox和Chrome中多了5个“\n”。
所以如果把HTML改成如下,则四个浏览器正常运行。
1 <ul><li>this's one</li><li>this's two</li><li>this's three</li><li>this's four</li></ul>
总结:如果在JS中想得到某个元素下的所有子元素,最好的方式还是使用childNodes属性。至于因为排版中间的换行符因为在firefox和chrome中都一并得到了,可以使用得到的子元素时进行判断。最终我的方案如下。有更好的方法清指教!
1 var objs = document.getElementsByTagName("ul")[0].childNodes;
2 for(var i=0;i<objs.length;i++){
3 if(objs[i].tagName != "LI") continue;
4 alert(objs[i].innerHTML);
5 }
2 for(var i=0;i<objs.length;i++){
3 if(objs[i].tagName != "LI") continue;
4 alert(objs[i].innerHTML);
5 }
delphi lazarus opengl
网页操作自动化, 图像分析破解,游戏开发
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步