开始查看和更改 DOM

Kayce Basques

Sofia Emelianova

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

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

查看 DOM 节点

通过 Elements 面板的 DOM 树，您可以在开发者工具中执行所有与 DOM 相关的活动。

检查节点

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

1. 右键点击下方的 Michelangelo，然后选择 Inspect。
   • 米开朗基罗
   • Raphael 系统将打开开发者工具的 Elements 面板。 <li>Michelangelo</li> 在 DOM 树中突出显示。
2. 点击开发者工具左上角的 Inspect 图标。

3. 点击下面的东京文字。

   • 东京

   • 贝鲁特

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

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

使用键盘浏览 DOM 树

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

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

   • George
   • 飞环
   • Paul

   • John

     

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

   

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

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

5. 按向下箭头键 3 次，即可重新选择刚刚收起的 <ul> 列表。它应如下所示：<ul>...</ul>

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

滚动到视图中

查看 DOM 树时，有时您会发现自己对当前不在视口中的 DOM 节点感兴趣。例如，假设您滚动到页面底部，并且对页面顶部的 <h1> 节点感兴趣。通过滚动到视图中，您可以快速重新调整视口位置，以便可以看到节点。

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

   • 马格里特
   • 苏廷

2. 转到本页面底部的附录：滚动到视图部分。 继续按照说明操作。

按照页面底部的说明完成操作后，您应返回到此处。

显示标尺

利用视口上方和左侧的标尺，您可以在元素面板中将鼠标悬停在某个元素上时，测量该元素的宽度和高度。

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

• 按 Ctrl+Shift+P 或 Command+Shift+P (Mac) 打开命令菜单，输入 Show rulers on hover，然后按 Enter。
• 勾选 Settings > Preferences > Elements > Show rulers on banner （悬停显示标尺）。

标尺的尺寸单位是像素。

搜索节点

您可以按字符串、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，然后选择检查。

   • 炸
   • 小麦

2. 在 DOM 树中，双击 Michelle。也就是说，双击 <li> 和 </li> 之间的文本。文本将突出显示为蓝色，表示已选中。

   

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

修改属性

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

1. 右键点击下方的 Howard，然后选择检查。

   • Howard
   • 文斯

2. 双击 <li>。文本将突出显示，表示已选择该节点。

   

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

   

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

修改节点类型

要修改节点的类型，请双击相应类型，然后输入新类型。

1. 右键点击下面的 Hank，然后选择检查。

   • 院长
   • 汉克
   • 塞迪斯
   • Brock

2. 双击 <li>。文本 li 处于突出显示状态。

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

   

以 HTML 格式修改

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

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

   • 一分
   • Howard
   • 李杰
   • Leonard

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

   

3. 按 Enter 键另起一行，然后开始输入 <l。开发者工具会突出显示 HTML 语法和自动补全标记。

   

   注意：此外，开发者工具还可以自动补全 DOM 属性。

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

   

5. 在该标签内输入 Sheldon，然后按 Ctrl / Command + Enter 即可应用更改。

   

复制节点

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

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

   • 化身篝火
   • 娜娜
   • 奥兰多
   • 白噪音

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

   

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

您也可以使用键盘快捷键：Shift + Alt + 向下键（Windows 和 Linux）和 Shift + Option + 向下键 (MacOS)。

截取节点屏幕截图

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

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

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

   

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

   

对 DOM 节点重新排序

拖动节点以重新排序。

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

   • 史提夫·汪德
   • 汤姆·威兹
   • 克里斯·泰尔
   • 埃尔维斯·普雷斯利

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

   

强制状态

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

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

   • 苍蝇之王
   • 犯罪与惩罚
   • 《白鲸》

2. 右键点击上方的 The Lord of the Fities，然后选择检查。

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

隐藏节点

按 H 可隐藏节点。

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

   • 基督山伯爵
   • 星光大道，我的目的地

2. 按 H 键。节点已隐藏。您还可以右键点击节点并使用隐藏元素选项。

   

3. 再次按 H 键。节点再次显示。

删除一个节点

按 Delete 可删除节点。

1. 右键点击下面的基础，然后选择检查。

   • 《画风人》
   • 透过视镜
   • 基础

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

3. 按 Ctrl + Z 或 Command + Z (Mac)。 最后一个操作将撤消，节点会重新出现。

在控制台中访问节点

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

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

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

1. 右键点击下方的 The Left Hand of Darkness，然后选择检查。

   • 黑暗左手
   • 沙丘

2. 按 Esc 键以打开控制台抽屉式导航栏。

3. 输入 $0，然后按 Enter 键。表达式的结果显示 $0 的计算结果为 <li>The Left Hand of Darkness</li>。

   

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

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

   

存储为全局变量

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

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

   • 《大睡》
   • 漫长的再见

2. 右键点击 DOM 树中的 <li>The Big Sleep</li>，然后选择 Store as global variable。如果您没有看到此选项，请参阅附录：缺少选项。

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

   

复制 JS 路径

如果需要在自动化测试中引用节点，请将 JavaScript 路径复制到该节点。

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

   • 卡拉马佐夫兄弟
   • 犯罪与惩罚

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

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

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

   

中断 DOM 更改

借助开发者工具，您可以在 JavaScript 修改 DOM 时暂停页面的 JavaScript。请参阅 DOM 更改断点。

后续步骤

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

查看 Chrome 开发者工具首页，了解您可以使用开发者工具的所有其他功能。

如果您想联系开发者工具团队或者从开发者工具社区获取帮助，请参阅社区。

附录：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> 节点，然后选择 Scroll into view。您的视口会向上滚动，以便您可以看到 Magritte 节点。如果您没有看到“滚动到视图”选项，请参阅附录：缺少选项。

   

附录：缺少选项

本教程中的许多说明都指示您右键点击 DOM 树中的节点，然后从弹出的上下文菜单中选择一个选项。如果上下文菜单中未显示指定的选项，请尝试右键点击节点文本以外的位置。