发表新主题 回复该帖子
主题:js nextSibling属性和previousSibling属性
jastby
帖子档案  楼主 js nextSibling属性和previousSibling属性   Post by : 2009-05-15 10:08:44.0
  • 幼儿园
  • 幼儿园
  • UID:2
  • 主题:126
  • 帖子:219
  • 加为好友 加为好友    发送短信 发送短信

previousSibling是指获得前一个对象 ,nextSibling 是指获得下一个对象。

需要注意,两个节点间不要有空格和回车,否则很容易获取不到正确的对象。

 1、nextSibling属性

该属性表示当前节点的下一个节点(其后的节点与当前节点同属一个级别);如果其后没有与其同级的节点,则返回null。

需要特别注意的是:该属性在不同的浏览器中的执行结果并不都相同。见下面例示:

   xhtml代码
  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.   <title> new document </title> 
  5.   <meta name="generator" content="editplus" /> 
  6.   <meta name="author" content="" /> 
  7.   <meta name="keywords" content="" /> 
  8.   <meta name="description" content="" /> 
  9.  </head> 
  10.  
  11.  <body> 
  12.     <div> 
  13.         <input id="a1" type="button" onclick="alert(this.nextSibling);" value="test-1" /> 
  14.         <input id="a2" type="button" onclick="alert(this.nextSibling);" value="test-2" /> 
  15.  
  16.         <input id="a3" type="button" onclick="alert(this.nextSibling.value);" value="Hello!" /><input id="a4" type="button" onclick="alert(this.previousSibling.value);" value="Hi!" /> 
  17.     </div> 
  18.  </body> 
  19. </html> 

该对象的结构表面上看,div的nextSibling只有2项——两个input节点。但实际上有5项——/n,input,/n,input,/n。这是因为input作为创建各种表单输入控件的标签,无论是生成button、checkbox、radio...等或其他表单控件,IE都会自动在后面创建一个1字节位的空白。

IE将跳过在节点之间产生的空格文档节点(如:换行字符),而Mozilla不会这样——FF会把诸如空格换行之类的排版元素视作节点读取,因此,在ie中用nextSibling便可读取到的下一个节点元素,在FF中就需要这样写:nextSibling.nextSibling了。

opera和safari对nextSibling的处理方式与FF一致

2、previousSibling属性

该属性与nextSibling属性的作用正好相反。例如:someTagObject.nextSibling.previousSibling其实返回的是该标签元素本身,但前提必须是:该标签元素的后面必须有一个同级的元素,否则就返回null了。

返回页面顶部  


CopyRight © 2008-2009 JavaWind.Net Studio All Rights Reserved
Powered By JWind.BBS Vesion 1.0.0 Beta1 Processed in 18 ms,0 (Queries)  Gzip enabled

WAP - 清除Cookies - 联系我们 - JavaWind.Net Studio - Archiver - TOP Valid XHTML 1.0 Transitional Valid CSS! 粤ICP备07511478号