Chinaunix首页 | 论坛 | 博客
  • 博客访问: 710474
  • 博文数量: 214
  • 博客积分: 5015
  • 博客等级: 大校
  • 技术积分: 2285
  • 用 户 组: 普通用户
  • 注册时间: 2006-06-18 17:02
文章分类

全部博文(214)

文章存档

2008年(43)

2007年(171)

我的朋友

分类:

2007-09-06 11:46:25

   一个问题困扰我,涉及到firstChild和lastChild的代码工作不正常。为了简单,我把问题抽象到下面这个代码,你猜点击按钮后的结果是什么?

<html>
<body>
<ul id="main">
<li>1</li>
<li>2</li>
</ul>
<input type=button value="click me!"
onclick="alert(document.getElementById('main').childNodes.length)">
</body>
</html>

呵呵,在IE里提示2,在Firefox里提示5,这是怎么回事呢?UL下明明只有两个子节点,Firefox为什么提示5个子节点呢?通过查看IE和firefox的DOM结构,发现了问题的所在:

IE:

Firefox:


你也应该发现了吧?“#text”表示文本(实际是无意义的空格和换行等)在Firefox里也会被解析成一个节点,在IE里只有有实际意义的文本才会解析成“#text”。所以对firefox而言,上例中ul的fistChild并不是第一个li,而是#text(ul和第一个li之间的无意义文本), lastChild也并不是最后一个li,而是最后一个LI和/UL之间的无意义文本。
解决办法是先用 .getElementsByTagName("li") 得到所有LI的节点。我觉得firefox这样处理比较令程序员头痛,也没有必要。

阅读(1794) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~