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

JavaScript firstChild属性

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

此属性能够获取指定元素节点下的第一个子节点。

如果元素下没有子节点,那么返回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的节点。

2

鲜花

握手

雷人

路过
1

鸡蛋

刚表态过的朋友 (3 人)

发表评论

最新评论

引用 老汉 2019-4-8 21:01
八级天: 你这个不适合新手查看,对于案例需要有一定的注释解释,举的案例也需要贴合主题,解释作用。
这篇文章其实相当不错的,很符合主题
引用 坎大哈 2019-4-6 18:29
相当不错的文章,介绍的很好,彻底明白了
引用 八级天 2019-4-6 08:13
你这个不适合新手查看,对于案例需要有一定的注释解释,举的案例也需要贴合主题,解释作用。

查看全部评论(3)

返回顶部