请观看视频并完成这些互动式教程,以了解观看 使用 Chrome 开发者工具更改页面的 DOM。
本教程假定您了解 DOM 与 HTML 之间的区别。请参阅 附录:HTML 与 DOM,了解相关说明。
查看 DOM 节点
通过 Elements 面板的 DOM 树,您可以在开发者工具中执行所有与 DOM 相关的活动。
检查节点
如果您对特定 DOM 节点感兴趣,可使用 Inspect 快速打开开发者工具 并调查该节点
- 右键点击下方的米开朗基罗,然后选择检查。
- 米开朗基罗
- 拉斐尔
系统将打开开发者工具的 Elements 面板。
<li>Michelangelo</li>
在 DOM 树中处于突出显示状态。
- 点击页面左上角的 Inspect 图标,
开发者工具。
点击下面的东京文字。
- 东京
贝鲁特
现在,
<li>Tokyo</li>
在 DOM 树中突出显示。
检查节点也是查看和更改节点样式的第一步。 请参阅开始查看和更改 CSS。
使用键盘浏览 DOM 树
在 DOM 树中选择节点后,您可以使用 键盘。
右键点击下方的 Ringo,然后选择 Inspect。已选择“
<li>Ringo</li>
” DOM 树- George
- 飞环
- Paul
John
按向上箭头键两次。已选择“
<ul>
”。按向左箭头键。
<ul>
列表会收起。再次按向左箭头键。
<ul>
节点的父级 。在本例中,它是包含第 1 步说明的<li>
节点。按向下箭头键 3 次,即可重新选择
<ul>
展开的列表它应如下所示:<ul>...</ul>
按向右箭头键。此时,列表将会展开。
滚动到视图中
查看 DOM 树时,您有时会发现自己对某个 DOM 节点
当前不在视口中。例如,假设您滚动到
,而您对页面顶部的 <h1>
节点感兴趣。滚动到视野范围内
可让您快速调整视口位置,以便可以看到该节点。
右键点击下面的 Magritte,然后选择 Inspect。
- 马格里特
- 苏廷
转到本页底部的附录:滚动到视图部分。 继续按照说明操作。
按照页面底部的说明完成操作后,您应返回到此处。
显示标尺
利用视口上方和左侧的标尺,您可以在Elements面板中将鼠标悬停在某个元素上时,测量该元素的宽度和高度。
您可以通过以下两种方式之一启用标尺:
- 按 Ctrl+Shift+P 或 Command+Shift+P (Mac) 打开命令菜单,输入
Show rulers on hover
,然后按 Enter。 - 检查
设置 >偏好设置 >Elements >悬停时显示标尺。
标尺的尺寸单位是像素。
搜索节点
您可以按字符串、CSS 选择器或 XPath 选择器搜索 DOM 树。
- 将光标置于Elements面板上。
- 按 Ctrl+F 或 Command+F (Mac)。 搜索栏会在 DOM 树底部打开。
输入
The Moon is a Harsh Mistress
。最后一个句子在 DOM 树中突出显示。
如上所述,搜索栏还支持 CSS 和 XPath 选择器。
Elements 面板会选择 DOM 树中的第一个匹配结果,并将其滚动至视口的视图中。默认情况下,系统会在您输入内容时执行此操作。如果您始终使用长搜索查询,则可以让开发者工具仅在按 Enter 键时运行搜索。
为避免节点之间出现不必要的跳转,请清除 设置 >偏好设置 >全球 >即输即搜复选框。
修改 DOM
您可以即时修改 DOM,并查看这些更改对页面的影响。
修改内容
要修改节点的内容,请在 DOM 树中双击相应内容。
右键点击下方的 Michelle,然后选择检查。
- 炸
- 小麦
在 DOM 树中,双击
Michelle
。也就是说,双击<li>
和</li>
。文本将突出显示为蓝色,表示已选中。删除
Michelle
,输入Leela
,然后按 Enter 键确认更改。文字 将上述内容从 Michelle 更改为 Leela。
修改属性
要修改属性,请双击属性名称或值。按照说明操作 以了解如何为节点添加属性。
右键点击下方的 Howard,然后选择检查。
- Howard
- 文斯
双击
<li>
。这些文字会突出显示,表示 节点。按向右箭头键,添加空格,然后输入
style="background-color:gold"
,然后按 Enter 键。背景颜色 该节点就会变成金色
您还可以使用修改属性右键点击选项。
修改节点类型
要修改节点的类型,请双击相应类型,然后输入新类型。
右键点击下面的 Hank,然后选择检查。
- 院长
- 汉克
- Thaddeus
- Brock
双击
<li>
。文本li
处于突出显示状态。删除
li
,输入button
,然后按 Enter 键。<li>
节点会更改为<button>
。 节点。
以 HTML 格式修改
要通过突出显示语法和自动补全功能以 HTML 形式修改节点,请从相应节点的下拉菜单中选择以 HTML 形式修改。
右键点击下方的 Leonard,然后选择 Inspect。
- 一分
- Howard
- Rajesh
- Leonard
在Elements面板中,右键点击当前节点,然后从下拉菜单中选择Elements。
按 Enter 键另起一行,然后开始输入
<l
。开发者工具会突出显示 HTML 语法和自动补全标记。从自动补全菜单中选择
li
元素,然后输入>
。DevTools 会在光标后自动添加</li>
结束标记。在该标签内输入
Sheldon
,然后按 Ctrl / Command + Enter 即可应用更改。
复制节点
您可以使用复制元素右键点击选项来复制元素。
右键点击下面的 Nana,然后选择 Inspect。
- 化身篝火
- 娜娜
- 奥兰多
- 白噪音
在Elements面板中,右键点击
<li>Nana</li>
,然后从下拉菜单中选择Elements。返回该页面。列表项已立即复制。
您也可以使用键盘快捷键:Shift + Alt + 向下键(Windows 和 Linux)和 Shift + Option + 向下键 (MacOS)。
截取节点屏幕截图
您可以使用捕获节点屏幕截图来对 DOM 树中的任何单个节点进行屏幕截图。
右键点击此页面上的任意图片,然后选择检查。
在Elements面板中,右键点击图片网址,然后从下拉菜单中选择Elements。
屏幕截图将保存到下载内容中。
对 DOM 节点重新排序
拖动节点以重新排序。
右键点击下方的 Elvis Presley,然后选择检查。请注意,这是最后一项 。
- 史提夫·汪德
- 汤姆·威兹
- 克里斯·泰尔
- 埃尔维斯·普雷斯利
在 DOM 树中,将
<li>Elvis Presley</li>
拖动到列表顶部。
强制状态
您可以强制节点保持在 :active
、:hover
、:focus
、
:visited
和 :focus-within
。
将鼠标悬停在下方的苍蝇之王上。背景颜色将变为橙色。
- 苍蝇之王
- 犯罪与惩罚
- 《白鲸》
右键点击上方的 The Lord of the Fities,然后选择检查。
右键点击
<li class="demo--hover">The Lord of the Flies</li>
,然后选择 Force 状态 >:hover。如果您没有看到此选项,请参阅附录:缺少选项。 即使您实际上并未将鼠标悬停在该节点上,背景颜色仍然保持橙色。
隐藏节点
按 H 可隐藏节点。
右键点击下方的 The Stars My Destination,然后选择检查。
- 基督山伯爵
- 星光大道,我的目的地
按 H 键。节点已隐藏。您还可以右键点击节点并使用隐藏元素选项。
再次按 H 键。节点再次显示。
删除一个节点
按 Delete 可删除节点。
右键点击下面的基础,然后选择检查。
- 《画风人》
- 透过视镜
- 基础
按 Delete 键。该节点会被删除。您也可以右键点击节点,然后使用 Delete element 选项。
按 Ctrl+Z 或 Command+Z (Mac)。 最后一个操作将撤消,节点会重新出现。
在控制台中访问节点
DevTools 提供了一些快捷方式,以便您从控制台访问 DOM 节点,或获取 JavaScript 引用。
使用 $0 引用当前选定的节点
在检查某个节点时,该节点旁边的 == $0
文本表示您可以引用此
节点替换为 $0
。
右键点击下方的 The Left Hand of Darkness,然后选择检查。
- 黑暗左手
- 沙丘
按 Esc 键以打开控制台抽屉式导航栏。
输入
$0
,然后按 Enter 键。这个表达式的结果表明: “$0
”的计算结果为<li>The Left Hand of Darkness</li>
。将鼠标悬停在相应结果上。该节点会在视口中突出显示。
点击 DOM 树中的
<li>Dune</li>
,在控制台中再次输入$0
,然后按 重新按 Enter 键。现在,$0
的求值结果为<li>Dune</li>
。
存储为全局变量
如果您需要多次引用某个节点,请将其存储为全局变量。
右键点击下方的 The Big Sleep,然后选择 Inspect。
- 《大睡》
- 漫长的再见
右键点击 DOM 树中的
<li>The Big Sleep</li>
,然后选择 Store as global 变量。如果您没有看到此选项,请参阅附录:缺少选项。在控制台中输入
temp1
,然后按 Enter 键。表达式的结果 表示该变量的求值结果是该节点。
复制 JS 路径
如果需要在自动化测试中引用节点,请将 JavaScript 路径复制到该节点。
右键点击下方的 The Brothers Karamazov,然后选择检查。
- 卡拉马佐夫兄弟
- 犯罪与惩罚
右键点击 DOM 树中的
<li>The Brothers Karamazov</li>
,然后选择 复制 >复制 JS 路径。document.querySelector()
表达式可解析为 该节点已复制到剪贴板按 Ctrl+V 或 Command+V (Mac): 将表达式粘贴到控制台中
按 Enter 键对表达式求值。
中断 DOM 更改
借助开发者工具,您可以在 JavaScript 修改 DOM 时暂停页面的 JavaScript。 请参阅 DOM 更改断点。
后续步骤
以上介绍了开发者工具中大多数与 DOM 相关的功能。您可以在 方法是右键点击 DOM 树中的节点, 请参阅本教程中介绍的内容另请参阅“元素”面板的键盘快捷键。
查看 Chrome 开发者工具首页,探索所有内容 其他功能。
如果您想联系开发者工具团队,请参阅社区 或从开发者工具社区获取帮助。
附录:HTML 与 DOM
此部分将快速介绍 HTML 和 DOM 之间的区别。
当您使用网络浏览器请求 https://example.com
之类的页面时,服务器
会返回如下 HTML:
<!doctype html>
<html>
<head>
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is a hypertext document on the World Wide Web.</p>
<script src="/script.js" async></script>
</body>
</html>
浏览器解析 HTML 并创建对象树,如下所示:
html
head
title
body
h1
p
script
这种表示页面内容的对象树或节点树称为 DOM。 现在它看上去与 HTML 一样,但假设脚本在 运行以下代码:
const h1 = document.querySelector('h1');
h1.parentElement.removeChild(h1);
const p = document.createElement('p');
p.textContent = 'Wildcard!';
document.body.appendChild(p);
上述代码会移除 h1
节点并向 DOM 添加另一个 p
节点。现在,完整的 DOM 看起来
如下所示:
html
head
title
body
p
script
p
网页的 HTML 现在与其 DOM 不同。也就是说,HTML 表示 初始页面内容,而 DOM 代表当前页面内容。使用 JavaScript 添加、移除或编辑节点时,DOM 会不同于 HTML。
如需了解详情,请参阅 DOM 简介。
附录:滚动到视图
这是滚动到视图部分的延续。按照 以下说明来完成该部分。
- 在您的 DOM 树中,
<li>Magritte</li>
节点仍应处于选中状态。如果没有,请返回 滚动到视图中并重新开始。 右键点击
<li>Magritte</li>
节点,然后选择 Scroll into view。视口滚动次数 以便您可以看到 Magritte 节点。 如果您没有看到“滚动到视图”选项,请参阅附录:缺少选项。
附录:缺少选项
本教程中的许多说明都指示您在 DOM 树中右键点击某个节点 然后从弹出的上下文菜单中选择一个选项。如果没有看到 选项,请尝试右键点击该节点文本。