开始查看和更改 DOM

若要了解使用 Microsoft Edge DevTools 查看和更改 页面的文档对象模型 (DOM) 的基础知识，请按照这些交互式教程部分操作。

若要了解 DOM 和 HTML 之间的差异，请参阅下面的 附录：HTML 与 DOM。

查看 DOM 节点

“元素”工具的 DOM 树可在 DevTools 中执行所有与 DOM 相关的活动。

检查节点

当你对特定 DOM 节点感兴趣时，可通过“检查”快速打开开发人员工具并调查该节点。

1. 在新窗口或选项卡中打开 DOM 示例 演示页。 (若要在新窗口或选项卡中打开链接，请右键单击链接。 或者，按住 Ctrl (Windows、Linux) 或 macOS) 命令 (，然后单击 link.)

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

   

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

   

2. 单击 DevTools 左上角的“ 检查 () ”图标：

   

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

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

使用键盘浏览 DOM 树

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

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

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

   

3. 按 向上键 两次。 <div> 已选择：

   

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

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

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

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

7. 按 向右键 。 列表将展开。

滚动到视图

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

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

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

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

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

5. 右键单击节点 <p>Magritte</p> ，然后选择“ 滚动到视图中”：

   

   视区向上滚动以显示 Magritte 节点。 请参阅 附录： 如果未显示 “滚动到视图 ”选项，则缺少选项。

搜索节点

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

1. 将光标聚焦在 “元素” 工具上，例如单击“ 元素 ”选项卡。

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

3. 类型 月亮是一个严酷的情妇。 DOM 树中突出显示了最后一句话：

   

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

编辑 DOM

可以在 DevTools 中编辑 DOM，并实时查看更改对页面的影响。

编辑文本内容

若要编辑节点的文本内容，请双击 DOM 树中的内容，如下所示：

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

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

3. 在 DOM 树中，双击 和 </p> 标记之间的<p>文本 Michelle。 文本突出显示以指示已选中：

   

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

编辑或添加属性

若要编辑现有属性，请双击属性名称或值。

若要添加新属性，请双击要为其添加属性的元素，如下所示：

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

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

3. 双击 <p>。 突出显示文本以指示已选择节点：

   

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

   

编辑节点标记名称

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

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

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

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

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

   

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

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

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

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

3. 在 DOM 树中，右键单击节点 <section id="edit-as-html-1"> ，然后选择 “编辑为 HTML”。 HTML 编辑器显示在 DOM 树中，其中在正在编辑的节周围有一个框：

   

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

   • 添加、删除或编辑属性。
   • 添加或删除节点。
   • 编辑节点的文本内容或标记名称。

   例如，在 行后面<p>Marseille</p>添加 <p>Dijon</p> 。

5. 单击 HTML 编辑器外部的 DOM 树，或按 Ctrl+Enter。 编辑将应用于 DOM 树和呈现的网页，HTML 编辑器将关闭：

   

对 DOM 节点重新排序

若要对 DOM 树中的节点重新排序，请拖动节点，如下所示：

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

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

3. 在 DOM 树中，拖动 <p>Elvis Presley</p> 到列表顶部：

   

强制状态

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

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

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

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

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

隐藏节点

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

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

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

3. 按 H 键。 节点在呈现的网页中隐藏：

   

4. 再次按 H 键。 节点将再次显示。

删除节点

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

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

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

3. 按 Delete。 节点将被删除。

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

访问控制台中的节点

DevTools 提供了一些快捷方式，用于从 控制台 工具访问 DOM 节点，或获取对每个节点的 JavaScript 引用。

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

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

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

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

3. 按 Esc 键在“快速视图”面板中打开控制台工具。

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

   

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

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

   

存储为全局变量

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

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

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

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

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

   

复制 JS 路径

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

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

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

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

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

5. 按 Enter 计算表达式。 复制 JS 路径表达式的计算结果为节点：

   

中断 DOM 更改

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

中断属性修改

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

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

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

3. 在 DOM 树中，右键单击 ，<p id="botm_target">Sauerkraut</p>然后选择“在属性修改时>中断”：

   

   请参阅附录：如果未显示选项， 则缺少选项 。

4. 单击“ 设置背景” 按钮。 这会将节点的 style 属性设置为 background-color:thistle。 DevTools 暂停页面，并突出显示导致 源 工具中属性更改的代码：

   

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

中断节点删除

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

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

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

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

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

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

中断子树修改

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

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

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

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

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

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

后续步骤

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

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

附录：HTML 与 DOM

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

使用 Web 浏览器请求页面时，服务器将返回如下所示的 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 创建对象树，如下所示：

html
    head
        title
    body
        h1
        p
        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 现在如下所示：

html
    head
        title
    body
        p
        script
        p

页面的 HTML 现在不同于其 DOM。 换句话说，HTML 表示初始页面内容，DOM 表示当前页内容。 当 JavaScript 添加、删除或编辑节点时，DOM 将与 HTML 不同。

有关详细信息 ，请参阅 DOM 简介 。

附录：缺少选项

本教程中的许多说明指示右键单击 DOM 树中的节点，然后从弹出的上下文菜单中选择一个选项。 如果上下文菜单中未列出指定的选项，请右键单击节点文本，或单击 ... 节点左侧的按钮：

注意

此页面的某些部分是根据 Google 创建和共享的作品所做的修改，并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。 原始页面 在此处 找到，由 Kayce Basques (Technical Writer、Chrome DevTools & Lighthouse) 创作。

此作品根据 Creative Commons 署名 4.0 国际许可获得许可。