JavaScript firstElementChild 屬性

admin發表於2017-09-11
JavaScript

掌握一個概念可以從它的名稱入手。

firstElementChild由三個單詞合成：first+element+child。

由此，可以有理由猜想，此屬性的功能是獲取指定元素下第一個子元素節點。

節點有多種型別，常見的有文字節點、元素節點和屬性節點等，此屬性獲取的是元素節點。

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

可以結合JavaScript firstChild屬性一起學習，此屬性獲取的是第一個子節點，並不侷限於元素節點。

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

語法結構:

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

瀏覽器支援：

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

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

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

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

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

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

程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#box li {
  width:350px;
  height:25px;
  line-height:25px;
  font-size:12px;
}
</style>
<script type="text/javascript">
window.onload = function () {
  var obox = document.getElementById("box");
  var oshow = document.getElementById("show");
  var oli = obox.firstElementChild;
  oshow.innerHTML = oli.innerHTML;
}
</script>
</head>
<body>
<ul id="box">
  <li>螞蟻部落歡迎您，只有努力才會有美好的未來</li>
  <li>每一天都是新的，必須要好好把握。</li>
  <li>沒有人一開始就是高手，必須要努力奮鬥。</li>
  <li id="antzone">未來都是虛無縹緲的，只有當前是現實。</li>
  <li>分享和互助式進步的最大原動力</li>
  <li>本站的url地址是softwhy.com</li>
</ul>
<div id="show"></div>
</body>
</html>

obox會獲取ul元素物件，它的第一個子元素節點就是第一個li元素。

然後將第一個li元素中的內容寫入oshow中。

相關文章