1. nextSibling 属性可返回某个节点之后紧跟的节点(处于同一树层级中)。
语法:
nodeObject.nextSibling
说明:如果无此节点,则该属性返回 null。
2. previousSibling 属性可返回某个节点之前紧跟的节点(处于同一树层级中)。
语法:
nodeObject.previousSibling
说明:如果无此节点,则该属性返回 null。
注意: 两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点(例如,换行符号),而其它浏览器不会忽略。
解决问题方法:
判断节点nodeType是否为1, 如是为元素节点,跳过。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>nextSibling</title> </head> <body> <ul id="u1"> <li id="a">javascript</li> <li id="b">jquery</li> <li id="c">html</li> </ul> <ul id="u2"> <li id="d">css3</li> <li id="e">php</li> <li id="f">java</li> </ul> <script type="text/javascript"> function get_previousSibling(n){ var x=n.previousSibling; while (x.nodeType!=1){ x=x.previousSibling; } return x; } var x=document.getElementsByTagName("li")[2]; document.write(x.nodeName); document.write(" = "); document.write(x.innerHTML); var y=get_previousSibling(x); if(y!=null){ document.write("<br />nextsibling: "); document.write(y.nodeName); document.write(" = "); document.write(y.innerHTML); }else{ document.write("<br>已经是最前一个节点"); } </script> </body> </html>