观看视频并完成这些互动式教程,即可了解使用 Chrome 开发者工具查看和更改页面 DOM 的基础知识。
本辅导手册假设您了解 DOM 和 HTML 之间的区别。有关说明,请参阅附录:HTML 与 DOM。
查看 DOM 节点
在 Element 面板的 DOM Tree 中,您可以在开发者工具中执行所有与 DOM 相关的活动。
检查节点
如果您对特定 DOM 节点感兴趣,可以通过 Inspect 这种快速打开开发者工具并调查该节点。
- 右键点击下方的米开朗基罗,然后选择检查。
- 米开朗基罗
- Raphael
开发者工具的 Elements 面板随即会打开。
<li>Michelangelo</li>
在 DOM 树中突出显示。
- 点击开发者工具左上角的检查图标。
点击下面的东京文字。
- 东京
贝鲁特
现在,
<li>Tokyo</li>
已在 DOM 树中突出显示。
检查节点也是查看和更改节点样式的第一步。请参阅查看和更改 CSS 使用入门。
使用键盘浏览 DOM 树
在 DOM 树中选择一个节点后,您可以使用键盘浏览 DOM 树。
右键点击下方的 Ringo,然后选择检查。在 DOM 树中选择
<li>Ringo</li>
。- George
- 飞环
- Paul
John
按向上箭头键 2 次。已选择“
<ul>
”。按向左键。
<ul>
列表会收起。再次按向左键。已选择
<ul>
节点的父节点。在本例中,它是包含第 1 步的说明的<li>
节点。按向下箭头键 3 次,以重新选择刚刚收起的
<ul>
列表。显示的内容应如下所示:<ul>...</ul>
按向右箭头键。系统会展开列表。
滚动到视野范围内
查看 DOM 树时,有时您会发现自己对当前不在视口内的 DOM 节点感兴趣。例如,假设您已滚动到页面底部,并且对页面顶部的 <h1>
节点感兴趣。Scroll into view 可让您快速调整视口位置,以便您可以看到节点。
右键点击下方的 Magritte,然后选择检查。
- 马格里特
- 南瓜
请参阅本页面底部的附录:滚动进入视图部分。 然后继续按说明操作。
完成页面底部的说明后,您应返回到此处。
显示标尺
通过视口上方和左侧的标尺,您可以在 Elements 面板中将鼠标悬停在某个元素上时,测量其宽度和高度。
您可以通过以下两种方式之一启用标尺:
- 按 Ctrl+Shift+P 或 Command+Shift+P (Mac) 打开 Command 菜单,输入
Show rulers on hover
,然后按 Enter。 - 依次选择 Settings > Preferences > Elements > 在光标悬停时显示标尺。
标尺的尺寸调整单位为像素。
搜索节点
您可以按字符串、CSS 选择器或 XPath 选择器搜索 DOM 树。
- 将光标放在元素面板上。
- 按 Ctrl+F 或 Command+F (Mac)。 搜索栏会在 DOM 树的底部打开。
输入
The Moon is a Harsh Mistress
。最后一个语句在 DOM 树中突出显示。
如上所述,搜索栏也支持 CSS 和 XPath 选择器。
Elements 面板会选择 DOM 树中的第一个匹配结果,并将其滚动至视口中的视图。默认情况下,系统会在您输入内容时执行此操作。如果您总是使用很长的搜索查询,则可以让开发者工具仅在按 Enter 键时运行搜索。
为避免在节点之间出现不必要的跳转,请清除 Settings > Preferences > Global > Search as your type 复选框。
编辑 DOM
您可以即时修改 DOM,看看这些更改对网页有何影响。
修改内容
要编辑节点的内容,请在 DOM 树中双击相应内容。
右键点击下方的 Michelle,然后选择检查。
- 薯条
- 小麦
在 DOM 树中,双击
Michelle
。也就是说,双击<li>
和</li>
之间的文本。文本以蓝色突出显示,表示其处于选中状态。删除
Michelle
,输入Leela
,然后按 Enter 键确认更改。上面的文本从“Michelle”更改为“Leela”。
修改属性
要修改属性,请双击属性名称或值。请按照以下说明了解如何向节点添加特性。
右键点击下方的 Howard,然后选择 Inspect。
- Howard
- 文斯
双击
<li>
。系统会突出显示文本,指示节点已被选中。按向右箭头键,添加一个空格,输入
style="background-color:gold"
,然后按 Enter。节点的背景颜色会变为金色。
您还可以使用右键点击修改属性选项。
修改节点类型
要修改节点类型,请双击该类型,然后输入新类型。
右键点击下方的 Hank,然后选择 Inspect。
- 院长
- 汉克
- 塔迪乌斯
- Brock
双击
<li>
。突出显示文本li
。删除
li
,输入button
,然后按 Enter 键。<li>
节点会更改为<button>
节点。
以 HTML 格式修改
要以 HTML 形式修改节点并突出显示语法和自动补全功能,请从节点的下拉菜单中选择以 HTML 形式修改。
右键点击下方的 Leonard,然后选择检查。
- 一分
- Howard
- 李杰
- Leonard
在元素面板中,右键点击当前节点,然后从下拉菜单中选择以 HTML 形式修改。
按 Enter 键另起一行,并输入
<l
。开发者工具会突出显示 HTML 语法并为您自动补全标签。从自动补全菜单中选择
li
元素,然后输入>
。开发者工具会自动在光标后面添加结束的</li>
标记。在标记内输入
Sheldon
,然后按 Ctrl / Command + Enter 应用更改。
复制节点
只需右键点击复制元素选项,便可复制元素。
右键点击下方的 Nana,然后选择 Inspect。
- 梳妆台篝火
- 娜娜
- 奥兰多
- 白噪音
在元素面板中,右键点击
<li>Nana</li>
,然后从下拉菜单中选择复制元素。返回页面。系统已立即复制该列表项。
您也可以使用键盘快捷键:Shift + Alt + 向下键(Windows 和 Linux)和 Shift + Option + 向下键 (MacOS)。
截取节点屏幕截图
您可以使用捕获节点屏幕截图来截取 DOM 树中的任何单个节点的屏幕截图。
右键点击此页面上的任意图片,然后选择检查。
在元素面板中,右键点击图片网址,然后从下拉菜单中选择截取节点屏幕截图。
屏幕截图将保存到您的下载内容中。
对 DOM 节点重新排序
拖动节点可对其重新排序。
右键点击下方的 Elvis Presley,然后选择检查。请注意,它是列表中的最后一项。
- 史蒂薇·旺德
- 汤姆·威兹
- 克里斯·泰尔
- 猫王
在 DOM 树中,将
<li>Elvis Presley</li>
拖动到列表顶部。
强制状态
您可以强制节点保持 :active
、:hover
、:focus
、:visited
和 :focus-within
等状态。
将鼠标悬停在下方的苍蝇之王上。背景颜色会变为橙色。
- 苍蝇之王
- 犯罪和惩罚
- 白鲸
右键点击上方的 The Lord of the Flies,然后选择 Inspect。
右键点击
<li class="demo--hover">The Lord of the Flies</li>
,然后依次选择 Force State > :hover。如果您未看到此选项,请参阅附录:缺少选项。 即使您实际上并未将鼠标悬停在节点上方,背景颜色仍会保持橙色。
隐藏节点
按 H 可隐藏节点。
右键点击下方的 The Stars My Destination,然后选择 Inspect。
- 基督山伯爵
- 《星光》,我的目的地
按 H 键。节点已隐藏。您也可以右键点击节点,然后使用隐藏元素选项。
再次按 H 键。系统会再次显示节点。
删除一个节点
按 Delete 可删除节点。
右键点击下方的 Foundation,然后选择 Inspect。
- 插图的人
- 透过望远镜
- 基本知识
按 Delete 键。节点会被删除。您也可以右键点击节点,然后使用删除元素选项。
按 Ctrl+Z 或 Command+Z (Mac)。 最后一项操作已撤消,节点会重新出现。
在控制台中访问节点
开发者工具提供了一些用于从控制台访问 DOM 节点或获取对它们的 JavaScript 引用的快捷方式。
使用 $0 引用当前选定的节点
检查节点时,节点旁边的 == $0
文本表示您可以在控制台中使用变量 $0
引用此节点。
右键点击下方的黑暗左手,然后选择检查。
- 黑暗的左手
- 沙丘
按 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。
- 大睡之乐
- 《The Long Goodbye》
右键点击 DOM 树中的
<li>The Big Sleep</li>
,然后选择存储为全局变量。如果您未看到此选项,请参阅附录:缺少选项。在控制台中输入
temp1
,然后按 Enter 键。表达式的结果表明,该变量的求值结果为相应节点。
复制 JS 路径
如果需要在自动测试中引用节点,请将 JavaScript 路径复制到节点。
右键点击下方的 The Brothers Karamazov,然后选择检查。
- 卡拉马佐夫兄弟
- 犯罪和惩罚
右键点击 DOM 树中的
<li>The Brothers Karamazov</li>
,然后依次选择 Copy > Copy JS Path。解析为节点的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 一样,但假设在 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 树中右键点击某个节点,然后从弹出的上下文菜单中选择一个选项。如果您没有在上下文菜单中看到指定的选项,请尝试右键点击节点文本。