JS DOM对象 访问兄弟节点 1. nextSibling 属性可返回某个节点之后紧跟的节点(处于同一树层级中)。2. previousSibling 属性可返回某个节点之前紧跟的节点(处于同一树层

访问兄弟节点

1. nextSibling 属性可返回某个节点之后紧跟的节点(处于同一树层级中)。

语法:

nodeObject.nextSibling

说明:如果无此节点,则该属性返回 null。

2. previousSibling 属性可返回某个节点之前紧跟的节点(处于同一树层级中)。

语法:

nodeObject.previousSibling  

说明:如果无此节点,则该属性返回 null。

注意: 两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点(例如,换行符号),而其它浏览器不会忽略

解决问题方法:

判断节点nodeType是否为1, 如是为元素节点,跳过。

JS DOM对象 访问兄弟节点 1. nextSibling 属性可返回某个节点之后紧跟的节点(处于同一树层级中)。2. previousSibling 属性可返回某个节点之前紧跟的节点(处于同一树层_第1张图片

运行结果:

LI = javascript
nextsibling: LI = jquery

 

 

 

任务

试一试,编写get_previousSibling 函数,获得指定节点的上一个节点。


<!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_nextSibling(n){
		var x = n.nextSibling;
		while (x&&x.nodeType!=1)
		{
				x = x.nextSibling;
		}
		return x;
   }

   function get_previousSibling(n){
		var x = n.previousSibling;
		while (x&&x.nodeType!=1)
		{
				x = x.previousSibling;
		}
		return x;
   }

   var x = document.getElementsByTagName("li")[0];
   document.write(x.nodeName+"="+x.innerHTML+"<br>");

   var y = get_nextSibling(x);
   if(y!=null){
		document.write("nextSibling:"+y.nodeName+"="+y.innerHTML+"<br>");
   }else
   {
		document.write("nextSibling:已经是最后一个节点了!"+"<br>");
   }

   var z=get_previousSibling(x);
   if(z!=null){
		document.write("previousSibling:"+z.nodeName+"="+z.innerHTML+"<br>");
   }else
   {
		document.write("previousSibling:已经是第一个节点了!");
   }

</script>
</body>
</html>

JS DOM对象 访问兄弟节点 1. nextSibling 属性可返回某个节点之后紧跟的节点(处于同一树层级中)。2. previousSibling 属性可返回某个节点之前紧跟的节点(处于同一树层_第2张图片



你可能感兴趣的:(JavaScript,dom,对象,web前端)