zoukankan      html  css  js  c++  java
  • 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;
    	}
    

      

  • 相关阅读:
    [20190905] 考试卷子分析
    tmp
    分层图——孤岛营救
    [BNDSOJ] #1106代码
    [BNDSOJ] 小P的数列代码
    补充[BNDSOJ]小p的数列
    针对【H-2017年信息基础班(周一班)】某些同学恶意使用lyl洛谷的谴责
    #1086. 受欢迎的牛
    [sol]250OJ 1~10
    编译原理之词法分析(大三生活第21天,度过了一段萎靡的时光)
  • 原文地址:https://www.cnblogs.com/ihqn19/p/3243568.html
Copyright © 2011-2022 走看看