Chrome for Developer 第五章(Chrome 开发者工具中的 DOM 对象属性)

本文介绍了如何在开发者工具的元素面板中探索DOM节点的属性,包括自身属性的优先级、继承属性的追踪、过滤特定属性以及方法的识别。属性窗格的功能和特性有助于开发者更好地理解和管理网页元素。

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

在开发者工具的元素面板,我们可以选择任何DOM节点,然后转到属性标签页来查看该节点的属性。
动画.gif

自己的属性

在属性窗格中,可以看到对象自己的属性会被优先排序并以粗体显示,这有助于我们快速识别这些属性。
首先在代码中获取DOM节点;之后增加一些自定义属性
image.png
回到浏览器中,可以看到id为content元素自己的属性
image.png

继承属性

如果我们想要追踪一个继承的属性,比如size,我们可以通过展开对象的[[Prototype]]链来查找它的来源。这个过程可能需要我们展开多个嵌套的[[Prototype]],直到我们找到定义该属性的原始对象。
image.png

过滤

如果我们想要过滤特定的属性,可以在过滤条件文本框中输入属性的名称或值,这样可以快速定位到我们感兴趣的属性。
image.png
此外,属性窗格默认不显示值为null或undefined的属性,但我们可以通过选中“全部显示”来查看所有属性。
image.png

了解属性

属性窗格不仅显示简单的键值对属性,还显示对象和数组,以及与DOM节点对应的属性。后者以链接形式存在,点击这些链接可以在DOM树中定位到对应的节点。此外,属性窗格还区分了对象自己的属性(以粗体显示)和继承自原型链的属性(以常规字体显示)。这有助于我们理解属性的来源。
image.png

方法

方法在属性窗格中以f()标记,这些是我们可以调用的函数。
image.png
image.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

辰火流光

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值