js中childNodes与firstChild、lastChild

最新推荐文章于 2021-06-18 16:11:48 发布
最新推荐文章于 2021-06-18 16:11:48 发布
阅读量1.6k 收藏
点赞数
分类专栏： JS 文章标签： js childnode
本文介绍如何在JavaScript中利用DOM操作获取指定元素的文本内容。通过使用childNodes及firstChild属性，可以有效地访问到所需的文本节点。文章还讨论了在Firefox浏览器中处理空白节点的问题。

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

在JavaScript中，使用childNodes属性可以返回一个数组，这个数组包含给定元素节点的全体子节点，如代码所示:

01 <body>
02 <ul id="action">
03     <li title="第一段文字">第一个</li>
04     <li title="第二段文字">第二个</li>
05 </ul>
06 <script type="text/javascript">
07 var attr_p = document.getElementById("action");
08 alert(attr_p.childNodes[1].childNodes[0].nodeValue);
09 </script>
10 </body>

如果要取得id为action的ul的第一个li内的文本节点（如取得：第一个），可以使 用…childNodes[1].childNodes[0].nodeValue这种方法找到，使 用…childNodes[1].firstChild.nodeValue同样可以找到第一个li的文本节点，
结论childNodes[0]等价于firstChild，无论何时何地，重要需要访问childNodes[]数组的第一个元素，我们就可以把它写成firstChild，DOM还提供一个与之对应的lastChild属性。
需要注意的是，ff的空格节点问题，可以使用nodeType属性对节点类型判断，直到发现元素节点为止

JS中的children和childNodes，以及一道题目
weixin_43509051的博客
08-22 553
1. childNodes 属性 标准的，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本。可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。 2. children 属性， 非标准的，它返回指定元素的子元素集合。经测试，它只返回HTML节点，甚至不返回文本节点。且在所有浏览器下表现惊人的一致。和childNodes...
原生JS之lastChild和lastElementChild、childNodes和children区别
骆小胖~
12-22 6319
（1）原生JS遍历时操作如下 childNodes 获取所有子节点（包括包括文本节点、注释节点即回车、换行、空格、文本等等） firstChild 获取第一个子节点（可以为注释节点） lastChild 获取最后一个子节点（与firstChild类似） parentNode 返回给定节点的父级节点 nextSibling 返回给定节点的下一个节点 previousSibling 返回给定节点的上一个节点 注意：上面写法是IE8之前旧版本写法，也可以在I
js:childNodes与firstChild、lastChild
aokuijiang0440的博客
05-14 250
在JavaScript中，使用childNodes属性可以返回一个数组，这个数组包含给定元素节点的全体子节点，如代码所示: 平板视图打印？ 01 <body> 02 <ul id="action"> 03 <li title="第一段文字...
Js中childNode与children的区别
qq_43690370的博客
06-16 3634
childNodes: 标准的，它返回指定元素的子元素集合，包括html节点，所有属性，文本。可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。如果代码中有换行、空格就会增加文本节点，这样用它来返回真正的子节点就会不准确，具体见下面的例子。 除了IE9和Firefox，其他浏览器都支持通过childNodes[i]获取第i个子节点。 children: 非标准的，它返回指定元素的子元素集合。经测试，它只返回html节点，甚至不返回文本节点
注意：firstChild和lastChild
第三食堂
04-30 501
通过firstChild和lastChild获取往往是文本节点是因为在编写HTML时获取的是空格。。。。空格是文本字符。。。
JS--JavaScript访问节点（childNodes、parentNode、firstChild、lastChild、nextSibling、previousSibling）
吴声子夜歌的博客
09-25 3172
访问节点 通过节点之间的树形关系，可以定位文档中的每个节点。DOM为Node类型定义如下属性，以方便JavaScript对文档树中每个节点进行遍历。 ownerDocument：返回当前节点的根元素（document对象） parentNode：返回当前节点的父节点。所有的节点都仅有一个父节点 childNodes：返回当前节点的所有子节点的节点列表 firstChild：返回当前节点的首个子节...
JS使用parentNode和childNodes实现简单的商品表格计价
最新发布
12-18
因此，在实际操作中，我们可能需要使用firstChild和lastChild属性来精确获取目标子节点，或者使用children属性来仅获取元素节点。 通过以上步骤，我们可以利用JavaScript的基本DOM操作方法实现一个简单的商品价格...
深入理解JavaScript childNodes属性
- **标题**："js -- childNodes"，表明这个文件或博文着重讲解了JavaScript中的`childNodes`属性。 - **描述**：提到了博文链接`https://skyofdawn.iteye.com/blog/208281`，但并未给出具体的内容描述。基于标题，...
js-xml.rar_javascript_javascript xml_js xml_js解析xml_xml js
09-23
例如，使用`getElementsByTagName()`, `querySelector()`, `querySelectorAll()`等方法查找特定元素，`childNodes`, `firstChild`, `lastChild`等属性获取子节点，`innerHTML`, `textContent`等属性读写元素内容，`...
JS中出现的兼容性问题的总结.pdf
07-08
在IE6-8中，firstChild和lastChild获取的是第一个或最后一个元素节点，但在IE9+、Firefox和Chrome中，它们获取的是第一个或最后一个节点，可能是空白文本节点。为了兼容，我们可以使用firstElementChild和...
js获取元素下的第一级子元素的方法(推荐)
12-01
js childnodes获取的是所有的子元素，而我们实际要获取第一级子元素。 function getChildren(obj){ var objChild = [] ; var objs = obj.getElementsByTagName('*'); for(var i=0,j=objs.length; i<j;++i){ if(objs[i].nodeType != 1){alert(objs[i].nodeType); continue ; } var temp = objs[i][removed]; if(temp.no
js中childNodes易错点、详解定义以及用法
君莫笑
09-13 7125
js中childNodes易错点、详解定义以及用法 最近学习的时候，我遇到了childNodes的一些问题，我查阅了一些资料，总结一下其定义及用法。在学习childNodes之前，我们需要先了解一下DOM。 　　 DOM：文档对象模型，描绘了一个层次化的节点树，允许开发人员添加，删除，修改页面的某一部分。如下图文档对象模型图册所示： 　它包括5种节点类型如下： 节点类型 说明 值
childNodes和children，firstChild和firstElementChild，lastChild和lastElementChild的区别
weixin_46683645的博客
06-18 554
首先，我们给出HTML的代码 <ul id='city'> <li>北京</li> <li>南京</li> <li>东京</li> <li>南宁</li> </ul> <button id='btn'>点我</button> 一、childNodes和children的区别 先看看childNodes window.onload = function()
浅谈childNodes和children以及firstChild和firstElementChild
筱葭的博客
05-06 1916
1、childNodes属性： 返回指定元素的子节点集合，包括元素节点和文本节点。 除了IE9和Firefox，其他浏览器都支持通过childNodes[i]获取第i个子节点。   2、children属性： 返回指定元素的子元素集合，只包括元素节点，不包括文本节点。 除了IE9和Firefox，其他浏览器都支持通过children[i]获取第i个子节点。 注意：children在I
javascript中的firstchild
bofengshuimen700的专栏
05-27 8529
Microsotf Yahoo Easy W3c/Javascript Design|Source var container=document.getElementById("contain");
JS: lastChild innerHTML为undefined
qq_42689684的博客
03-25 757
问题描述 获取节点内容失败 <script type="text/javascript"> function checks(){ var tt=document.getElementById("myTable"); /*查找第二行第一个单元格内容*/ var s=tt.lastChild.innerHTML; alerrt(s); } </script> 原因...
JS教程:childNodes与parentNode
u010227447的专栏
10-19 889
如果你是高手，对于childNodes与parentNode并不陌生。其实他们就是DOM的两个特性/方法而以。 childNodes：表示对象的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性; parentNode：表示对象的父级节点。 当我解释完这两个方法以后，可能有人会问，他们有什么用，嘿嘿，当然有用，我们下面有一个例子来说明他们的作用。 如果我们有一个ul列表，
JS中的childNodes的兼容性问题
前端小菜鸟<(￣ˇ￣)/
10-31 1848
在DOM中每个节点都有一个childNodes属性，里面有一个NodeList的对象。它是一种类数组的对象，用于保存一组有序的节点，可以通过位置来访问这些节点。他是有length属性的，但不是Array的实例。那么怎么把他们变为数组呢？可以参考argument对象，使用Array.prototype.slice（）方法。但是在IE8及更早版本的浏览器的情况下，是需要手动枚举所有成员。下面记录一下通
原生js firstChild 获取元素的第一个节点兼容问题（需求获取元素节点）
HHH917的博客
04-21 4174
原生js firstChild 获取元素的第一个节点问题 firstChild 获取当前元素节点下的第一个子节点。 获取到的子节点可能是元素节点，但编程中更可能是注释节点或文本节点。 没有子节点则返回null 下面引用代码说明 下面代码我们需求是获取div的第一个子元素节点。但是结果返回的是文本节点，因为兼容问题， . 在IE9+和其他标准浏览器中，div与p之间的空白区域被...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值