通过

开始查看和更改 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 树中突出显示：

    突出显示 Michelangelo 节点

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

    “检查”图标

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

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

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

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

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

    检查“Ringo”节点

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

    检查“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 树中，其中在正在编辑的节周围有一个框：

    HTML 编辑器

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

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

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

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

    HTML 编辑器关闭后，带有额外节点的新 DOM 树

对 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 键。 节点在呈现的网页中隐藏：

    节点隐藏后在 DOM 树中的外观

  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>：

    控制台中第一个 $0 表达式的结果

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

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

    控制台中第二个 $0 表达式的结果

存储为全局变量

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

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

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

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

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

    temp1 表达式的结果

复制 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 路径表达式的计算结果为节点：

    复制 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 中描述的条款使用。 原始页面 在此处 找到，由凯斯·巴斯克创作。

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