JavaScript firstChild

admin發表於2018-09-03
JavaScript

firstChild 屬效能夠獲取指定元素節點下的第一個子節點。

如果元素下沒有子節點，那麼返回 null。

特別說明：

（1）.節點並不一定都是元素節點，還包括文字或者註釋等節點。

（2）.空格或者換行被看做文字節點。

關於節點型別可以參閱 JavaScript nodeType 一章節。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
elementNode.firstChild

瀏覽器支援：

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

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

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

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

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

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

程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#box {
  width :120px;
  height :70px;
  list-style-type: none;
  border :2px dotted #ccc;
  font-size :12px;
}
#show {
  width :160px;
  color :green;
  font-size :12px;
  border :2px dotted #ccc;
  text-align: center;
}
</style>
<script> 
window.onload = ()=> {
  let oBox = document.getElementById("box");
  let oShow = document.getElementById("show");
  oShow.innerHTML = oBox.firstChild.nodeType;
}
</script> 
</head> 
<body> 
<ul id="box">
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
  <li>螞蟻部落四</li>
</ul>
<div id="show"></div>
</body> 
</html>

程式碼獲取 box 元素下第一個子節點的型別，並將其寫入 div 中。

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

a:3:{s:3:\"pic\";s:43:\"portal/202003/24/212302uxtt9x37smm898f7.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

具有一定的瀏覽器相容性問題，分析如下：

（1）.IE9+與其他標準瀏覽器中，div 顯示數字 3，說明是文字節點。

（2）.IE8 和 IE8 以下瀏覽器中，div顯示數字 1，說明是元素節點。

標準瀏覽器中，會將空格和換行當做文字節點處理，低版本 IE 瀏覽器則無視空格或者換行。

隨著時間的推移和軟硬體水平的進步，低版本IE瀏覽器會逐步退出市場，本文不再做相容性介紹。

相關文章