开始查看和更改 DOM

  • 项目

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

若要了解 DOM 和 HTML 之间的区别，请参 阅以下附录：HTML 与 DOM。

查看 DOM 节点

在“元素”面板的 DOM 树中，你可以在开发人员工具中执行所有 DOM 相关活动。

检查节点

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

  1. 在新窗口或选项卡中打开 “DOM 示例 ”演示页。 为此，请右键单击链接，或按住 Ctrl (Windows、Linux) 或 Command (macOS) ，然后单击该链接。

  1. 在呈现的网页中的 “检查节点”下，右键单击 米开朗基罗 ，然后选择 “检查”。

    检查节点。

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

    突出显示米开朗基罗节点。

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

    “检查”图标。

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

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

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

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

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

    检查“Ringo”节点。

  3. Up按箭头键 2 次。 <div> 已选中。

    检查“div”节点。

  4. Left按箭头键。 <div> 列表会折叠。

  5. Left再次按箭头键。 <div> 节点的父节点已被选中。 在这种情况下，它是 ID 为 navigate-the-dom-tree-with-a-keyboard-1 的 <section>。

  6. Down按箭头键 2 次，以便重新选择刚刚折叠的<div>列表。 应如下所示： <div>... </div>

  7. Right按箭头键。 列表将展开。

滚动到视图

查看 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. 键入 The Moon is a Harsh Mistress。 最后一句在 DOM 树中突出显示。

突出显示搜索栏中的查询。

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

编辑 DOM

可以即时编辑 DOM，并查看更改对页面的影响。

编辑文本内容

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

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

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

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

    编辑文本。

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

编辑属性

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

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

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

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

    编辑节点。

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

    将样式属性添加到节点。

编辑节点标记名称

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

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

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

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

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

    将节点类型更改为按钮。

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

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

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

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

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

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

    HTML 编辑器。

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

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

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

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

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

对 DOM 节点重新排序

拖动节点以重新排序。

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

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

  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) 。 最后一个操作将被撤消，节点将重新出现。

访问控制台中的节点

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

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

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

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

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

  3. 选择 Escape 键以打开控制台抽屉。

  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. 在 DOM 树中右键单击 <p>The Big Sleep</p> ，然后选择 “存储”作为全局变量。 请参阅 附录： 如果未显示该选项，则缺少选项。

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

temp1 表达式的结果。

复制 JS 路径

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

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

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

  3. 在 DOM 树中右键单击 <p>The Brothers Karamazov</p> ，然后选择 “复制 > 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。 开发人员工具将暂停页面并突出显示导致属性发生更改的代码。

    显示导致属性更改的代码行的“源”工具。

  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\（Chrome DevTools 和 Lighthouse 的技术作家）撰写。

知识共享许可协议。 本作品根据 Creative Commons Attribution 4.0 International License 获得许可。