JavaScript如何访问节点

访问节点的方法: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.firstChildnode.childNodes[node.childNodes.length-1]  = node.lastChild

登录后复制

【4】nextSibling 和 previousSibling

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

【5】ownerDocument

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

node.ownerDocument

登录后复制

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

document.documentElement

登录后复制

【相关推荐:javascript学习教程

以上就是JavaScript如何访问节点的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2711249.html

(0)
上一篇 2025年3月7日 21:01:34
下一篇 2025年2月18日 11:12:11

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • JavaScript继承的实现方法有哪些

    JavaScript继承的实现方法:1、利用构造原型模式;2、使用动态原型,根据面向对象的设计原则,类型的所有成员应该都被封装在类结构体内;3、使用工厂模式;4、使用类继承,即在子类中调用父类构造函数。 本教程操作环境:windows7系统…

    2025年3月7日
    200
  • javascript如何定义字符串

    方法:1、使用双引号或单引号包含任意长度的文本,例“”true””;2、使用String()类型函数构造字符串,语法“new String(“值”)”;3、使用fromCharCode()方法…

    2025年3月7日
    200
  • JavaScript也用import吗

    JavaScript中有import语句。import语句用于将某个模块中导出的函数或对象、初始值导入到另一个模块中;语法“import {模块名称} from “需要导入模块的路径名””。 本教程操作环境:wind…

    2025年3月7日
    200
  • JavaScript如何求最大值

    方法:1、使用“Math.max()”函数求最大值,可返回两个指定的数中带有较大的值的那个数;2、使用递归函数求最大值;3、使用for循环遍历求最大值;4、使用“Math.max.apply(null,[值,值,值,值..)”语句求最大值。…

    2025年3月7日
    200
  • JavaScript如何从控制台输出

    输出方法:1、使用“console.log(信息)”语句输出信息;2、使用“console.info(信息)”语句输出信息;3、使用“console.warn(警告)”语句输出警告信息;4、使用“console.error(信息)”语句。 …

    2025年3月7日
    200
  • javascript不使用new可以创建对象吗

    javascript不使用new运算符也可以创建对象,方法:1、使用“var objectName={属性名1:值1,属性名2:值2,…};”语句;2、使用“Object.create(原型对象,descriptors)”语句。…

    2025年3月7日
    200
  • JavaScript中的50+个实用工具函数(总结)

    javascript可以做很多出色的事情,本篇文章给大家整理50+个实用工具函数,可以帮助你提高工作效率并可以帮助调试代码!! 1、isStatic: 检测数据是不是除了symbol外的原始数据。【相关推荐:javascript学习教程】 …

    2025年3月7日
    200
  • 提高javascript开发速度和效率的20个小技巧

    提高javascript开发速度和效率在平时开发中位于一个很重要的地方,本篇文章给大家介绍一些日常任务中使用起来方便且实用的方法和小技巧,减少代码行数,提高工作效率,增加摸鱼时间。 在我们的日常任务中,我们需要编写函数,如排序、搜索、寻找惟…

    2025年3月7日
    200
  • 浅谈JavaScript中遍历数组和对象的几种常用方法

    数组和对象在各种编程语言中都充当着至关重要的角色,本篇文章给大家介绍一下javascript中常用数组遍历、对象遍历的方法和各方法间的差异,以及使用时的注意事项。 数组遍历 随着 JS  的不断发展,截至 ES7 规范已经有十多种遍历方法。…

    2025年3月7日
    200
  • javascript怎么实现禁止缩放

    javascript实现禁止缩放的方法:1、设置对应浏览器的启动参数来禁止用户缩放页面;2、设置meta来禁止用户缩放页面;3、通过js监听来禁止用户缩放页面;4、禁用“ontouchmove”事件;5、通过多点触摸手势库实现。 本文操作环…

    2025年3月7日
    200

发表回复

登录后才能评论