博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS--JavaScript访问节点(childNodes、parentNode、firstChild、lastChild、nextSibling、previousSibling)
阅读量:2442 次
发布时间:2019-05-10

本文共 1854 字,大约阅读时间需要 6 分钟。

访问节点

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

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

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

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

nodeList对象实际上是基于DOM结构动态执行查询的结构,DOM结构的变化能够自动反映在nodeList对象中。因此,我们不能够以静态的方式处理nodeList对象。

示例:通过方括号,item()方法访问节点

			

标准BOM

这是一份简单的文档对象模型

  • D表示文档,HTML文档结构
  • O表示对象,文档结构的JavaScript脚本化映射
  • M表示模型,脚本与结构交互的方法和行为

提示:可以使用Array.prototype.slice()方法(IE8以后)把nodeList转换为数组,这样能够调用数组的相关方法。

var tag = document.getElementsByTagName("ul")[0]; //获取列表元素var a = Array.prototype.slice.call(tag.childNodes, 0);//转换为数组a.reverse();//逆序
parentNode

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

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

firstChild和lastChild

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

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

node.childNodes[0] = node.firstChildnode.childNodes[node.childNodes.length - 1] = node.lastChild
nextSibling和previousSibling

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

ownerDocument

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

node.ownerDocument

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

document.documentElement

上述反应节点关系的所有属性都是只读的,其中childNodes属性于其他属性相比更加方便,因为只须使用简单的关系指针,就可以通过它访问文档树种的任何节点。

另外,**hasChildNodes()方法可以检测是否包含子节点,返回true | false,比查询childNodes列表的length属性更简单、有效。

转载地址:http://dssqb.baihongyu.com/

你可能感兴趣的文章
linux gnome卡机_使用GNOME盒在Linux上轻松创建KVM虚拟机
查看>>
word定义标题样式级别_如何在Word 2013中添加和删除自定义标题标签
查看>>
前端时间轴的那根线_如何阻止人们在不取消友情的情况下在您的Facebook时间线上发布
查看>>
word域代码中添加空格_如何在Word 2013中自动添加两个空格
查看>>
word中有些字符不能显示_如何在Word中显示非打印字符
查看>>
如何在PlayStation 4或Pro上标记和共享屏幕截图
查看>>
如何在Android上设置多个用户个人资料
查看>>
如何在Eero Wi-Fi系统上转发端口
查看>>
word自动更正关闭_如何在OS X中关闭自动更正文本替换
查看>>
手机耳塞 录音同时外放_如何将Android手机切换为“单声道”(这样就可以戴一副耳塞)
查看>>
bug解决方法_巨大的macOS Bug允许没有密码的root登录。 解决方法
查看>>
笔记本后台静默录像_您如何在笔记本电脑上“静默”非HDD,非风扇相关的嗡嗡声?
查看>>
如何删除WhatsApp消息
查看>>
mac os文件创建和编辑_如何在OS X上创建和使用智能文件夹在Mac上组织数据
查看>>
roku能不能安装软件_如何在Roku上禁用自定义广告和跟踪
查看>>
gmail邮箱没收到邮件_如何在Gmail中静音会话(因此您不会收到通知)
查看>>
mac 无法安装 恶意软件_如何从Mac删除恶意软件和广告软件
查看>>
如何使用AMPPS在您的PC上本地安装Joomla
查看>>
手动启用调度_如何手动或自动启用Apple TV的暗模式
查看>>
mac 不受信任在哪里更改_什么是受信任的,为什么它可以在Mac上运行?
查看>>