在Js中得到元素的子元素集合注意事项

   费话少说，直接看例子：

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 >

   想用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  }

 

  　测试结果：在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  }

　　测试发现在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  }

 

　　测试发现在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  }

 

转载于:https://www.cnblogs.com/phonefans/archive/2008/09/04/1283739.html