A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 wangchao1686 于 2013-6-12 17:28 编辑
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>DOMdemo</title>
  6. <script type="text/javascript">
  7. var str="";
  8. function demo()
  9. {
  10.                 var obj=document.getElementById("trid2");//根据id获取节点对象     //遇到的问题:为什么"trid2"和“trid3”可以运行,但是改成“trid1”时就不能运行了      
  11.                 var parent=obj.parentNode;//获取父节点对象
  12.                 var pronode=obj.previousSibling;//获取上一个兄弟节点
  13.                 var nexnode=obj.nextSibling;//获取下一个兄弟节点
  14.                 str+="本节点....................<br/>";
  15.                 nodeInfo(obj);
  16.                 str+="父节点节点....................<br/>";
  17.                 nodeInfo(parent);
  18.                 str+="上一个兄弟节点....................<br/>";
  19.                 nodeInfo(pronode);
  20.                 str+="下一个兄弟节点....................<br/>";
  21.                 nodeInfo(nexnode);
  22.                 str+="子节点(多个)....................<br/>";
  23.                 var child=obj.childNodes;//获取子节点对象(子节点有多个)
  24.                 for(var x=0;x<child.length;x++)
  25.                 {
  26.                         nodeInfo(child[x]);
  27.                 }
  28.                 document.write(str);//打印信息
  29. }
  30. function nodeInfo(node)//把结点的信息记录到变量str中
  31. {
  32.          str+="name:"+node.nodeName+"......type:"+node.nodeType+"......value:"+node.nodeValue+"<br/>";
  33. }
  34. </script>
  35. </head>


  36. <body>
  37. <input type="button" value="演示" onclick="demo()" />
  38.           <table border="1" bordercolor="#0000FF" cellpadding="1" cellspacing="0" width="70%" >
  39.           <tr id="trid1">
  40.                               <th colspan="2">注册页面</th>
  41.           </tr>
  42.         <tr  id="trid2">
  43.           <th colspan="2">注册页面</th>
  44.         </tr>
  45.             <tr id="trid3">
  46.           <td >姓名(u)</td>
  47.               <td><input type="text" name="username" id="userid"/></td>
  48.         </tr>
  49.             <tr >
  50.           <td>密码(p)</td>
  51.               <td><input type="password" name="password"  id="password"/></td>
  52.         </tr>
  53.         <tr >
  54.           <td>确认密码</td>
  55.           <td><input type="password" name="passwordtest" />
  56.           </td>
  57.         </tr>
  58.         <tr>
  59.           <td>性别</td>
  60.           <td><input type="radio" name="sex" value="nan"/>
  61.             男
  62.             <input type="radio" name="sex" value="nv" />
  63.             女 </td>
  64.         </tr>
  65.         <tr>
  66.           <td>技术</td>
  67.           <td><input type="checkbox" name="tech" value="java"/>
  68.             java
  69.             <input type="checkbox" name="tech" value="html"/>
  70.             html
  71.             <input type="checkbox" name="tech" value="jsp"/>
  72.             jsp </td>
  73.         </tr>
  74.         <tr>
  75.           <td>国家</td>
  76.           <td><select name="county">
  77.               <option value="none">--选择国家--</option>
  78.               <option value="ch">中国</option>
  79.               <option value="us">美国</option>
  80.               <option value="en">英国</option>
  81.           </select></td>
  82.         </tr>
  83.         <tr>
  84.           <th colspan="2"> <input name="提交" type="reset" value="重置页面"/>
  85.               <input name="submit" type="submit" value="提交数据"/>
  86.           </th>
  87.         </tr>
  88.       </table>
  89. </body>
  90. </html>
复制代码
这个是我在写js代码时遇到的问题,就是在DOM中获取父节点对象,子节点对象和兄弟结点时出现问题。请大家帮忙解决下啊!
       问题1:为什么"trid2"和“trid3”可以运行,但是改成“trid1”时就不能运行了?
       问题2: 还有就是当填入“trid2”时,演示的结果是:
  1. 本节点....................
  2. name:TR......type:1......value:null
  3. 父节点节点....................
  4. name:TBODY......type:1......value:null
  5. 上一个兄弟节点....................
  6. name:#text......type:3......value:
  7. 下一个兄弟节点....................
  8. name:#text......type:3......value:
  9. 子节点(多个)....................
  10. name:#text......type:3......value:
  11. name:TH......type:1......value:null
  12. name:#text......type:3......value:
复制代码
为什么上一个兄弟结点和下一个兄弟结点都是text类型的哪?

评分

参与人数 1技术分 +1 收起 理由
黑马伍哲沂 + 1 神马都是浮云

查看全部评分

8 个回复

倒序浏览
学习学习!
回复 使用道具 举报
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);    为了可以更好的理解。你可以先把这两句话注释掉。编译无误。

a.png (3.95 KB, 下载次数: 0)

a.png
回复 使用道具 举报
打开IE调试方法

1.jpg (60.44 KB, 下载次数: 0)

1.jpg

2.jpg (92.26 KB, 下载次数: 0)

2.jpg

评分

参与人数 1技术分 +1 收起 理由
孙百鑫 + 1 小贱同志.你敢不敢在详细详细.都不敢直视了.

查看全部评分

回复 使用道具 举报
楼主您好.如果问题解决的话.请将问题改成已解决哦~谢谢你的配合{:soso_e100:}
回复 使用道具 举报

是的,我知道是无法获取上一个兄弟结点,但是为什么返回的不是null呢?
回复 使用道具 举报
恩哪,我知道了,返回为空就会报错了,谢谢啦{:soso_e113:}{:soso_e113:}
回复 使用道具 举报
对不起哈,今天来晚了,谢谢楼主给改了“已解决”
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马