js中childNodes与firstChild、lastChild

最新推荐文章于 2024-05-13 13:37:50 发布
最新推荐文章于 2024-05-13 13:37:50 发布
阅读量1.6k 收藏
点赞数
分类专栏： JS 文章标签： js childnode

在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属性对节点类型判断，直到发现元素节点为止

_Chris
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
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 6642
js中childNodes易错点、详解定义以及用法 最近学习的时候，我遇到了childNodes的一些问题，我查阅了一些资料，总结一下其定义及用法。在学习childNodes之前，我们需要先了解一下DOM。 　　 DOM：文档对象模型，描绘了一个层次化的节点树，允许开发人员添加，删除，修改页面的某一部分。如下图文档对象模型图册所示： 　它包括5种节点类型如下： 节点类型 说明 值
childNodes 详解
最新发布
思索的涟漪，突破自我
05-13 368
在JavaScript中，childNodes是一个属性，属于Node对象，它返回一个NodeList对象，其中包含了指定Node对象下所有类型的子节点。这些子节点可以是元素节点（Element）、文本节点（Text）、注释节点（Comment）等。
js:childNodes与firstChild、lastChild
aokuijiang0440的博客
05-14 210
在JavaScript中，使用childNodes属性可以返回一个数组，这个数组包含给定元素节点的全体子节点，如代码所示: 平板视图打印？ 01 <body> 02 <ul id="action"> 03 <li title="第一段文字...
js中firstChild和childNodes[0]以及children[0]之间的点滴问题
走在前端
03-11 6948
示例： js中firstChild和childNodes[0]以及children[0]之间的点滴问题 pppppppppppppppp window.onload = function() { if (!document.getElementById("div1")) return false; var
原生JS之lastChild和lastElementChild、childNodes和children区别
骆小胖~
12-22 6093
（1）原生JS遍历时操作如下 childNodes 获取所有子节点（包括包括文本节点、注释节点即回车、换行、空格、文本等等） firstChild 获取第一个子节点（可以为注释节点） lastChild 获取最后一个子节点（与firstChild类似） parentNode 返回给定节点的父级节点 nextSibling 返回给定节点的下一个节点 previousSibling 返回给定节点的上一个节点 注意：上面写法是IE8之前旧版本写法，也可以在I
Js中节点的遍历和操作
11-22
- 在示例中，`document.body.firstChild.innerHTML`尝试获取body的第一个子节点的innerHTML，但由于body的第一个子节点是文本节点，所以输出为`undefined`。而`document.body.firstElementChild.innerHTML`则返回了...
学习JS中的DOM节点以及操作
12-09
在JavaScript中，DOM（Document Object Model）是一种标准，用于表示HTML或XML文档的结构，并提供了对文档内容进行编程访问的方法。DOM操作对于网页动态化至关重要，它可以让我们改变页面元素、添加新元素、删除元素...
JavaScript获取select中text值的方法
10-20
4. **遍历节点**：`element.childNodes`、`element.firstChild`、`element.lastChild`等属性可以用来遍历元素的子节点。 5. **DOM操作**：`createElement`、`appendChild`、`removeChild`等方法用于动态创建、添加...
了解javascript中的Dom操作
12-03
例如，`parentNode`属性可以用来获取当前结点的父结点，而`firstChild`和`lastChild`分别表示父结点的第一个和最后一个子结点。`childNodes`数组包含了所有子结点，包括文本和空格等。此外，`nextSibling`和`...
js中DOM文档对象学习代码
08-28
- `firstChild` / `lastChild`：获取第一个或最后一个子节点。 - `nextSibling` / `previousSibling`：获取当前节点的下一个或上一个兄弟节点。 6. **CSS操作**： - `style`属性：可以用来读取和设置元素的内联...
js中children和childNodes的区别
Hubery_sky的博客
05-17 880
但它只返回HTML节点，甚至不返回文本节点，虽然不是标准的DOM属性，但它和innerHTML方法一样，得到了几乎所有浏览器的支持。可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。这里需要注意的是children在IE6/7/8中包含注释节点 IE9不包括注释节点。：标准属性，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点。：非标准属性，它返回指定元素的子元素集合。
childNodes和children，firstChild和firstElementChild，lastChild和lastElementChild的区别
weixin_46683645的博客
06-18 488
首先，我们给出HTML的代码 <ul id='city'> <li>北京</li> <li>南京</li> <li>东京</li> <li>南宁</li> </ul> <button id='btn'>点我</button> 一、childNodes和children的区别 先看看childNodes window.onload = function()
33.关于childnodes和firstchildnode属性（父节点）
qq_53630069的博客
09-16 180
1.它可以获取大节点中的小节点 举例 最后显示结果是9 这是为什么呢？ 因为它两个元素节点之间的空格也算成了node 但是，需要注意的是，如果浏览器版本是IE8及以下，则检测不出来空白 而与之对应的，firstchildnode是获取的子元素节点中的第一个元素 ...
浅谈childNodes和children以及firstChild和firstElementChild
筱葭的博客
05-06 1818
1、childNodes属性： 返回指定元素的子节点集合，包括元素节点和文本节点。 除了IE9和Firefox，其他浏览器都支持通过childNodes[i]获取第i个子节点。   2、children属性： 返回指定元素的子元素集合，只包括元素节点，不包括文本节点。 除了IE9和Firefox，其他浏览器都支持通过children[i]获取第i个子节点。 注意：children在I
JS中的childNodes节点
syl2850246的博客
09-22 985
在JS中使用childNodes节点的时候，它不仅会把标签算作一个子元素，而且它也会把标签与标签之间的空格或回车当作一个子元素(文本节点)。
javascript笔记
weixin_52453969的博客
05-27 739
js执行机制 1.先执行执行栈中的同步任务 2.异步任务（回调函数）放入任务队列中 3一旦执行栈中的所有同步任务执行完毕，系统聚会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行 同步和异步 同步任务 同步任务都在主线程上执行，形成一个执行栈 异步任务 js的异步是通过回调函数实现的 异步任务有以下三种类型 1普通事件，如click、resize等 2资源加载，如load、error等 3定时器，包括setIntterval、setTimeout等 由于主线程不断的..
js-获取子节点--具体节点调用
weixin_47295886的博客
10-24 1181
获取包括文本节点的所有子节点___其中空白节点也会作为文本节点---------注意ie8下面不会讲空白节点作为子节点。调用getElementsByTagName=======返回当前节点的指定标签名后代节点。children：获取当前节点所有的子元素——子元素只有标签：不包括文本节点。childNodes---当前节点的所有子节点。firstChild--当前节点的第一个子节点。lastChild--当前节点的最后一个子节点。
JS--JavaScript访问节点（childNodes、parentNode、firstChild、lastChild、nextSibling、previousSibling）
吴声子夜歌的博客
09-25 2973
访问节点 通过节点之间的树形关系，可以定位文档中的每个节点。DOM为Node类型定义如下属性，以方便JavaScript对文档树中每个节点进行遍历。 ownerDocument：返回当前节点的根元素（document对象） parentNode：返回当前节点的父节点。所有的节点都仅有一个父节点 childNodes：返回当前节点的所有子节点的节点列表 firstChild：返回当前节点的首个子节...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值