相容所有瀏覽器的nextSibling

admin發表於2017-04-12
原文網址 : https://www.softwhy.com/article-6835-1.html
瀏覽器

關於nextSibling屬性的基本用法可以參閱nextSibling屬性一章節。

在IE8和IE8以下瀏覽器存在著一定的相容問題，下面就介紹一下如何實現相容所有瀏覽器效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<script type="text/javascript">  
window.onload=function() { 
  var box=document.getElementById("box"); 
  var lis=box.getElementsByTagName("li");
  var show=document.getElementById("show"); 
  
  var theNode=lis[2].nextSibling;   
  while (theNode.nodeType!=1) {     
    theNode=theNode.nextSibling;   
  }   
  show.innerHTML=theNode.innerHTML; 
} 
</script>  
</head>  
<body>  
<div id="show"></div> 
<ul id="box"> 
  <li>螞蟻部落一</li> 
  <li>螞蟻部落二</li> 
  <li>螞蟻部落三</li> 
  <li>螞蟻部落四</li> 
</ul> 
</body>  
</html>

上面的程式碼實現了相容效果，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.window.onload=function() {}，文件內容完全載入完畢再去執行函式中的程式碼。

（2）.var box=document.getElementById("box")，獲取id屬性值為box的元素物件。

（3）.var lis=box.getElementsByTagName("li"),回去box元素下的li元素列表。

（4）.var show=document.getElementById("show")，獲取id屬性值為show的元素物件。

（5）.var theNode=lis[2].nextSibling，獲取第三個li元素下一個節點。

（6）.while (theNode.nodeType!=1) {     

  theNode=theNode.nextSibling;

},如果下一個節點不是元素節點，那麼繼續查詢下一個節點。

（7）.show.innerHTML=theNode.innerHTML，將節點的內容寫入show元素。

二.相關閱讀:

（1）.getElementsByTagName()可以參閱document.getElementsByTagName()一章節。

（2）.nodeType可以參閱js nodeType一章節。

（3）.innerHTML可以參閱innerHTML一章節。

相關文章