梦相随1006

版权归 梦相随1006 所有，未经 https://www.cnblogs.com/xin1006 作者许可，严禁转载

导航

js nextSibling属性和previousSibling属性

原文： http://www.cnblogs.com/myssh/archive/2009/11/02/1594638.html

  1：nextSibling属性

        该属性表示当前节点的下一个节点（其后的节点与当前节点同属一个级别）；如果其后没有与其同级的节点，则返回null。

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

      先来看一个例子：

 

 

view plaincopy to clipboardprint?
  1. <body>   
  2. <div>   
  3. <input id="a4" type="button" onclick="alert(this.nextSibling);" value="d" />   
  4. <input id="a5" type="button" onclick="alert(this.nextSibling);" value="e" />   
  5. </div>   
  6. </bod  

      该对象的结构表面上看，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了。

       3：通过nextSibling或者 previousSibling所获得的HTML标签元素对象的属性问题

       一般先通过nextSibling.nodeName来获知其标签名，或者通过nextSibling.nodeType来获知其标签类型，然后，如果该 nextSibling.nodeName = #text，则通过nextSibling.nodeValue来获知其文本值；否则，可以通过nextSibling.innerHTML等其他常用标 签元素属性来获取其属性。

 

　　　经过我的实践发现： 在IE8和firefox中已经统一了，都使用 nextSibling.nextSibling 。

 

posted on 2013-04-01 09:58  梦相随1006  阅读(200)  评论(0)  编辑  收藏  举报