firstChild和firstElementChild的区别

最新推荐文章于 2023-09-07 14:12:21 发布
最新推荐文章于 2023-09-07 14:12:21 发布
阅读量3.7k 收藏 3
点赞数 4
分类专栏： js 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/learner_boy/article/details/72188691
版权

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

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

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

比如空格和换行都被当做文本节点。
Timdan
关注
  • 4
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Js中节点的遍历和操作
11-22
- 创建新元素：`oH1`和`oP`是通过`document.createElement`创建的`<h1>`和`<p>`元素，并用`innerHTML`属性设置其内容，然后使用`appendChild`添加到`<body>`中。 - 删除元素：通过`remove()`方法，当点击按钮时，...
javascript中的firstchild
bofengshuimen700的专栏
05-27 8404
Microsotf Yahoo Easy W3c/Javascript Design|Source var container=document.getElementById("contain");
巧用 firstElementChild
liuzijiang1123的专栏
04-24 2438
firstElementChild：是用于返回DOM对象的第一个子元素。 举个小例子了解一下： &lt;div&gt; &lt;p&gt;123&lt;/p&gt; &lt;p&gt;456&lt;/p&gt; &lt;/div&gt; var oDiv=document.getElementsByTagName("div")[0]; cons
firstElementChild与firstChild区别
12-19 1万+
Element Traversal规范中的firstElementChild、lastElementChild、previousElementSibling、nextElementSibling、childElementCount属性 Element Traversal规范定义了ElementTraversal接口，它允许脚本遍历DOM树中的元素（element）节点，而不包含元素节点之外的
JS DOM 编程复习笔记--父元素、子元素和兄弟元素（三）
小帅的编程笔记
10-19 1707
今天我们来复习DOM中的获取父元素、子元素和兄弟元素的API，它们主要有parentNode、firstChild、firstElementChild、lastChild、lastElementChild、childNodes、children、nextElementSibling、nextSibling、previousElementSibling、previousSibling等。 目录 获取父元素 - parentNode 获取子元素 -firstChild、firstElementChild
有关 :first-child的理解
热门推荐
师兄阿离的博客
10-29 2万+
最近在做项目，突然发现一个选择器非常特别，所以特意去了解了一下，下面把我自己所理解的意思写下来。 在W3School里面讲   ：first-child选择器用于选取属于其父元素的首个子元素的指定选择器。 我刚一看这个我也是看的迷迷糊糊，这讲的是什么意思，我把他理解成是他的第一个元素。然后就傻傻的的去测试，也不知道自己弄什么。然后出现了一些错误，下面我就一一例举有关：first-child的内...
JS前端知识点总结之页面加载事件，数组操作，DOM节点操作，循环和分支
10-16
- 孩子节点：使用 `firstChild`, `lastChild`（IE特有）或 `firstElementChild`, `lastElementChild`（标准兼容）来获取。 4. **循环和分支结构**： - 循环结构包括 `for` 循环，`while` 循环，`do...while` 循环...
谈谈JS中常遇到的浏览器兼容问题和解决方法
10-20
类似地，获取第一个子元素节点，可以使用`firstElementChild`（非IE678支持）和`firstChild`（IE678支持）。为了解决这些问题，我们可以编写兼容性函数，如下所示： ```javascript function nextnode(obj) { ...
JS获取子节点、父节点和兄弟节点的方法实例总结
10-18
4. firstChild和lastChild属性分别可以获取到第一个和最后一个子节点。但需要注意的是，它们可能指向的是换行或空格这样的空白节点，因此在实际应用中，使用firstElementChild和lastElementChild属性是更为可靠的...
firstChild、lastChild 和 firstElementChild、lastElementChild 的区别
webchang的博客
02-19 2511
firstChild、lastChild 和 firstElementChild、lastElementChild 的区别
firstChild与firstElementChild
weixin_34124651的博客
03-09 1109
相同点： 都是获取父元素下的第一个节点对象 不同点： firstChild: IE6、7、8 第一个元素节点; 非IE6、7、8：返回第一个元素节点或文本节点 firstElementChild： IE6、7、8不支持；非IE6、7、8，获取第一个元素节点 <script type="text/javascript"> /** * @descrip...
js和jQuery知识点
m0_45252287的博客
12-13 155
JS和JQuery基础
js中firstChild与firstElementChild及childNodes与children的区别
qq_44731369的博客
02-17 2430
firstChild： 获取指定元素的第一个子节点 (包括元素节点和文本节点) 。 若父元素与第一个子元素之间存在空白节点，firstChild 获取到的将是空白节点而不是第一个子元素。这时可以使用 firstElementChild 属性 (IE6/7/8 中不支持)。 例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <met
C++ tinyxml TiXmlElement->FirstChildElement()读不到数字节点
qq_30722721的博客
11-30 3383
场景描述： 环境：VS2015 使用tinyxml读取xml时，某一级节点名为3Axis,发现读取不到。 原因： 查找许久仍找不到问题所在，最后怀疑是数字开头的问题。 于是把3改成three后，就能读取到节点！ 经过多次测试，TiXmlElement节点的值不能是数字开头，其他中文，英文都可以..... 但为什么不能是数字呢，敬请大家解答。 ...
javascript中childNodes与children 区别 以及firstChild与firstElementChild区别
cherrybomb1111的博客
06-11 3917
1：childNodes属性: 标准的，它返回指定元素的子元素集合，包括html节点，所有属性，文本。可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。如果代码中有换行、空格就会增加文本节点，这样用它来返回真正的子节点就会不准确，具体见下面的例子。如果一定要用这个方法（毕竟他是W3C标准），就要增加一个判断子节点类型过程：
FirstChildElement() http://baike.baidu.com/link?url=VdlvQlGU-NGLshFepuft_u3MRdjZ9CAfGhOYuL915Oo-9pb
诺尔曼
07-28 1252
FirstChildElement()编辑 本词条缺少概述、信息栏、名片图，补充相关内容使词条更完整，还能快速升级，赶紧来编辑吧！ FirstChildElement()用来获取子节点的元素。 对于XML文件,获取根元素： TiXmlElement* pTiXmlRootElem = pTiXmlDoc->RootElement(); TinyXML是基于树状结构
Javascript：节点的操作与Style、事件
Golden_soft的专栏
06-01 1451
               javaScript操作节点(Element)firstElementChild跟firstChild的区别在于，有Element代表元素，firstElementChild是元素选择器，非元素他是不会选择到的，如文本节点之类的。而firstChild是所有都选择所有节点，包括文本。注意：IE8以上的不支持元素选择器。一、常用方法：            元素对象.p...
first-child与first-of-type的区别（建议使用first-of-type）
最新发布
不要和代码过不去
09-07 598
first- of-type匹配的是该类型的第一个元素，类型就是指冒号前面匹配到的元素，并不限制是第一个子元素，只要是该类型元素的第一个即可。当然，这些元素的范围都属于同一级，也就是同辈。first-child匹配的是父元素的第一个子元素，可以说是结构上的第一个子元素。
JS-firstChild,firstElementChild,lastChild,firstElementChild,nextSibling,nextElementSibling
a2273490的博客
11-12 421
<body> <ul id="ul1"> <li>11111</li> <li>22222</li> <li>33333</li> <li>44444</li> </ul&g...
js firstchild
05-31
JavaScript中的`firstChild`属性返回指定节点的第一个子节点，如果指定节点没有子节点，则返回`null`。需要注意的是，`firstChild`属性返回的子节点可能是一个元素节点、文本节点或注释节点。如果要获取第一个元素节点，可以使用`firstElementChild`属性。以下是一个例子： ```html <div id="myDiv"> <p>Hello World!</p> <p>How are you?</p> </div> ``` ```javascript const myDiv = document.getElementById("myDiv"); const firstChild = myDiv.firstChild; // 返回第一个子节点，即文本节点 const firstElementChild = myDiv.firstElementChild; // 返回第一个元素节点，即第一个<p>元素 ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值