JavaScript parentNode 屬性

admin發表於2018-07-25
JavaScript

parentNode 屬性可以返回指定節點的父節點。

如果沒有父節點，則返回 null。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
node.parentNode

瀏覽器支援:

（1）.IE 瀏覽器支援此屬性。

（2）.edge 瀏覽器支援此屬性。

（3）.谷歌瀏覽器支援此屬性。

（4）.火狐瀏覽器支援此屬性。

（5）.opera 瀏覽器支援此屬性。

（6）.safari 瀏覽器支援此屬性。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style>
div {
  border: 2px dotted #ccc;
}
#box {
  width: 200px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#middle {
  width: 150px;
  height: 80px;
  text-align: center;
  line-height: 80px;;
}
</style>
<script>
window.onload = ()=> {
  let oSpan = document.getElementById("txt");
  oSpan.parentNode.style.borderColor = "green";
}
</script>
</head>
<body>
<div id="box">
  <div id="middle">
    <span id="txt">螞蟻部落</span>
  </div>
</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/202004/01/224045f5fb1zdryzdyrozv.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.首先獲取 span 元素物件，然後再獲取其父節點。

（2）.parentNode 獲取的父節點是中間的 div ，並將其邊框顏色設定為綠色。

（3）.只是獲取的起直接父節點，更上輩的節點不會被獲取。

相關文章