Kayce Basques
Sofia Emelianova
观看视频并完成以下互动式教程，了解使用 Chrome 开发者工具查看和更改网页 DOM 的基础知识。
本教程假定您了解 DOM 和 HTML 之间的区别。如需了解说明，请参阅附录：HTML 与 DOM。
查看 DOM 节点
在 Elements 面板的 DOM 树中，您可以在 DevTools 中执行所有与 DOM 相关的活动。
检查节点
如果您对特定 DOM 节点感兴趣，可以使用检查功能快速打开 DevTools 并研究该节点。
点击下方的 Michelangelo 右键，然后选择 Inspect。
米开朗基罗
Raphael
此时，开发者工具的元素面板会打开。
DOM 树中突出显示了
点击开发者工具左上角的 Inspect 图标。
点击下方的 Tokyo 文本。
东京
贝鲁特
现在，DOM 树中突出显示了
检查节点也是查看和更改节点样式的第一步。请参阅CSS 查看和更改入门。
使用键盘浏览 DOM 树
在 DOM 树中选择某个节点后，您可以使用键盘浏览 DOM 树。
右键点击下方的 Ringo，然后选择 Inspect。在 DOM 树中选择了
George
飞环
Paul
John
按 Up 箭头键 2 次。已选择“
- ”。
- 节点。
按 Down（向下）箭头键 3 次，重新选择您刚刚收起的
- 列表。显示的内容应如图所示：
- 和 之间的文本。系统会以蓝色突出显示所选文字。
- 。系统会突出显示该文本，以指示该节点处于选中状态。
按 Right 箭头键，添加一个空格，输入 style="background-color:gold"，然后按 Enter 键。节点的背景颜色会变为金色。
您也可以使用右键点击选项中的修改属性。
修改节点类型
如需修改节点的类型，请双击该类型，然后输入新类型。
右键点击下方的 Hank，然后选择 Inspect。
Dean
Hank
Thaddeus
Brock
双击
- 。文本 li 突出显示。
删除 li，输入 button，然后按 Enter 键。
- 节点会更改为 标记。
- Nana ，然后从下拉菜单中选择复制元素。
- Elvis Presley 拖动到列表顶部。
- The Lord of the Flies ，然后依次选择 Force State > :hover。如果您没有看到此选项，请参阅附录：缺少选项。
- The Left Hand of Darkness 。
- Dune ，然后再次在控制台中输入 $0，然后再次按 Enter 键。现在，$0 的计算结果为
- Dune 。
- The Big Sleep ，然后选择存储为全局变量。如果您没有看到此选项，请参阅附录：缺少选项。
- The Brothers Karamazov ，然后依次选择复制 > 复制 JS 路径。系统已将解析为该节点的 document.querySelector() 表达式复制到您的剪贴板。
- Magritte 节点。如果没有，请返回滚动到视图并重新开始。
- Magritte 节点，然后选择滚动到视图中。视口会向上滚动，以便您查看 Magritte 节点。如果您没有看到滚动到视野范围内选项，请参阅附录：缺少选项。
- ...
按向右箭头键。此时列表会展开。
滚动到视野范围内
查看 DOM 树时，您有时会对当前不在视口中的 DOM 节点感兴趣。例如，假设您滚动到页面底部，并且对页面顶部的
节点感兴趣。借助滚动到视野范围内，您可以快速重新定位视口，以便查看节点。
右键点击下方的 Magritte，然后选择 Inspect。
Magritte
苏特
前往本页底部的附录：滚动到视野范围内部分。
请继续按照说明操作。
完成页面底部的说明后，您应该会跳转回此处。
显示标尺
在视口上方和左侧有标尺，当您在元素面板中将鼠标悬停在某个元素上时，可以测量该元素的宽度和高度。
您可以通过以下两种方式之一启用标尺：
按 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 选择器。
元素面板会选择 DOM 树中第一个匹配的结果，并将其滚动到视口中。默认情况下，系统会在您输入时显示建议。如果您总是使用长搜索查询，可以将开发者工具设置为仅在您按 Enter 键时运行搜索。
为避免在节点之间不必要地跳转，请清除设置 设置 > 偏好设置 > 全局 > 边输入边搜索复选框。
修改 DOM
您可以动态修改 DOM，并查看这些更改对网页有何影响。
修改内容
如需修改节点的内容，请在 DOM 树中双击相应内容。
右键点击下方的 Michelle，然后选择 Inspect。
炸
Michelle
在 DOM 树中，双击 Michelle。也就是说，双击
删除 Michelle，输入 Leela，然后按 Enter 键确认更改。上面的文字会从 Michelle 更改为 Leela。
修改属性
如需修改属性，请双击属性名称或值。请按照以下说明了解如何向节点添加属性。
右键点击下面的 Howard，然后选择 Inspect。
Howard
Vince
双击
在标记内输入 Sheldon，然后按 Control / Command + Enter 以应用更改。
复制节点
您可以使用右键点击选项中的复制元素复制元素。
右键点击下面的 Nana，然后选择 Inspect。
虚荣的篝火
Nana
奥兰多
白噪音
在元素面板中，右键点击
返回该页面。列表项已立即复制。
您还可以使用键盘快捷键：Shift + Alt + 向下键（Windows 和 Linux）和 Shift + Option + 向下键（macOS）。
截取节点屏幕截图
您可以使用当前节点屏幕截图功能截取 DOM 树中的任何单个节点的屏幕截图。
右键点击此页面上的任意图片，然后选择检查。
在元素面板中，右键点击图片网址，然后从下拉菜单中选择截取节点屏幕截图。
屏幕截图会保存到“下载内容”文件夹中。
如需了解使用 DevTools 截取屏幕截图的更多方法，请参阅4 种使用 DevTools 截取屏幕截图的方法。
重新排列 DOM 节点
拖动节点即可重新排序。
右键点击下方的 Elvis Presley，然后选择 Inspect。请注意，它是列表中的最后一项。
Stevie Wonder
Tom Waits
克里斯·泰尔
埃尔维斯·普雷斯利
在 DOM 树中，将
强制执行状态
您可以强制节点保持 :active、:hover、:focus、:visited 和 :focus-within 等状态。
将鼠标悬停在下方的《蝇王》上。背景颜色变为橙色。
《蝇王》
罪与罚
Moby Dick
右键点击上方的 The Lord of the Flies，然后选择 Inspect。
右键点击
即使您实际上并未将鼠标悬停在节点上，背景颜色也会保持橙色。
隐藏节点
按 H 可隐藏节点。
右键点击下方的 The Stars My Destination，然后选择 Inspect。
基督山伯爵
The Stars My Destination
按 H 键。节点处于隐藏状态。您也可以右键点击该节点，然后使用隐藏元素选项。
再次按 H 键。系统会再次显示该节点。
删除一个节点
按 Delete 可删除节点。
右键点击下方的 Foundation，然后选择 Inspect。
插图人
穿越魔镜
基础
按 Delete 键。节点已被删除。您也可以右键点击该节点，然后使用删除元素选项。
按 Control+Z 或 Command+Z（Mac）。
系统会撤消上一个操作，并重新显示该节点。
在控制台中访问节点
开发者工具提供了一些快捷方式，可用于从控制台访问 DOM 节点或获取对它们的 JavaScript 引用。
使用 $0 引用当前所选的节点
在您检查某个节点时，如果该节点旁边显示 == $0 文本，则表示您可以在控制台中使用变量 $0 引用此节点。
在下方点击右键黑暗的左手，然后选择检查。
黑暗的左手
沙丘
按 Escape 键打开控制台抽屉。
输入 $0 并按 Enter 键。表达式的结果显示 $0 的求值结果为
将光标悬停在相应结果上。视口中会突出显示该节点。
点击 DOM 树中的
存储为全局变量
如果您需要多次引用某个节点，请将其存储为全局变量。
在下方右键点击 The Big Sleep，然后选择 Inspect。
大睡觉
The Long Goodbye
在 DOM 树中右键点击
在控制台中输入 temp1，然后按 Enter 键。表达式的结果表明，该变量的求值结果为该节点。
复制 JS 路径
当您需要在自动化测试中引用 JavaScript 路径时，请将其复制到节点。
右键点击下方的 The Brothers Karamazov，然后选择 Inspect。
The Brothers Karamazov
罪与罚
在 DOM 树中右键点击
按 Control+V 或 Command+V (Mac) 将表达式粘贴到控制台中。
按 Enter 键对表达式求值。
在 DOM 更改时中断
借助开发者工具，您可以在 JavaScript 修改 DOM 时暂停网页的 JavaScript。请参阅 DOM 更改断点。
后续步骤
以上介绍了开发者工具中的大多数与 DOM 相关的功能。您可以通过右键点击 DOM 树中的节点，并尝试本教程中未介绍的其他选项，来探索其余选项。另请参阅“元素”面板键盘快捷键。
请访问 Chrome 开发者工具首页，了解您可以使用开发者工具执行的所有其他操作。
如果您想与 DevTools 团队联系或向 DevTools 社区寻求帮助，请参阅社区。
附录：HTML 与 DOM
本部分简要介绍了 HTML 和 DOM 之间的区别。
当您使用网络浏览器请求 https://example.com 等网页时，服务器会返回如下所示的 HTML：
Hello, world! Hello, world!
This is a hypertext document on the World Wide Web.
浏览器会解析 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 树中应仍选择
右键点击
附录：缺少选项
本教程中的许多说明都要求您右键点击 DOM 树中的某个节点，然后从弹出的上下文菜单中选择一个选项。如果您在上下文菜单中没有看到指定的选项，请尝试在离开节点文本后右键点击。
按向左键。
- 列表会收起。
再次按向左键。选择了
- 节点的父级。在本例中，它是包含第 1 步说明的