查看 DOM 节点
Kayce Basques
Sofia Emelianova
观看视频并完成这些互动式教程，了解如何使用 Chrome 开发者工具查看和更改网页的 DOM。
本教程假定您了解 DOM 和 HTML 之间的区别。
如需复习，请参阅附录：HTML 与 DOM。
查看 DOM 节点
您可以在开发者工具的元素面板的 DOM 树中执行所有与 DOM 相关的活动。
检查节点
如果您对特定 DOM 节点感兴趣，可以使用检查快速打开开发者工具并调查该节点。
在以下列表中，右键点击 Michelangelo。从菜单中选择检查。
米开朗基罗
Raphael
系统会打开开发者工具的元素面板。
点击
选择元素。
从以下列表中选择 Tokyo。
东京
贝鲁特
DOM 树中突出显示了
检查节点也是查看和更改节点样式和 CSS 的第一步。
使用键盘浏览 DOM 树
在 DOM 树中选择节点后，您可以使用键盘浏览 DOM 树。
在以下列表中，右键点击 Ringo，然后选择检查。
在 DOM 树中选择
George
飞环
Paul
John
按向上箭头键 2 次。已选择“
- ”。
- 节点。
按 Down 箭头键 3 次，以便重新选择您刚刚收起的
- 列表。显示的内容应如图所示：
- 和 之间的文字。文字会以蓝色突出显示，表示已选中。
- 进行修改。文字会突出显示，表示该节点处于选中状态。
按向右箭头键，添加一个空格，输入 style="background-color:gold"，然后按 Enter 键。节点的背景颜色会变为金色。
修改节点类型
如需修改节点的类型，请双击该类型，然后输入新类型。
在以下列表中，右键点击 Hank，然后选择检查。
Dean
汉克
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 ，然后选择 Store as global variable。如果您找不到此选项，请参阅有关缺少选项的附录。
- The Brothers Karamazov ，然后依次选择复制 > 复制 JS 路径。已将解析为节点的 document.querySelector() 表达式复制到剪贴板。
- Magritte 节点应仍处于选中状态。如果不是，请返回到滚动到视图中并重新开始。
- Magritte 节点，然后选择滚动到视图中。
- ...
按向右箭头键。列表会展开。
滚动到视野范围内
查看 DOM 树时，有时您会发现自己对视口中没有的某个 DOM 节点感兴趣。例如，假设您滚动到页面底部，但对页面顶部的
节点感兴趣。借助滚动到视图中，您可以快速重新定位视口，以便查看节点。
右键点击下方的 Magritte，然后选择检查。
马格里特
Soutine
滚动到附录部分 Scroll into view，查看更多说明。
完成后，您应跳回本部分。
显示标尺
借助视口中的标尺，您可以在 Elements 面板中将光标悬停在某个元素上时，测量该元素的宽度和高度。
您可以通过以下两种方式之一启用标尺：
按 Ctrl+Shift+P 或 Command+Shift+P (macOS) 打开命令菜单，输入 Show rulers on hover，然后按 Enter 键。
检查设置
设置 > 偏好设置 > 元素 > 悬停时显示标尺。
标尺的尺寸单位是像素。
搜索节点
您可以通过字符串、CSS 选择器或 XPath 选择器搜索 DOM 树。
将光标置于元素面板上。
按 Ctrl+F 或 Command+F (macOS)。
搜索栏随即会在 DOM 树的底部打开。
输入 The Moon is a Harsh Mistress。DOM 树中突出显示了最后一句。
搜索栏还支持 CSS 和 XPath 选择器。
元素面板会在 DOM 树中选择第一个匹配的结果，并将其滚动到视口中。默认情况下，系统会在您输入时执行此操作。如果您始终使用较长的搜索查询，则可以使 DevTools 仅在您按 Enter 键时运行搜索。
为避免在节点之间进行不必要的跳转，请清除设置
设置 > 偏好设置 > 全局 > 边输入边搜索 复选框。
修改 DOM
您可以即时修改 DOM，并查看这些更改对网页有何影响。
修改内容
如需修改节点的内容，请双击 DOM 树中的相应内容。
在以下列表中，右键点击 Michelle，然后选择检查。
Fry
Michelle
在 DOM 树中，双击 Michelle。换句话说，双击
删除 Michelle，输入 Leela，然后按 Enter 键确认更改。文字从 Michelle 变为 Leela。
修改属性
如需修改属性，请双击属性名称或值。请按照以下说明了解如何向节点添加属性。
在以下列表中，右键点击 Howard，然后选择检查。
Howard
Vince
展开
- ，然后双击
在标记内输入 Sheldon，然后按 Control 或 Command + Enter 以应用更改。
复制节点
您可以使用右键点击选项复制元素来复制元素。
在以下列表中右键点击 Nana，然后选择检查。
虚荣的篝火
娜娜
奥兰多
白噪声
在元素面板中，右键点击
返回到相应页面。相应列表项已被复制。
您还可以使用以下键盘快捷键：Shift + Alt +向下键（Windows 和 Linux）和 Shift + Option + 向下键 (macOS)。
截取节点屏幕截图
您可以截取 DOM 树中任何单个节点的屏幕截图。
右键点击此页面上的任意图片，然后选择检查。
在元素面板中，右键点击图片网址，然后从下拉菜单中选择捕获节点屏幕截图。
屏幕截图会保存到您的“下载内容”文件夹中（Windows 和 macOS）。
如需了解详情，请参阅使用开发者工具截取屏幕截图的 4 种方式。
重新排序 DOM 节点
拖动节点即可重新排序。
右键点击下方的 Elvis Presley，然后选择检查。请注意，它是列表中的最后一项。
Stevie Wonder
汤姆·威兹
克里斯·泰尔
埃尔维斯·普雷斯利
在 DOM 树中，将
强制执行状态
您可以强制节点保持 :active、:hover、:focus、:visited 和 :focus-within 等状态。
将鼠标悬停在蝇王列表项上。背景颜色变为橙色。
The Lord of the Flies
《罪与罚》
《白鲸记》
右键点击蝇王列表项，然后选择检查。
右键点击
即使您实际上并未将鼠标悬停在节点上，背景颜色仍保持为橙色。
隐藏节点
按 H 键可隐藏节点。
在以下列表中，右键点击 The Stars My Destination，然后选择检查。
基督山伯爵
群星，我的归宿
按 H 键。相应节点已隐藏。您也可以右键点击相应节点，然后使用隐藏元素选项。
再次按 H 键。相应节点会再次显示。
删除一个节点
按 Delete 键可删除节点。
在以下列表中，右键点击 Foundation，然后选择检查。
纹身男
爱丽丝镜中奇遇记
基础
按 Delete 键。节点已删除。您也可以右键点击相应节点，然后使用删除元素选项。
按 Ctrl+Z 或 Command+Z (macOS)。
系统会撤消上次操作，相应节点会重新显示。
在控制台中访问节点
开发者工具提供了一些快捷方式，用于从控制台访问 DOM 节点或获取对这些节点的 JavaScript 引用。
使用 $0 引用当前所选节点
检查节点时，节点旁边的 == $0 文本表示您可以在控制台中使用变量 $0 引用此节点。
右键点击 The Left Hand of Darkness 列表项，然后选择检查。
黑暗的左手
沙丘
按 Escape 键打开控制台抽屉。您可能需要选择控制台才能打开它。
输入 $0，然后按 Enter 键。表达式的结果是 $0 的求值结果为
将光标悬停在结果上。节点在视口中突出显示。
在 DOM 树中点击
存储为全局变量
如果您需要多次引用某个节点，请将其存储为全局变量。
右键点击下方的夜长梦多，然后选择检查。
夜长梦多
The Long Goodbye
在 DOM 树中右键点击
在控制台中输入 temp1，然后按 Enter 键。表达式的结果表明，变量的计算结果为节点。点击相应节点即可展开列表项。
复制 JS 路径
复制节点的 JavaScript 路径，以便在自动化测试中引用该节点。
右键点击下方的卡拉马佐夫兄弟，然后选择检查。
卡拉马佐夫兄弟
《罪与罚》
在 DOM 树中右键点击
按 Ctrl+V 或 Command+V (macOS) 将表达式粘贴到控制台中。
按 Enter 键可对表达式求值。
在 DOM 更改时中断
借助开发者工具，您可以在 JavaScript 修改 DOM 时暂停网页的 JavaScript。
了解 DOM 更改断点。
后续步骤
这涵盖了开发者工具中与 DOM 相关的大部分功能。您可以右键点击 DOM 树中的节点，尝试本教程中未涵盖的选项，从而发现其余的选项。
继续阅读：
了解“元素”面板键盘快捷键。
请参阅更多开发者工具文档，了解您还可以使用开发者工具执行哪些操作。
加入 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。目前，DOM 和 HTML 中的对象是相同的。
假设 HTML 底部的 script.js 文件包含以下函数：
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 不同。
如需了解详情，请参阅 MDN 的 DOM 简介。
滚动到视野范围内
这是滚动到视图部分的延续。按照说明完成此部分。
右键点击
您的视口会向上滚动，以便您看到 Magritte 节点。
如果找不到滚动到视图，请了解缺失的选项。
缺少选项
本教程中的许多说明都要求您右键点击 DOM 树中的某个节点，然后从随即显示的上下文菜单中选择一个选项。如果您在上下文菜单中没有看到指定的选项，请尝试在节点文本之外的位置点击鼠标右键。
按向左箭头键。
- 列表会收起。
再次按向左箭头键。选择了
- 节点的父节点。在本例中，它是包含第 1 步说明的