firstChild和firstElementChild的区别

最新推荐文章于 2022-05-04 00:08:23 发布
最新推荐文章于 2022-05-04 00:08:23 发布
阅读量3.9k 收藏 3
点赞数 4
CC 4.0 BY-SA版权
分类专栏： js 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/learner_boy/article/details/72188691
本文详细介绍了firstChild和firstElementChild两个DOM方法的区别。firstChild能够获取父节点下的第一个子节点，包括文本节点、注释等；而firstElementChild只获取第一个元素节点。通过本文，读者可以了解如何根据需求选择合适的方法来获取DOM节点。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

firstChild可以获取文本元素而firstElemenChild不能 .

它们的共同点都是获取父节点下第一个节点对象。

但是firstElementChild只会获取元素节点对象，从名称就可以看出来，firstChild则可以获取文本节点对象（当然也可以获取元素节点对象），

比如空格和换行都被当做文本节点。
first-child
易天海
12-06 316
$("#quitLoss>a:first-child").addClass('curr'); $('#numbe').focus(); $('#numbe').blur();  
javascript中childNodes与children 区别 以及firstChild与firstElementChild区别
cherrybomb1111的博客
06-11 4011
1：childNodes属性: 标准的，它返回指定元素的子元素集合，包括html节点，所有属性，文本。可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。如果代码中有换行、空格就会增加文本节点，这样用它来返回真正的子节点就会不准确，具体见下面的例子。如果一定要用这个方法（毕竟他是W3C标准），就要增加一个判断子节点类型过程：
firstElementChild与firstChild区别
热门推荐
12-19 1万+
Element Traversal规范中的firstElementChild、lastElementChild、previousElementSibling、nextElementSibling、childElementCount属性 Element Traversal规范定义了ElementTraversal接口，它允许脚本遍历DOM树中的元素（element）节点，而不包含元素节点之外的
firstChild与firstElementChild
weixin_34124651的博客
03-09 1176
相同点： 都是获取父元素下的第一个节点对象 不同点： firstChild: IE6、7、8 第一个元素节点; 非IE6、7、8：返回第一个元素节点或文本节点 firstElementChild： IE6、7、8不支持；非IE6、7、8，获取第一个元素节点 <script type="text/javascript"> /** * @descrip...
firstChild和firstElementChild
fuxiaomi2016的博客
12-20 1021
第一个子节点
js firstchild
05-31
JavaScript中的`firstChild`属性返回指定节点的第一个子节点，如果指定节点没有子节点，则返回`null`。需要注意的是，`firstChild`属性返回的子节点可能是一个元素节点、文本节点或注释节点。如果要获取第一个元素...
JS——DOM操作（首尾子节点、兄弟节点【firstChild、previousSibling...】）
weixin_30263277的博客
05-28 605
（一）首尾子节点： 【首】：firstChild、 firstElementChild 【尾】：lastChild、 lastElementChild （首尾两个子节点，有两种写法，主要是因为兼容性问题） 详情看以下代码：　　（lastChild、 lastElementChild与之相同） 1 <!DOCTYPE html> 2 <html la...
JS前端知识点总结之页面加载事件，数组操作，DOM节点操作，循环和分支
10-16
- 孩子节点：使用 `firstChild`, `lastChild`（IE特有）或 `firstElementChild`, `lastElementChild`（标准兼容）来获取。 4. **循环和分支结构**： - 循环结构包括 `for` 循环，`while` 循环，`do...while` 循环...
原生JS之lastChild和lastElementChild、childNodes和children区别
骆小胖~
12-22 6312
（1）原生JS遍历时操作如下 childNodes 获取所有子节点（包括包括文本节点、注释节点即回车、换行、空格、文本等等） firstChild 获取第一个子节点（可以为注释节点） lastChild 获取最后一个子节点（与firstChild类似） parentNode 返回给定节点的父级节点 nextSibling 返回给定节点的下一个节点 previousSibling 返回给定节点的上一个节点 注意：上面写法是IE8之前旧版本写法，也可以在I
DOM | 节点操作
不爱吃菜的菜菜的博客
05-04 347
目录 为什么学节点操作 节点概述 节点层级 1. 父级节点 2. 子节点 parentNode.childNodes（标准） parentNode.children（非标准） parentNode.firstChild parentNode.lastChild parentNode.firstElementChild parentNode.lastElementChi...
firstChild、lastChild 和 firstElementChild、lastElementChild 的区别
webchang的博客
02-19 2857
firstChild、lastChild 和 firstElementChild、lastElementChild 的区别
firstChild与firstElementChild的兼容处理
道路是曲折的，前途是光明的
11-24 2931
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload=function(){ var oUl=document.getElementById(
FirstChildElement() http://baike.baidu.com/link?url=VdlvQlGU-NGLshFepuft_u3MRdjZ9CAfGhOYuL915Oo-9pb
诺尔曼
07-28 1344
FirstChildElement()编辑 本词条缺少概述、信息栏、名片图，补充相关内容使词条更完整，还能快速升级，赶紧来编辑吧！ FirstChildElement()用来获取子节点的元素。 对于XML文件,获取根元素： TiXmlElement* pTiXmlRootElem = pTiXmlDoc->RootElement(); TinyXML是基于树状结构
18. Element firstChild 属性
enlyhua的专栏
08-06 836
实例返回文档的首个子节点：document.firstChild;<!DOCTYPE html> <html> <body><p id="demo">请点击按钮来获得文档首个子节点的节点名。</p><button onclick="myFunction()">试一下</button><script> function myFunction() { var x=document.getElementB
JS中childNodes,firstChild,firstElementChild和children使用分析
wendZzoo的博客
10-25 2366
在JS中获取元素子节点时候，使用childNode()遇到了一些问题，找了一些资料总结如下。 首先，用于测试先规定好HTML： <div> <p> <span></span> <span></span> <span></span> &...
javascript中的firstchild
bofengshuimen700的专栏
05-27 8519
Microsotf Yahoo Easy W3c/Javascript Design|Source var container=document.getElementById("contain");
firstElementChild
weixin_30856725的博客
08-06 344
firstElementChild用于在高版本的浏览器中获取第一个子节点。在IE6-8中是不兼容的，他们应该用firstChild。在写的时候用一个if语句判断一下就好了。 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title&g...
js中firstChild与firstElementChild及childNodes与children的区别
qq_44731369的博客
02-17 2684
firstChild： 获取指定元素的第一个子节点 (包括元素节点和文本节点) 。 若父元素与第一个子元素之间存在空白节点，firstChild 获取到的将是空白节点而不是第一个子元素。这时可以使用 firstElementChild 属性 (IE6/7/8 中不支持)。 例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <met
element.firstChild
weixin_30544657的博客
04-15 232
摘要 返回当前元素第一个子元素, 如果元素没有子元素返回 null. 语法 childNode = node.firstChild; 如果node有子元素,childNode 是 node第一个子元素的引用, 否则为 null. 范例 这个例子示范使用 firstChild 和以及空白符结点会对使用此属性造成何种影响。参见 注意 部分获取 Gecko DOM 关于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值