您的位置:首页> 前端教程> JS教程
文章导航

JavaScript firstChild

2018-9-3 10:28| 作者: admin| 查看: 4815| 评论: 3|来自: 蚂蚁部落

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浏览器会逐步退出市场,本文不再做兼容性介绍。

2

鲜花

握手

雷人

路过
1

鸡蛋

刚表态过的朋友 (3 人)

返回顶部