ie和firefox下element子节点的不同
今天在更换新模板时，修改了下侧边栏的GoogleNews的显示和隐藏,javascript代码如下
JavaScript Code:
- function displayNews()
- {
- var pNode = document.getElementById('ctrlNewsBar');
- var oldNode = pNode.firstChild;
- var newNode = document.createElement('a');
- var nextNode = pNode.lastChild;
- newNode.href = 'javascript:hideNews();';
- var txtNode = document.createTextNode('隐藏新闻');
- newNode.appendChild(txtNode);
- pNode.replaceChild(newNode,oldNode);
- nextNode.style.display = "";
- }
- function hideNews()
- {
- var pNode = document.getElementById('ctrlNewsBar');
- var oldNode = pNode.firstChild;
- var newNode = document.createElement('a');
- var nextNode = pNode.lastChild;
- newNode.href = 'javascript:displayNews();';
- var txtNode = document.createTextNode('显示新闻');
- newNode.appendChild(txtNode);
- pNode.replaceChild(newNode,oldNode);
- nextNode.style.display = "none";
- }
相关的Html代码如下
html Code:
- <div id="ctrlNewsBar" class='right-widget' ><a href="javascript:displayNews();">显示新闻</a><div id="newsBar-bar"></div>
- </div>
在IE7下工作正常，但是在Firefox下却无法显示出新闻来。经测试发现，出现问题的地方是在displayNews函数中的var nextNode = pNode.lastChild;这一句中，firefox里显示该句执行后nextNode的nodeType是3，也就是textNode，而不是期望中的element。难道是因为在倒数第二个div结束tag后有一个换行的原因？
为此，做如下测试：编辑一个html文件，代码如下：
html Code:
- < !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">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>Test</title>
- </head>
- <body>
- <div id='test'><a href="hello.html">hello</a><div id="child">some code</div></div>
- <div id='info'></div>
- <script language="javascript" type="text/javascript">
- <!--
- var testNode = document.getElementById('test');
- var str = '';
- var childNode = testNode.firstChild;
- var count = 1;
- while(childNode)
- {
- str += 'childNode' + count + ' -> nodeType:' + childNode.nodeType + ' -> nodeValue:' + childNode.nodeName + '<br />';
- count ++
- childNode = childNode.nextSibling;
- }
- document.getElementById('info').innerHTML = str;
- -->
- </script>
- </body>
- </html>
这段代码的目的是要输出id为test的节点的子节点的节点类型，同时也能看到它的子节点数。
在IE7下运行的截图如下：
在Firefox2下运行的截图如下：
通过这两个图，我们看到它们的结果是一样的，跟预想的也是一样的，即test节点有两个子节点，一个是tag为a的节点，另一个是tag为div的节点。
然后修改网页代码，主要修改id为test的div内的部分，修改为如下
Code:
- <div id='test'>
- <a href="hello.html">hello</a>
- <div id="child">some code</div>
- </div>
- <div id='info'></div>
在IE7下运行的结果是：
在Firefox2下运行的结果是
从上面两幅图看到它们的运行结果并不一样，
IE7认为test有3个子节点，firefox认为有5个子节点。IE7把第一个子节点A后的换行当作了第2个子节点而忽略了第1个和第3个换行(也就是a前面和div后面的换行)；而fireFox把这些换行都当作子节点来处理，所以它认为有5个子节点。-_-
看来以后还是小心行事，尽量不要这样换行。
Leave a Reply