JavaScript獲取上一個元素

admin發表於2018-02-09
JavaScript

這個效果使用jquery非常輕鬆就可以實現，只要利用pre()函式即可。

下面介紹一下如何利用原生的javascript實現此功能。

程式碼例項如下:

[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 obox=document.getElementById("box"); 
  var lis=obox.getElementsByTagName("li"); 
  var oshow=document.getElementById("show"); 
  var obt=document.getElementById("bt"); 
  var node=lis[2]; 
  obt.onclick=function(){ 
    while(node.previousSibling.nodeType!=1){ 
      node=node.previousSibling; 
    } 
    node=node.previousSibling; 
    oshow.innerHTML=node.innerHTML; 
  } 
} 
</script>  
</head>  
<body>  
<div id="show"></div> 
<ul id="box"> 
  <li>螞蟻部落一</li> 
  <li>螞蟻部落二</li> 
  <li>螞蟻部落三</li> 
  <li>螞蟻部落四</li> 
  <li>螞蟻部落五</li> 
</ul> 
<input type="button" id="bt" value="檢視效果"/> 
</body>  
</html>

以上程式碼實現了我們的要求，程式碼比較簡單，更多內容可以參閱相關閱讀。

相關閱讀：

（1）.nodeType屬性參閱JavaScript nodeType一章節。

（2）.previousSibling屬性參閱JavaScript previousSibling一章節。

相關文章