Javascript获取兄弟节点

获取上一个节点

在Javascript中,通过 previousSibling 来获取上一个节点。

语法:

    nodeObject.previousSibling


其中,nodeObject 为节点对象(元素节点)。

在IE下,会忽略节点间的空白节点(空格、回车和Tab键);在遵循W3C规范的浏览器(Chrome、FireFox、Safari等)下则不会。

请看下面一段代码:

<div id="demo">
    <div name="preNode">上一个节点</div>
    <div id="thisNode">当前节点</div>
    <div name="nextNode">下一个节点</div>
</div>
<script type="text/javascript">
document.getElementById("thisNode").onclick=function(){
    var preNode=this.previousSibling;
    alert(
        "上一个节点的类型是:"+preNode.nodeType+"\n"+
        (preNode.nodeType==1?"上一个节点的名称是:"+preNode.getAttribute("name"):"")
        );
}
</script>

实例演示:QQ截图20161013110309.png

在 IE8.0 以下,显示:
    上一个节点的类型是:1
    上一个节点的名称是:preNode
在Chrome、Opera、Safari、FireFox下,显示:
    上一个节点的类型是:3

对上面的代码稍作修改,去掉节点间的空白:

<div id="demo"><div name="preNode">上一个节点</div><div id="thisNode">当前节点</div><div name="nextNode">下一个节点</div></div>
<script type="text/javascript">
document.getElementById("thisNode").onclick=function(){
    var preNode=this.previousSibling;
    alert(
        "上一个节点的类型是:"+preNode.nodeType+"\n"+
        (preNode.nodeType==1?"上一个节点的名称是:"+preNode.getAttribute("name"):"")
        );
}
</script>

实例演示:QQ截图20161013110349.png


在所有浏览器下,显示:
    上一个节点的类型是:1
    上一个节点的名称是:preNode

获取下一个节点

在Javascript中,可以通过 nextSibling 来获取下一个节点。

与 previousSibling 相同,在IE下,nextSibling 同样会忽略节点间的空白节点(空格、回车和Tab键);在遵循W3C规范的浏览器(Chrome、FireFox、Safari等)下则不会。


继续学习
||
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
<div id="demo">
<div name="preNode"></div>
<div id="thisNode"></div>
<div name="nextNode"></div>
</div>
<script type="text/javascript">
document.getElementById("thisNode").onclick=function(){
var preNode=this.previousSibling;
alert(
""+preNode.nodeType+"\n"+
(preNode.nodeType==1?""+preNode.getAttribute("name"):"")
);
}
</script>
</head>
<body>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交重置代码
图片放大关闭