观看视频并完成这些互动式教程,了解使用 Chrome 开发者工具查看和更改页面 DOM 的基础知识。
本教程假定您了解 DOM 和 HTML 之间的区别。如需了解说明,请参阅附录:HTML 与 DOM。
查看 DOM 节点
在 Elements 面板的 DOM 树中,您可以在 DevTools 中执行所有与 DOM 相关的活动。
检查节点
如果您对特定 DOM 节点感兴趣,可使用 Inspect 快速打开开发者工具并调查该节点。
- 右键点击下方的 Michelangelo,然后选择 Inspect。
- 米开朗基罗
- Raphael
DevTools 的 Elements 面板随即打开。
DOM 树中突出显示了
<li>Michelangelo</li>
。
- 点击开发者工具左上角的 Inspect 图标。
点击下方的 Tokyo 文本。
- 东京
贝鲁特
现在,DOM 树中突出显示了
<li>Tokyo</li>
。
检查节点也是查看和更改节点样式的第一步。请参阅CSS 查看和更改入门。
使用键盘浏览 DOM 树
在 DOM 树中选择节点后,您可以使用键盘浏览 DOM 树。
右键点击下方的 Ringo,然后选择 Inspect。在 DOM 树中选择了
<li>Ringo</li>
。- George
- 飞环
- Paul
John
按 Up 箭头键 2 次。已选择“
<ul>
”。按向左键。
<ul>
列表会收起。再次按向左键。选择了
<ul>
节点的父级。在本例中,它是包含第 1 步说明的<li>
节点。按向下箭头键 3 次,即可重新选择刚刚收起的
<ul>
列表。显示的内容应如图所示:<ul>...</ul>
按向右箭头键。列表随即展开。
滚动到视野范围内
查看 DOM 树时,有时您会发现自己对当前不在视口中的 DOM 节点感兴趣。例如,假设您滚动到页面底部,并且对页面顶部的 <h1>
节点感兴趣。借助滚动到视野范围内,您可以快速重新定位视口,以便查看节点。
右键点击下面的 Magritte,然后选择 Inspect。
- Magritte
- 苏廷
前往本页底部的附录:滚动到视野范围内部分。 继续按照说明操作。
完成页面底部的说明后,您应该会跳转回此处。
显示标尺
借助视口上方和左侧的标尺,您可以在 Elements 面板中将鼠标悬停在元素上方,测量元素的宽度和高度。
您可以通过以下两种方式之一启用标尺:
- 按 Control+Shift+P 或 Command+Shift+P(在 Mac 上)打开命令菜单,输入
Show rulers on hover
,然后按 Enter 键。 - 依次点击 设置 > 偏好设置 > 元素 > 悬停时显示标尺。
标尺的尺寸单位是像素。
搜索节点
您可以按字符串、CSS 选择器或 XPath 选择器搜索 DOM 树。
- 将光标置于元素面板上。
- 按 Ctrl + F 或 Command + F (Mac)。 搜索栏会在 DOM 树底部打开。
输入
The Moon is a Harsh Mistress
。最后一个句子在 DOM 树中突出显示。
如上所述,搜索栏还支持 CSS 和 XPath 选择器。
Elements 面板会选择 DOM 树中的第一个匹配结果,并将其滚动至视口的视图中。默认情况下,系统会在您输入内容时执行此操作。如果您始终使用长搜索查询,则可以让开发者工具仅在按 Enter 键时运行搜索。
为避免在节点之间不必要地跳转,请清除
设置 > 偏好设置 > 全局 > 边输入边搜索复选框。修改 DOM
您可以即时修改 DOM,并查看这些更改对页面有何影响。
修改内容
如需修改节点的内容,请在 DOM 树中双击相应内容。
右键点击下方的 Michelle,然后选择 Inspect。
- 炸
- 小麦
在 DOM 树中,双击
Michelle
。也就是说,双击<li>
和</li>
之间的文本。系统会以蓝色突出显示所选文字。删除
Michelle
,输入Leela
,然后按 Enter 键确认更改。上面的文字会从 Michelle 更改为 Leela。
修改属性
如需修改属性,请双击属性名称或值。请按照以下说明了解如何向节点添加属性。
右键点击下面的 Howard,然后选择 Inspect。
- Howard
- Vince
双击
<li>
。文本将突出显示,表示已选择该节点。按 Right 箭头键,添加一个空格,输入
style="background-color:gold"
,然后按 Enter 键。节点的背景颜色会变为金色。
您也可以使用右键点击选项中的修改属性。
修改节点类型
要修改节点的类型,请双击相应类型,然后输入新类型。
右键点击下方的 Hank,然后选择 Inspect。
- Dean
- 汉克
- 塞迪斯
- Brock
双击
<li>
。文本li
突出显示。删除
li
,输入button
,然后按 Enter 键。<li>
节点会更改为<button>
节点。
以 HTML 格式修改
要通过突出显示语法和自动补全功能以 HTML 形式修改节点,请从相应节点的下拉菜单中选择以 HTML 形式修改。
右键点击下方的 Leonard,然后选择 Inspect。
- 一分
- Howard
- 李杰
- Leonard
在元素面板中,右键点击当前节点,然后从下拉菜单中选择以 HTML 形式修改。
按 Enter 键另起一行,然后开始输入
<l
。DevTool 会突出显示 HTML 语法并为您自动补全标记。从自动补全菜单中选择
li
元素,然后输入>
。开发者工具会在光标后面自动添加结束</li>
标记。在标记内输入
Sheldon
,然后按 Control/Command + Enter 以应用更改。
复制节点
您可以使用复制元素右键点击选项来复制元素。
右键点击下面的 Nana,然后选择 Inspect。
- 虚荣的篝火
- 娜娜
- 奥兰多
- 白噪音
在元素面板中,右键点击
<li>Nana</li>
,然后从下拉菜单中选择复制元素。返回该页面。列表项已立即复制。
您还可以使用键盘快捷键:Shift + Alt + 向下键(Windows 和 Linux)和 Shift + Option + 向下键(macOS)。
截取节点屏幕截图
您可以使用捕获节点屏幕截图来对 DOM 树中的任何单个节点进行屏幕截图。
右键点击此页面上的任意图片,然后选择检查。
在元素面板中,右键点击图片网址,然后从下拉菜单中选择截取节点屏幕截图。
屏幕截图将保存到下载内容中。
如需了解使用 Devtools 截取屏幕截图的更多方法,请参阅使用开发者工具截取屏幕截图的 4 种方式。
重新排列 DOM 节点
拖动节点以重新排序。
右键点击下方的 Elvis Presley,然后选择 Inspect。请注意,它是列表中的最后一项。
- Stevie Wonder
- 汤姆·威兹
- 克里斯·泰尔
- 埃尔维斯·普雷斯利
在 DOM 树中,将
<li>Elvis Presley</li>
拖动到列表顶部。
强制执行状态
您可以强制节点保持 :active
、:hover
、:focus
、:visited
和 :focus-within
等状态。
将鼠标悬停在下方的《蝇王》上。背景颜色变为橙色。
- 《蝇王》
- 罪与罚
- Moby Dick
右键点击上方的 The Lord of the Flies,然后选择 Inspect。
右键点击
<li class="demo--hover">The Lord of the Flies</li>
,然后依次选择 Force State > :hover。如果您没有看到此选项,请参阅附录:缺少选项。 即使您实际上并未将鼠标悬停在节点上,背景颜色也会保持橙色。
隐藏节点
按 H 可隐藏节点。
右键点击下方的 The Stars My Destination,然后选择检查。
- 基督山伯爵
- The Stars My Destination
按 H 键。节点处于隐藏状态。您也可以右键点击该节点,然后使用隐藏元素选项。
再次按 H 键。节点再次显示。
删除一个节点
按 Delete 可删除节点。
右键点击下方的 Foundation,然后选择 Inspect。
- 《画风人》
- 穿越魔镜
- 基础
按 Delete 键。节点已被删除。您也可以右键点击该节点,然后使用删除元素选项。
按 Control+Z 或 Command+Z(Mac)。 系统会撤消上一个操作,并重新显示该节点。
在控制台中访问节点
开发者工具提供了一些快捷方式,可用于从控制台中访问 DOM 节点或获取对它们的 JavaScript 引用。
使用 $0 引用当前选定的节点
在您检查某个节点时,如果该节点旁边显示 == $0
文本,则表示您可以在控制台中使用变量 $0
引用此节点。
右键点击下方的 The Left Hand of Darkness,然后选择检查。
- 黑暗左手
- 沙丘
按 Escape 键打开“控制台”抽屉。
输入
$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,然后选择检查。
- 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 开发者工具首页,了解您可以使用开发者工具执行的所有其他操作。
如果您想与 DevTools 团队联系或向 DevTools 社区寻求帮助,请参阅社区。
附录: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>
节点,然后选择滚动到视图中。您的视口会向上滚动,以便您可以看到 Magritte 节点。如果您没有看到“滚动到视图”选项,请参阅附录:缺少选项。
附录:缺少选项
本教程中的许多说明都指示您右键点击 DOM 树中的节点,然后从弹出的上下文菜单中选择一个选项。如果您在上下文菜单中没有看到指定的选项,请尝试在离开节点文本后右键点击。