开始查看和更改 DOM

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

观看视频并完成以下交互式教程，了解使用 Chrome DevTools 查看和更改网页 DOM 的基础知识。

本教程假定您了解 DOM 和 HTML 之间的区别。如需了解说明，请参阅附录：HTML 与 DOM。

查看 DOM 节点

在 Elements 面板的 DOM 树中，您可以在 DevTools 中执行所有与 DOM 相关的活动。

检查节点

如果您对特定 DOM 节点感兴趣，可以使用检查快速打开开发者工具并调查该节点。

  1. 点击下方的 Michelangelo 右键，然后选择 Inspect。
    • 米开朗基罗
    • Raphael 检查节点 DevTools 的 Elements 面板随即打开。 DOM 树中突出显示了 <li>Michelangelo</li>。 突出显示 Michelangelo< 节点
  2. 点击开发者工具左上角的 Inspect 图标。“检查”图标

  3. 点击下方的 Tokyo 文本。

    • 东京

    • 贝鲁特

      现在，DOM 树中突出显示了 <li>Tokyo</li>。

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

使用键盘浏览 DOM 树

在 DOM 树中选择某个节点后，您可以使用键盘浏览 DOM 树。

  1. 右键点击下方的 Ringo，然后选择 Inspect。在 DOM 树中选择了 <li>Ringo</li>。

    • George
    • 飞环
    • Paul

    • John

      检查 Ringo 节点

  2. 按 Up 箭头键 2 次。已选择“<ul>”。

    检查 ul 节点

  3. 按向左键。<ul> 列表会收起。

  4. 再次按向左键。选择了 <ul> 节点的父级。在本例中，它是包含第 1 步说明的 <li> 节点。

  5. 按 Down（向下）箭头键 3 次，重新选择您刚刚收起的 <ul> 列表。显示的内容应如图所示：<ul>...</ul>

  6. 按向右箭头键。此时列表会展开。

滚动到视野范围内

查看 DOM 树时，您有时会对当前不在视口中的 DOM 节点感兴趣。例如，假设您滚动到页面底部，并且对页面顶部的 <h1> 节点感兴趣。借助滚动到视野范围内，您可以快速重新定位视口，以便查看节点。

  1. 右键点击下方的 Magritte，然后选择 Inspect。

    • Magritte
    • 苏特

  2. 前往本页底部的附录：滚动到视野范围内部分。 请继续按照说明操作。

完成页面底部的说明后，您应该会跳转回此处。

显示标尺

借助视口上方和左侧的标尺，您可以在 Elements 面板中将鼠标悬停在元素上方，测量元素的宽度和高度。

标尺。

您可以通过以下两种方式之一启用标尺：

  • 按 Control+Shift+P 或 Command+Shift+P（在 Mac 上）打开命令菜单，输入 Show rulers on hover，然后按 Enter 键。
  • 依次选择 设置 > 偏好设置 > 元素 > 悬停时显示标尺。

标尺的尺寸调整单位是像素。

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

  1. 将光标置于元素面板上。
  2. 按 Control+F 或 Command+F（Mac）。搜索栏会在 DOM 树的底部打开。

  3. 输入 The Moon is a Harsh Mistress。最后一个句子在 DOM 树中突出显示。

    在搜索栏中突出显示查询

如上所述，搜索栏还支持 CSS 和 XPath 选择器。

Elements 面板会选择 DOM 树中第一个匹配的结果，并将其滚动到视口中。默认情况下，系统会在您输入时显示建议。如果您总是使用长搜索查询，可以将 DevTools 设置为仅在您按 Enter 键时运行搜索。

为避免在节点之间不必要地跳转，请清除 设置 > 偏好设置 > 全局 > 边输入边搜索复选框。

清除了“设置”中的“即输即搜”复选框。

修改 DOM

您可以动态修改 DOM，并查看这些更改对网页有何影响。

修改内容

如需修改节点的内容，请在 DOM 树中双击相应内容。

  1. 右键点击下方的 Michelle，然后选择 Inspect。

    • 炸
    • Michelle

  2. 在 DOM 树中，双击 Michelle。也就是说，双击 <li> 和 </li> 之间的文本。系统会以蓝色突出显示所选文字。

    修改文本

  3. 删除 Michelle，输入 Leela，然后按 Enter 键确认更改。上面的文字会从 Michelle 更改为 Leela。

修改属性

如需修改属性，请双击属性名称或值。请按照以下说明了解如何向节点添加属性。

  1. 右键点击下面的 Howard，然后选择 Inspect。

    • Howard
    • Vince

  2. 双击 <li>。系统会突出显示该文本，以指示该节点处于选中状态。

    修改节点

  3. 按 Right 箭头键，添加一个空格，输入 style="background-color:gold"，然后按 Enter 键。节点的背景颜色会变为金色。

    向节点添加样式属性

您也可以使用右键点击选项中的修改属性。

右键点击选项，突出显示“修改属性”。

修改节点类型

如需修改节点的类型，请双击该类型，然后输入新类型。

  1. 右键点击下方的 Hank，然后选择 Inspect。

    • Dean
    • Hank
    • Thaddeus
    • Brock

  2. 双击 <li>。文本 li 突出显示。

  3. 删除 li，输入 button，然后按 Enter 键。<li> 节点会更改为 <button> 节点。

    将节点类型更改为按钮

以 HTML 格式修改

如需以 HTML 形式修改节点并使用语法突出显示和自动补全功能，请从节点的下拉菜单中选择以 HTML 形式修改。

  1. 右键点击下方的 Leonard，然后选择 Inspect。

    • 一分
    • Howard
    • Rajesh
    • Leonard

  2. 在 Elements 面板中，右键点击当前节点，然后从下拉菜单中选择 Edit as HTML。

    节点的下拉菜单。

  3. 按 Enter 键另起一行，然后开始输入 <l。DevTool 会突出显示 HTML 语法并为您自动补全标记。

    HTML 标记的自动补全功能。

  4. 从自动补全菜单中选择 li 元素，然后输入 >。开发者工具会在光标后面自动添加结束 </li> 标记。

    开发者工具会自动关闭该代码。

  5. 在标记内输入 Sheldon，然后按 Control / Command + Enter 以应用更改。

    正在应用更改。

复制节点

您可以使用右键点击选项中的复制元素复制元素。

  1. 右键点击下面的 Nana，然后选择 Inspect。

    • 虚荣的篝火
    • Nana
    • 奥兰多
    • 白噪声

  2. 在元素面板中，右键点击 <li>Nana</li>，然后从下拉菜单中选择复制元素。

    下拉菜单中突出显示的“重复元素”选项。

  3. 返回该页面。列表项已立即复制。

您还可以使用键盘快捷键：Shift + Alt + 向下键（Windows 和 Linux）和 Shift + Option + 向下键（macOS）。

截取节点屏幕截图

您可以使用当前节点屏幕截图功能截取 DOM 树中的任何单个节点的屏幕截图。

  1. 右键点击此页面上的任意图片，然后选择检查。

  2. 在元素面板中，右键点击图片网址，然后从下拉菜单中选择截取节点屏幕截图。

    正在截取节点屏幕截图。

  3. 屏幕截图会保存到您的“下载内容”中。

    节点屏幕截图已保存到“下载内容”文件夹。

如需了解使用 DevTools 截取屏幕截图的更多方法，请参阅4 种使用 DevTools 截取屏幕截图的方法。

重新排列 DOM 节点

拖动节点即可重新排序。

  1. 右键点击下方的 Elvis Presley，然后选择 Inspect。请注意，它是列表中的最后一项。

    • Stevie Wonder
    • Tom Waits
    • 克里斯·泰尔
    • 埃尔维斯·普雷斯利

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

    将节点拖动到列表顶部

强制执行状态

您可以强制节点保持 :active、:hover、:focus、:visited 和 :focus-within 等状态。

  1. 将鼠标悬停在下方的《蝇王》上。背景颜色变为橙色。

    • 《蝇王》
    • 罪与罚
    • 《Moby Dick》

  2. 右键点击上方的 The Lord of the Flies，然后选择 Inspect。

  3. 右键点击 <li class="demo--hover">The Lord of the Flies</li>，然后依次选择 Force State > :hover。如果您没有看到此选项，请参阅附录：缺少选项。 即使您实际上并未将鼠标悬停在节点上，背景颜色也会保持橙色。

隐藏节点

按 H 可隐藏节点。

  1. 右键点击下方的 The Stars My Destination，然后选择 Inspect。

    • 基督山伯爵
    • The Stars My Destination

  2. 按 H 键。节点已隐藏。您也可以右键点击该节点，然后使用隐藏元素选项。

    节点在 DOM 树中隐藏后的显示效果

  3. 再次按 H 键。系统会再次显示该节点。

删除一个节点

按 Delete 可删除节点。

  1. 右键点击下方的 Foundation，然后选择 Inspect。

    • 插图人
    • 穿越魔镜
    • 基础

  2. 按 Delete 键。节点已被删除。您也可以右键点击该节点，然后使用删除元素选项。

  3. 按 Control+Z 或 Command+Z（Mac）。 系统会撤消上一个操作，并重新显示该节点。

在控制台中访问节点

开发者工具提供了一些快捷方式，可用于从控制台中访问 DOM 节点或获取对它们的 JavaScript 引用。

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

在您检查某个节点时，如果该节点旁边显示 == $0 文本，则表示您可以在控制台中使用变量 $0 引用此节点。

  1. 在下方点击右键黑暗的左手，然后选择检查。

    • 黑暗的左手
    • 沙丘

  2. 按 Escape 键打开“控制台”抽屉。

  3. 输入 $0 并按 Enter 键。表达式的结果显示 $0 的求值结果为 <li>The Left Hand of Darkness</li>。

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

  4. 将光标悬停在相应结果上。该节点会在视口中突出显示。

  5. 点击 DOM 树中的 <li>Dune</li>，然后再次在控制台中输入 $0，然后再次按 Enter 键。现在，$0 的计算结果为 <li>Dune</li>。

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

存储为全局变量

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

  1. 在下方右键点击 The Big Sleep，然后选择 Inspect。

    • 大睡觉
    • The Long Goodbye

  2. 在 DOM 树中右键点击 <li>The Big Sleep</li>，然后选择存储为全局变量。如果您没有看到此选项，请参阅附录：缺少选项。

  3. 在控制台中输入 temp1，然后按 Enter 键。表达式的结果表明，该变量的求值结果为该节点。

    temp1 表达式的结果

复制 JS 路径

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

  1. 右键点击下方的 The Brothers Karamazov，然后选择 Inspect。

    • The Brothers Karamazov
    • 罪与罚

  2. 在 DOM 树中右键点击 <li>The Brothers Karamazov</li>，然后依次选择复制 > 复制 JS 路径。系统已将解析为该节点的 document.querySelector() 表达式复制到您的剪贴板。

  3. 按 Control+V 或 Command+V (Mac) 将表达式粘贴到控制台中。

  4. 按 Enter 键对表达式求值。

    “复制 JS 路径”表达式的结果

在 DOM 更改时暂停

借助 DevTools，您可以在 JavaScript 修改 DOM 时暂停网页的 JavaScript。请参阅 DOM 更改断点。

后续步骤

以上介绍了开发者工具中的大多数与 DOM 相关的功能。您可以通过右键点击 DOM 树中的节点，并尝试本教程中未介绍的其他选项，来探索其余选项。另请参阅“元素”面板键盘快捷键。

请访问 Chrome 开发者工具首页，了解您可以使用开发者工具执行的所有其他操作。

如果您想与 DevTools 团队联系或向 DevTools 社区寻求帮助，请参阅社区。

附录：HTML 与 DOM

本部分简要介绍了 HTML 和 DOM 之间的区别。

当您使用网络浏览器请求 https://example.com 等网页时，服务器会返回如下所示的 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
  head
    title
  body
    h1
    p
    script

表示网页内容的对象（或节点）树称为 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 节点，并向 DOM 添加另一个 p 节点。完整的 DOM 现在如下所示：

html
  head
    title
  body
    p
    script
    p

网页的 HTML 现在与其 DOM 不同。换句话说，HTML 代表初始网页内容，DOM 代表当前网页内容。当 JavaScript 添加、移除或修改节点时，DOM 会与 HTML 不同。

如需了解详情，请参阅 DOM 简介。

附录：滚动到视野范围内

本部分是对滚动到视野范围内部分的补充。请按照以下说明完成此部分。

  1. DOM 树中应仍选择 <li>Magritte</li> 节点。如果没有，请返回滚动到视图并重新开始。

  2. 右键点击 <li>Magritte</li> 节点，然后选择滚动到视图中。视口会向上滚动，以便您查看 Magritte 节点。如果您没有看到滚动到视野范围内选项，请参阅附录：缺少选项。

    滚动到视野范围内

附录：缺少选项

本教程中的许多说明都要求您右键点击 DOM 树中的某个节点，然后从弹出的上下文菜单中选择一个选项。如果您在上下文菜单中没有看到指定的选项，请尝试在离开节点文本后右键点击。

如果您没有看到所有选项，请点击以下位置