在呈现的网页中，在“ 检查节点” 下，右键单击“ Michelangelo ”，然后选择“ 检查 ”。

此时将打开开发人员工具的“ 元素 ”工具。 <p>Michelangelo</p> 节点在 DOM 树 中突出显示。

单击 DevTools 左上角的“ 检查 ( ) ”图标。

在 “检查节点” 下，单击“ 东京 ”文本。 现在， <p>Tokyo</p> 节点在 DOM 树中突出显示。

检查节点也是查看和更改节点样式的第一步。 请参阅 开始查看和更改 CSS 。

使用键盘浏览 DOM 树

在 DOM 树中选择节点后，可以使用键盘导航 DOM 树。

在新窗口或选项卡中打开 DOM 示例 演示页。

在呈现的网页中，在“ 使用键盘导航 DOM 树 ”下，右键单击“ Ringo ”，然后选择“ 检查 ”。 <p>Ringo</p> 在 DOM 树中选择 。

按 向上键 两次。 <div> 处于选中状态。

按 向左键 。 <div> 列表会折叠。

再次按 向左键 。 <div> 节点的父节点已被选中。 在本例中，其 <section> ID navigate-the-dom-tree-with-a-keyboard-1 为 。

按 向下键 两次，以便重新选择 <div> 刚刚折叠的列表。

它应如下所示： <div>... </div>

按 向右键 。 列表将展开。

滚动到视图

查看 DOM 树时，你可能会发现自己对当前不在视区中的 DOM 节点感兴趣。 例如，假设你滚动到页面底部，并且你对页面顶部的 <h1> 节点感兴趣。 滚动到视图中 可快速重新定位视区，以便查看节点。

在新窗口或选项卡中打开 DOM 示例 演示页。

在呈现的网页中，在 “滚动到视图 ”下，右键单击“ Magritte ”，然后选择“ 检查 ”。

滚动到“DOM 示例”页面的底部。

仍应在 DOM 树中选择 <p>Magritte</p> 节点。 如果没有，请返回到“ 滚动到视图 ”，然后重新开始。

右键单击节点 <p>Magritte</p> ，然后单击“ 滚动到视图中 ”。 视区向上滚动以显示 Magritte 节点。 请参阅 附录： 如果未显示 “滚动到视图 ”选项，则缺少选项。

可以按字符串、CSS 选择器或 XPath 选择器搜索 DOM 树。

将光标焦点放在“ 元素 ”工具上。

按 Ctrl+F (Windows、Linux) 或 Command+F (macOS) 。 搜索栏在 DOM 树的底部打开。

类型 月亮是一个严酷的情妇 。 最后一句在 DOM 树中突出显示。

搜索栏还支持 CSS 和 XPath 选择器。

编辑 DOM

你可以动态编辑 DOM，并查看更改对页面的影响。

编辑文本内容

若要编辑节点的文本内容，请双击 DOM 树中的内容。

在新窗口或选项卡中打开 DOM 示例 演示页。

在呈现的网页中，在 “编辑内容” 下，右键单击“ Michelle ”，然后选择“ 检查 ”。

在 DOM 树中，双击 Michelle 。 换言之，双击 <p> 和 </p> 之间的文本。 此时将突出显示文本，表明该文本已被选中。

删除 Michelle ，键入 Leela ，然后按 Enter 确认更改。 DOM 中的文本从 Michelle 更改为 Leela 。

若要编辑属性，请双击属性名称或值。 按照说明了解如何向节点添加属性。

在新窗口或选项卡中打开 DOM 示例 演示页。

在呈现的网页中，在 “编辑属性” 下，右键单击“ Howard ”，然后选择“ 检查 ”。

双击 <p> 。 此时将突出显示文本，表示节点已被选中。

按 向右键 ，添加空格，键入 style="background-color:gold" ，然后按 Enter 。 节点的背景色将更改为金色。

编辑节点标记名称

若要编辑节点的标记名称，请双击标记名称，然后键入新的标记名称。

在新窗口或选项卡中打开 DOM 示例 演示页。

在呈现的网页中，在 “编辑节点标记名称” 下，右键单击“ Hank ”，然后选择“ 检查 ”。

双击 <p> 。 文本 p 将突出显示。

删除 p ，键入 button ，然后按 Enter 。 节点 <p> 将更改为 <button> 节点。

编辑多个节点、文本和属性

若要一次性更改多个节点的标记名称、文本内容或属性，可以使用 HTML 文本编辑器编辑 DOM 的一部分。

若要使用 HTML 编辑器，请执行以下操作：

在新窗口或选项卡中打开 DOM 示例 演示页。

在呈现的网页中，右键单击 “编辑内容”、“标记名称和属性” 部分，然后选择“ 检查 ”。

在 DOM 树中，右键单击节点并选择 <section id="edit-as-html-1"> “编辑为 HTML ”。 此时将显示 HTML 编辑器。

在 HTML 编辑器中键入要所做的更改，例如：

键入 Ctrl+Enter 以将更改应用于 DOM 树并关闭 HTML 编辑器。

对 DOM 节点重新排序

拖动节点以重新排序。

在新窗口或选项卡中打开 DOM 示例 演示页。

在呈现的网页中，在 “重新排序 DOM 节点 ”下，右键单击“ Elvis Presley ”，然后选择“ 检查 ”。

在 DOM 树中，将 <p>Elvis Presley</p> 拖动到列表顶部。

可以强制节点保持状态，包括 :active 、、 :hover :focus 、 :visited 和 :focus-within ：

在新窗口或选项卡中打开 DOM 示例 演示页。

在呈现的网页中，在 “强制状态 ”下，将鼠标悬停在 “苍蝇之主 ”上。 背景色变为橙色。

右键单击“ 苍蝇之主 ”，然后选择“ 检查 ”。

右键单击 ， <p class="demo--hover">The Lord of the Flies</p> 然后选择“ 强制状态 > ：悬停 ”。 请参阅附录：如果未显示选项， 则缺少选项 。 即使实际上未将鼠标悬停在节点上，背景色仍为橙色。

按 H 可隐藏节点，如下所示：

在新窗口或选项卡中打开 DOM 示例 演示页。

在呈现的网页中，在 “隐藏节点 ”下，右键单击“ 明星我的目标 ”，然后选择“ 检查 ”。

按键 H 。 节点处于隐藏状态。

再次按该 H 键。 节点将再次显示。

按 Delete 可删除节点，如下所示：

在新窗口或选项卡中打开 DOM 示例 演示页。

在呈现的网页中，在“ 删除节点” 下，右键单击“ 基础 ”，然后选择“ 检查 ”。

按 Delete 。 节点将被删除。

按 Ctrl+Z (Windows、Linux) 或 Command+Z (macOS) 。 最后一个操作将被撤消，节点将重新出现。

访问控制台中的节点

开发人员工具提供了从控制台访问 DOM 节点或获取每个节点的 JavaScript 引用的一些快捷方式。

使用 $0 引用当前选定的节点

检查节点时， == $0 节点旁边的文本意味着可以使用变量 $0 在控制台中引用此节点。

在新窗口或选项卡中打开 DOM 示例 演示页。

在呈现的网页中，在“ 以 $0 引用当前选择的节点 ”下，右键单击“ 黑暗的左手 ”，然后选择“ 检查 ”。

按 Esc 键打开控制台抽屉。

键入 $0 并按 Enter 。 表达式的结果显示 ， $0 计算结果为 <p>The Left Hand of Darkness</p> ：

将鼠标悬停在结果上。 节点在视区中突出显示。

单击“DOM 树” <p>Dune</p> ，再次键入 $0 “控制台”，然后再次按 Enter 。 现在， $0 计算结果为 <p>Dune</p> ：

存储为全局变量

如果需要多次引用某节点，请将其存储为全局变量。

在新窗口或选项卡中打开 DOM 示例 演示页。

在呈现的网页中，在“ 存储为全局变量 ”下，右键单击“ 大睡眠” ，然后选择“ 检查 ”。

右键单击 <p>The Big Sleep</p> DOM 树，然后选择“ 存储为全局变量 ”。 请参阅附录：如果未显示选项， 则缺少选项 。

在控制台中键入 temp1 ，然后按 Enter 。 表达式的结果显示变量的计算结果为节点。

复制 JS 路径

当你需要在自动测试中引用 JavaScript 路径时，请将其复制到节点。

在新窗口或选项卡中打开 DOM 示例 演示页。

在呈现的网页中，在 “复制 JS 路径 ”下，右键单击“ 兄弟卡拉马佐夫 ”，然后选择“ 检查 ”。

右键单击 <p>The Brothers Karamazov</p> DOM 树，然后选择“ 复制 > 复制 JS 路径 ”。 解析为节点的 document.querySelector() 表达式已复制到剪贴板。

按 Ctrl+V (Windows、Linux) 或 Command+V (macOS) 将表达式粘贴到控制台中。

按 Enter 计算表达式。

复制 JS 路径 表达式的结果：

中断 DOM 更改

开发人员工具使你可以在 JavaScript 修改 DOM 时暂停页面的 JavaScript。

中断属性修改

如果要暂停导致节点任何属性发生更改的 JavaScript，请使用属性修改断点。

在新窗口或选项卡中打开 DOM 示例 演示页。

在呈现的网页中，在 “属性修改中断 ”下，右键单击“ Sauerkraut ”，然后选择“ 检查 ”。

在 DOM 树中，右键单击 ， <p id="botm_target">Sauerkraut</p> 然后选择“在 属性修改 时 >中断”。 请参阅附录：如果未显示选项， 则缺少选项 。

单击“ 设置背景” 按钮。 这会将节点的 style 属性设置为 background-color:thistle 。 开发人员工具将暂停页面并突出显示导致属性发生更改的代码。

单击“ 恢复脚本 ( ) 以恢复 JavaScript 执行。

中断节点删除

如果要在删除特定节点时暂停，请使用节点删除断点。

在新窗口或选项卡中打开 DOM 示例 演示页。

在呈现的网页中，在 “删除节点时中断 ”下，右键单击“ 神经管理器 ”，然后选择“ 检查 ”。

在 DOM 树中，右键单击 ， <p id="target">Neuromancer</p> 然后选择“删除 节点 时 >中断”。 请参阅附录：如果未显示选项， 则缺少选项 。

单击上面的 “删除 ”按钮。 开发人员工具将暂停页面并突出显示导致节点被删除的代码。

选择 “恢复脚本 ” ( ) ”。

中断子树修改

在节点上放置子树修改断点后，在添加或删除节点的任何后代时，开发人员工具将暂停页面。

在新窗口或选项卡中打开 DOM 示例 演示页。

在呈现的网页中，在“ 子树修改的中断 ”下，右键单击“ 深处触发 ”，然后选择“ 检查 ”。

在 DOM 树中，右键单击 <div id="ul_target"> （即上面的 <p>A Fire Upon the Deep</p> 节点），然后选择“ 中断子 > 树修改 ”。 如果未显示 “子树修改” 命令，请参阅 附录：缺少选项 。

单击“ 添加子级 ”。 由于向列表中添加了 <p> 节点，因此代码将暂停。

选择 “恢复脚本 ” ( ) ”。

它涵盖了开发人员工具中与 DOM 相关的大部分功能。 可以通过右键单击 DOM 树中的节点并试用本教程中未介绍的其他选项来发现其余功能。 请参阅 “元素”面板键盘快捷方式 。

查看 DevTools 概述 ，了解可使用 DevTools 执行的其他所有操作。

附录：HTML 与 DOM

本部分介绍 HTML 和 DOM 之间的差异。

使用 Web 浏览器请求页面时，服务器将返回如下所示的 HTML 代码：

<!doctype html>
        <title>Hello, world!</title>
    </head>
        <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 创建对象树，如下所示：
        title
        script
表示页面内容的此对象或节点树称为 文档对象模型 (DOM) 。  现在 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 节点，并将另一个 p 节点添加到 DOM。  完整的 DOM 现在如下所示：
        title
        script
页面的 HTML 现在不同于其 DOM。  换句话说，HTML 表示初始页面内容，DOM 表示当前页内容。  当 JavaScript 添加、删除或编辑节点时，DOM 将与 HTML 不同。
有关详细信息 ，请参阅 DOM 简介 。
附录：缺少选项
本教程中的许多说明指示右键单击 DOM 树中的节点，然后从弹出的上下文菜单中选择一个选项。  如果在上下文菜单中未看到指定选项，请尝试右键单击节点文本，或单击 ... 节点左侧的按钮。
此页面的某些部分是根据 Google 创建和共享的作品所做的修改，并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。
原始页面 在此处 找到，由 凯斯·巴斯克 (技术作家、Chrome DevTools & Lighthouse) 创作。
 此作品根据 Creative Commons 署名 4.0 国际许可获得许可。