Don’t let your dreams be dreams.

ie下nextSibling一些bug

众所周知(如果不知请百度之)nextSibling与previousSibling是查找元素的下一,上一,同级元素。在标准dom浏览器下,会首先查找元素与元素之间的text节点。而ie8以及以前则直接查找目标元素节点。

但是并不是所有情况下ie8及以前浏览器会乖乖查找目标节点。它们在遇到几个问题时会有问题

No.1  previousSibling查找上一元素

如果要查找的前一是内联元素,如span,i之类的,则返回object.但是!其实它返回的跟谷歌一样是text节点。它无法返回正常的上一节点。

<span>111</span>
<div id="a">222</div> 

;(function(){
	var div=document.getElementById('a');
	alert(div.previousSibling);//object
        alert(div.previousSibling.nodeType);//3
alert(div.previousSibling.tagName);//undefined
})()

  

No.2  nextSibling查找下一元素,当自己本来是内联元素的时候,无法正常查找下一元素节点。返回的是跟谷歌一样的text节点。

<span id="a">111</span>
<span>222</span>  

;(function(){
	var div=document.getElementById('a');
	alert(div.nextSibling);//object
	alert(div.nextSibling.nodeType);//3
	alert(div.nextSibling.tagName);//undefined
})()

 

解决:

最好也是最简单的方法就是像w3school那样写。这样的话可以避免很多ie的兼容包括用谷歌nextElementSibling的兼容。

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

  

posted on 2013-08-07 17:20  包田耘  阅读(352)  评论(0编辑  收藏  举报