首页 > web前端 > js教程 > 正文

JavaScript如何访问节点

青灯夜游
发布: 2021-06-23 16:55:41
原创
3963人浏览过
访问节点的方法:1、使用ownerDocument属性;2、使用parentNode属性;3、使用childNodes属性;4、使用firstChild属性;5、使用lastChild属性;6、使用nextSibling属性等。

JavaScript如何访问节点

本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

通过节点之间的树形关系,我们可以定位文档中每个节点。DOM 为 Node 类型定义如下属性,以方便 JavaScript 对文档树中每个节点进行遍历。

  • ownerDocument:返回当前节点的根元素(document 对象)
  • parentNode:返回当前节点的父节点。所有的节点都仅有一个父节点
  • childNodes:返回当前节点的所有子节点的节点列表
  • firstChild:返回当前节点的首个子节点
  • lastChild:返回当前节点的最后一个子节点
  • nextSibling:返回当前节点之后相邻的同级节点
  • previousSibling:返回当前节点之前相邻的同级节点

【1】childNodes

每个节点都有一个 childNodes 属性,该属性保存着一个 nodeList 对象,它表示所有子节点的列表。

立即学习Java免费学习笔记(深入)”;

nodeList 是一种类数组对象,用于保存一组有序的节点,用户可以通过下标位置来访问这些节点。虽然 childNodes 可以通过方括号语法来访问 nodeList 的值,而且 childNodes 对象包含一个 length 属性,它表示列表包含子节点的个数(长度),但 childNodes 并不是数组,不能够直接调动数组的方法。

【2】parentNode

每个节点都有一个 parentNode 属性,该属性指向文档树中的父节点。包含在 childNodes 列表中的所有节点都具有相同的父节点,因此它们的 parentNode 属性都指向同一个节点。

parentNode 属性返回节点永远是一个元素类型节点,因为只有元素节点才可能包含子节点。不过 document 节点没有父节点,document 节点的 parentNode 属性将返回 null。

【3】firstChild 和 lastChild

firstChild 属性返回第一个子节点,lastChild 属性返回最后一个子节点。文本节点和属性节点的 firstChild 和 lastChild 属性返回值总是为 null。

注意:firstChild 等价于 childNodes 的第一个元素,lastChild 属性值等价于 childNodes 的最后一个元素。

node.childNodes[0] = node.firstChild
node.childNodes[node.childNodes.length-1]  = node.lastChild
登录后复制

【4】nextSibling 和 previousSibling

nextSibling 属性返回下一个相邻节点,previousSibling 属性返回上一个相邻节点。如果没有同属一个父节点的相邻节点,则它们将返回 null。

【5】ownerDocument

在 DOM 文档树中,可以使用 ownerDocument 属性访问根节点。

node.ownerDocument
登录后复制

通过每个节点的 ownerDocument 属性,我们可以不必通过层层回溯的方式到达顶端,而是可以直接访问文档节点。另外,用户也可以使用下面方式访问根节点。

document.documentElement
登录后复制

【相关推荐:javascript学习教程

以上就是JavaScript如何访问节点的详细内容,更多请关注php中文网其它相关文章!

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号