开始查看和更改 DOM

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

观看视频并完成这些互动式教程，了解使用 Chrome 开发者工具查看和更改页面 DOM 的基础知识。

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

查看 DOM 节点

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

检查节点

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

  1. 右键点击下方的 Michelangelo，然后选择 Inspect。
    • 米开朗基罗
    • Raphael 检查节点 DevTools 的 Elements 面板随即打开。 DOM 树中突出显示了 <li>Michelangelo</li>。 以米开朗基罗的节点为亮点
  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. 按向下箭头键 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. 按 Ctrl + F 或 Command + F (Mac)。 搜索栏会在 DOM 树底部打开。

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

    在搜索栏中突出显示查询

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

Elements 面板会选择 DOM 树中的第一个匹配结果，并将其滚动至视口的视图中。默认情况下，系统会在您输入内容时执行此操作。如果您始终使用长搜索查询，则可以让开发者工具仅在按 Enter 键时运行搜索。

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

已清除“设置”中的“输入时搜索”复选框。

修改 DOM

您可以即时修改 DOM，并查看这些更改对页面有何影响。

修改内容

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

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

    • 炸
    • 小麦

  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
    • 汉克
    • 塞迪斯
    • Brock

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

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

    将节点类型更改为“button”

以 HTML 格式修改

要通过突出显示语法和自动补全功能以 HTML 形式修改节点，请从相应节点的下拉菜单中选择以 HTML 形式修改。

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

    • 一分
    • Howard
    • 李杰
    • Leonard

  2. 在元素面板中，右键点击当前节点，然后从下拉菜单中选择以 HTML 形式修改。

    节点的下拉菜单。

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

    HTML 标记自动补全。

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

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

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

    正在应用更改。

复制节点

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

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

    • 虚荣的篝火
    • 娜娜
    • 奥兰多
    • 白噪音

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

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

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

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

截取节点屏幕截图

您可以使用捕获节点屏幕截图来对 DOM 树中的任何单个节点进行屏幕截图。

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

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

    正在截取节点屏幕截图。

  3. 屏幕截图将保存到下载内容中。

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

如需了解使用 Devtools 截取屏幕截图的更多方法，请参阅使用开发者工具截取屏幕截图的 4 种方式。

重新排列 DOM 节点

拖动节点以重新排序。

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

    • Stevie Wonder
    • 汤姆·威兹
    • 克里斯·泰尔
    • 埃尔维斯·普雷斯利

  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，然后选择检查。

    • 基督山伯爵
    • 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. 右键点击下方的 The Left Hand of Darkness，然后选择检查。

    • 黑暗左手
    • 沙丘

  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，然后选择检查。

    • The Brothers Karamazov
    • 罪与罚

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

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

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

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

中断 DOM 更改

借助开发者工具，您可以在 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 树中的节点，然后从弹出的上下文菜单中选择一个选项。如果您在上下文菜单中没有看到指定的选项，请尝试在离开节点文本后右键点击。

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