黑马程序员技术交流社区

标题: javascript获取table子节点问题，3个浏览器显示都不同 [打印本页]

作者: 陈汉维 时间: 2012-7-26 08:54
标题: javascript获取table子节点问题，3个浏览器显示都不同
<!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>无标题文档</title>
<style type="text/css">
table{
border:#0066FF 1px solid;
width:600px;
border-collapse:collapse;}
table th,table td{
border:#0066FF 1px solid;
padding:10px;}
table th{
background-color:#00FF66;}
table td{
background-color:#CCFFCC;}
#repswspan{
margin-left:125px;}
.errorinfo{
color:#FF0000;
display:none;}
.focus{
border:#00FFFF 2px solid;}
.norm{
border:#999999 1px solid;}
.error{
border:#FF0000 2px solid;}
</style>
<script type="text/javascript">
window.onload = function()
{
  var tabNode = document.getElementsByTagName('table')[0];
  var tbNode = tabNode.childNodes[0];//获取table的子节点tbody
  alert(tbNode.nodeName);
}
</script>
</head>
<body>
<form>
<table>
   <tr>
      <th>注册表单</th>
      </tr>
      <tr>
      <td>
         <div>用户名</div>
            <div><input type="text" name="user" /></div>
            <div>用户名错误</div>
            <div>用户名必须是4-6位，由字母(a-z)，数字(0-9)，下划线(_)组成</div>
         </td>
      </tr>
      <tr>
      <td>
         <div><span>密码</span> <span>确认密码</span></div>
            <div>
               <input type="password" name="psw" />
                  <input type="password" name="repsw" />
            </div>
            <div>密码错误</div>
            <div>两次密码输入不一致</div>
            <div>密码必须是4-6位，由字母(a-z)，数字(0-9)组成</div>
         </td>
      </tr>
      <tr>
      <td>
         <div>邮箱</div>
            <div><input type="text" name="mail" /></div>
            <div>邮箱地址错误</div>
         </td>
      </tr>
      <tr>
      <th>
         <input type="submit" />
         </th>
      </tr>
</table>
</form>
</body>
</html>
我按毕向东老师的视频自己写了一段表单验证的HTML代码，
用var tabNode = document.getElementsByTagName('table')[0];
  var tbNode = tabNode.childNodes[0];//获取table的子节点tbody
  alert(tbNode.nodeName);
毕向东老师打印出来的结果是tbody，我用搜狗浏览器和IE8打印出来的也是tbody
但是用火狐和ie9打印出来的结果却是#text。有人知道为什么吗？是浏览器问题，还是老师讲错了？
ie8的打印结果：

搜狗浏览器：

火狐浏览器：

作者: 王志明 时间: 2012-7-26 10:08
浏览器内部的实现有区别
firefox和ie9使用节点的childNodes属性时，获取的不准确，
推荐使用的getElementsByTagName()获取子节点的集合

作者: 陈汉维 时间: 2012-7-26 10:33

王志明发表于 2012-7-26 10:08
浏览器内部的实现有区别
firefox和ie9使用节点的childNodes属性时，获取的不准确，
推荐使用的getElementsB ...

:L我经过测试，IE8和搜狗、E影浏览器显示效果和IE6显示效果一样，都是tbody。而IE9和火狐的显示效果却是#text。

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2