一个个JavaScript中的代码不运行的问题

黑马伍哲沂

本帖最后由 wangchao1686 于 2013-6-12 17:28 编辑

<!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=gb2312" />
<title>DOMdemo</title>
<script type="text/javascript">
var str="";
function demo()
{
var obj=document.getElementById("trid2");//根据id获取节点对象 //遇到的问题：为什么"trid2"和“trid3”可以运行，但是改成“trid1”时就不能运行了
var parent=obj.parentNode;//获取父节点对象
var pronode=obj.previousSibling;//获取上一个兄弟节点
var nexnode=obj.nextSibling;//获取下一个兄弟节点
str+="本节点....................<br/>";
nodeInfo(obj);
str+="父节点节点....................<br/>";
nodeInfo(parent);
str+="上一个兄弟节点....................<br/>";
nodeInfo(pronode);
str+="下一个兄弟节点....................<br/>";
nodeInfo(nexnode);
str+="子节点（多个）....................<br/>";
var child=obj.childNodes;//获取子节点对象（子节点有多个）
for(var x=0;x<child.length;x++)
{
nodeInfo(child[x]);
}
document.write(str);//打印信息
}
function nodeInfo(node)//把结点的信息记录到变量str中
{
str+="name:"+node.nodeName+"......type:"+node.nodeType+"......value:"+node.nodeValue+"<br/>";
}
</script>
</head>
<body>
<input type="button" value="演示" onclick="demo()" />
<table border="1" bordercolor="#0000FF" cellpadding="1" cellspacing="0" width="70%" >
<tr id="trid1">
<th colspan="2">注册页面</th>
</tr>
<tr id="trid2">
<th colspan="2">注册页面</th>
</tr>
<tr id="trid3">
<td >姓名(u)</td>
<td><input type="text" name="username" id="userid"/></td>
</tr>
<tr >
<td>密码(p)</td>
<td><input type="password" name="password" id="password"/></td>
</tr>
<tr >
<td>确认密码</td>
<td><input type="password" name="passwordtest" />
</td>
</tr>
<tr>
<td>性别</td>
<td><input type="radio" name="sex" value="nan"/>
男
<input type="radio" name="sex" value="nv" />
女 </td>
</tr>
<tr>
<td>技术</td>
<td><input type="checkbox" name="tech" value="java"/>
java
<input type="checkbox" name="tech" value="html"/>
html
<input type="checkbox" name="tech" value="jsp"/>
jsp </td>
</tr>
<tr>
<td>国家</td>
<td><select name="county">
<option value="none">--选择国家--</option>
<option value="ch">中国</option>
<option value="us">美国</option>
<option value="en">英国</option>
</select></td>
</tr>
<tr>
<th colspan="2"> <input name="提交" type="reset" value="重置页面"/>
<input name="submit" type="submit" value="提交数据"/>
</th>
</tr>
</table>
</body>
</html>

复制代码

这个是我在写js代码时遇到的问题，就是在DOM中获取父节点对象，子节点对象和兄弟结点时出现问题。请大家帮忙解决下啊!
问题1：为什么"trid2"和“trid3”可以运行，但是改成“trid1”时就不能运行了？
问题2: 还有就是当填入“trid2”时，演示的结果是：

本节点....................
name:TR......type:1......value:null
父节点节点....................
name:TBODY......type:1......value:null
上一个兄弟节点....................
name:#text......type:3......value:
下一个兄弟节点....................
name:#text......type:3......value:
子节点（多个）....................
name:#text......type:3......value:
name:TH......type:1......value:null
name:#text......type:3......value:

复制代码

为什么上一个兄弟结点和下一个兄弟结点都是text类型的哪？

wangchao1686 · wangchao1686

对不起哈，今天来晚了，谢谢楼主给改了“已解决”

wangchao1686 · wangchao1686

恩哪，我知道了，返回为空就会报错了，谢谢啦{:soso_e113:}{:soso_e113:}

wangchao1686 · wangchao1686

Super_Class 发表于 2013-6-13 19:01
打开IE调试方法

是的，我知道是无法获取上一个兄弟结点，但是为什么返回的不是null呢？

孙百鑫 · 孙百鑫

楼主您好.如果问题解决的话.请将问题改成已解决哦~谢谢你的配合{:soso_e100:}

Super_Class · Super_Class

打开IE调试方法

Super_Class · Super_Class

var obj=document.getElementById("trid2");//根据id获取节点对象

<tr id="trid1"> //它无法获取上一个兄弟节点。它的父节点是tbody
                           <th colspan="2">注册页面</th>
      </tr>
      <tr  id="trid2">
      <th colspan="2">注册页面</th>
      </tr>

如果换成trid1. var pronode=obj.previousSibling;//这个就会报错。

调试结果如图

//建议打开浏览器调试。可以看到错误

  // var pronode=obj.previousSibling;//获取上一个兄弟节点
//       nodeInfo(pronode); 为了可以更好的理解。你可以先把这两句话注释掉。编译无误。

chensc · chensc

学习学习！

帐号		自动登录	找回密码
密码			加入黑马

一个个JavaScript中的代码不运行的问题

评分

8 个回复

评分

黑马骑士勋章