JavaScript firstChild屬性

admin發表於2018-09-03
JavaScript

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

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

特別說明：

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

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

後面會通過程式碼例項進行相關演示。

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

語法結構：

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

瀏覽器支援:

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

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

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

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

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

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

程式碼例項:

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

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

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

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

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

因為在標準瀏覽器中，會將空格和換行看做是文字節點，而低版本IE瀏覽器則無視空格或者換行。

以當前的軟硬體水平，其實在一定程度上可以無視低版本IE瀏覽器。

如果實在要相容可以使用如下類似程式碼：

[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 show=document.getElementById("show");
  var firstNode=box.firstChild;
  while (firstNode.nodeType!=1){
    firstNode=firstNode.nextSibling;
  }
  show.innerHTML=firstNode.innerHTML;
}
</script> 
</head> 
<body> 
<div id="show"></div>
<ul id="box">
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
  <li>螞蟻部落四</li>
</ul>
</body> 
</html>

說實話，有時候感覺標準瀏覽器的處理方式真的不如低版本IE瀏覽器處理方式好。

絕大多數時候需要無視空格或者換行，上面就是一段能夠實現此功能的程式碼，原理比較簡單，就是使用迴圈遍歷的手段，找到第一個節點型別不為3的節點。

相關文章