开始查看和更改 DOM

Kayce Basques

Sofia Emelianova

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

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

查看 DOM 节点

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

检查节点

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

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

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

   • 东京

   • 贝鲁特

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

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

使用键盘浏览 DOM 树

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

1. 右键点击下方的 Ringo，然后选择 Inspect。已选择“<li>Ringo</li>” DOM 树

   • George
   • 飞环
   • Paul

   • John

     

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

   

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

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

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

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

滚动到视图中

查看 DOM 树时，您有时会发现自己对某个 DOM 节点 当前不在视口中。例如，假设您滚动到 而您对页面顶部的 <h1> 节点感兴趣。滚动到视野范围内 可让您快速调整视口位置，以便可以看到该节点。

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

   • 马格里特
   • 苏廷

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

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

显示标尺

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

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

• 按 Ctrl+Shift+P 或 Command+Shift+P (Mac) 打开命令菜单，输入 Show rulers on hover，然后按 Enter。
• 检查 设置 >偏好设置 >Elements >悬停时显示标尺。

标尺的尺寸单位是像素。

搜索节点

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

1. 将光标置于Elements面板上。
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，然后选择检查。

   • 院长
   • 汉克
   • Thaddeus
   • Brock

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

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

   

以 HTML 格式修改

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

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

   • 一分
   • Howard
   • Rajesh
   • Leonard

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

   

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

   

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

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

   

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

   

复制节点

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

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

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

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

   

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

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

截取节点屏幕截图

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

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

2. 在Elements面板中，右键点击图片网址，然后从下拉菜单中选择Elements。

   

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

   

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

对 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 状态 >:hover。如果您没有看到此选项，请参阅附录：缺少选项。 即使您实际上并未将鼠标悬停在该节点上，背景颜色仍然保持橙色。

隐藏节点

按 H 可隐藏节点。

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

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

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

   

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

删除一个节点

按 Delete 可删除节点。

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

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

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

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

在控制台中访问节点

DevTools 提供了一些快捷方式，以便您从控制台访问 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 变量。如果您没有看到此选项，请参阅附录：缺少选项。

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

   

复制 JS 路径

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

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

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

2. 右键点击 DOM 树中的 <li>The Brothers Karamazov</li>，然后选择 复制 >复制 JS 路径。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 一样，但假设脚本在 运行以下代码：

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 树中右键点击某个节点 然后从弹出的上下文菜单中选择一个选项。如果没有看到 选项，请尝试右键点击该节点文本。