一个问题困扰我，涉及到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这样处理比较令程序员头痛，也没有必要。
阅读(1755) | 评论(0) | 转发(0) |
