js DOM的previousSibling 和 nextSibling

原来地址：http://blog.csdn.net/lin49940/archive/2009/10/26/4728125.aspx

 

定义和用法

nextSibling 属性可返回某个元素之后紧跟的节点（处于同一树层级中）。

如果无此节点，则该属性返回 null。

语法：

 
 

  
  

   
   

    
    view plain
    
    copy to clipboard
    
    print
    
    ?
   
   
  
  
  
  
nodeObject.nextSibling  
 
 
 

previousSibling 属性可返回某节点之前紧跟的节点（处于同一树层级）

如果没有此节点，那么该属性返回 null。

 语法：

 
 
 

  
  

   
   

    
    view plain
    
    copy to clipboard
    
    print
    
    ?
   
   
  
  
  
  
nodeObject.previousSibling  
 
 
 

从上面的previousSibling  和 nextSibling 的定义可以看出, 这两个属性获取的是节点,  而不是元素.

Internet Explorer 会忽略节点间生成的空白文本节点（例如，换行符号），而 Mozilla 不会这样做。

对于节点的节点类型nodeType

 

节点编号：	节点名称：
1	Element
2	Attribute
3	Text
4	CDATA Section
5	Entity Reference
6	Entity
7	Processing Instrucion
8	Comment
9	Document
10	Document Type
11	Document Fragment
12	Notation

  

 

从上面的表可以看出, 获取的节点不一定就是元素, 也可以是文本或其他的.

所以, 要获取下个元素或上个元素, 用下面的方法

 

view plain copy to clipboard print ?

1. //check if the next sibling node is an element node  
2. function get_nextsibling(n)  
3. {  
4.   var x=n.nextSibling;  
5.   if(x == null) return null;  
6.   while (x && x.nodeType!=1)  
7.    {  
8.      x=x.nextSibling;  
9.    }  
10.   return x;  
11. }  
12.   
13. //check if the previous sibling node is an element node  
14. function get_previoussibling(n)  
15. {  
16.   var x=n.previousSibling;  
17.   if(x == null) return null;  
18.   while (x && x.nodeType!=1)  
19.   {  
20.     x=x.previousSibling;  
21.   }  
22.   return x;  
23. }  

 

参考: http://www.w3school.com.cn/xmldom/dom_node.asp