javascript兼容性问题一_____nextSibling问题

╰+哭是因爲堅強的太久メ 2022-08-07 04:40 165阅读 0赞

先看代码：

<ul id="ultest">
      	<li id="item1"></li>
        <li id="item2"></li>
        <li id="item3"></li>
      </ul>
    
    	<script type="text/javascript">
    		var item1=document.getElementById("item1");
    		alert(  "item1的下一个子节点的节点类型为："+item1.nextSibling.nodeType);
    		alert(  "ul元素下总共有多少子节点"+ document.getElementsByTagName("ul")[0].childNodes.length );
    	</script>

nextSibling 属性返回被选节点的下一个同级节点(即兄弟节点)如果不存在这样的节点，则该属性返回 NULL。

以上代码运行的结果： 在ie下输出  1和3,  1表示 item1下面的是一个DOM节点，3表示ul下面有三个子节点（即三个li)， 而在firefox,safari中结果为：  3和7,3表示item1下面的是一个文本结点（这里是空白），而7表示ul下子节点有7个，这是因为ff会将空白，换行等文本信息也当作childNodes的成员，而ie会忽略它。

正常情况下，应该按照ie的方式来解析。所以这里当浏览器是ff时，要模仿出ie的处理方式。

在这里，我们封装一个函数来重新实现nextSibling的功能，以屏闭浏览器的差异：

/**
    		     重新定义一个函数来完成  nextSibling属性的功能，以屏闭浏览器的差异。
    			 这个函数接收一个node参数，可以是字符串（代表 元素的id名，或是一个   dom节点对象 ， 返回这个node节点的下一个子节点
    		*/
    		function getNextNode(   node ){
    			//先判断node是字符串还是一个dom对象
    			//var t=     (typeof node=="string");
    			node=   typeof node=="string"?document.getElementById(node):node;
    			//取出子节点
    			var nextnode=node.nextSibling;
    			var t;
    			//判断是否存在子节点
    			if(   !nextnode){
    				return null;	
    			}
    		
    			//判断当前浏览器类型， ff不支持   document.all
    			if(   !document.all ){
    				//如果是ie的话，则要循环一遍所有的子节点，判断节点的类型，如果是非元素节点，则再取下一个nextSibling节点.
    				while(  true){
    					//如果子节点的类型为1，表示是一个元素节点,那么这个节点就是要找的节点
    					if( nextnode.nodeType==1 ){
    						break;	
    					}else{
    						//否则为其它节点，
    						t=nextnode.nextSibling;
    						if( t){
    							nextnode=t;	
    						}else{
    							break;	
    						}
    					}	
    				}	
    			}
    			return nextnode;
    		}
    		
    		var n=getNextNode(   "item1");
    		alert( n.id);

以上代码，在ie,ff, safari中测试通过，都取出值    "item2".