使用 Chrome DevTools 查看和修改 DOM：入门教程

观看视频，并完成这些交互式教程，学习使用 Chrome DevTools 查看和修改页面 DOM 的基本方法。

观看官方视频：查看和修改 DOM

本教程假设你已经知道 DOM 与 HTML 的区别。如需复习，请阅读附录：HTML 与 DOM。

查看 DOM 节点

DevTools 中所有与 DOM 有关的操作，都在 Elements（元素）面板的 DOM 树中进行。

检查节点

当你对某个 DOM 节点感兴趣时，Inspect（检查）可以快速打开 DevTools，并检查该节点。

1. 在下面的列表中，右键点击 Michelangelo，从菜单中选择 Inspect。

   • Michelangelo
   • Raphael

   DevTools 的 Elements 面板会打开，<li>Michelangelo</li> 在 DOM 树中高亮显示。

   
   官方原图：在 DOM 树中高亮 Michelangelo 节点。来源：Chrome for Developers

2. 点击 DevTools 中的 Select an element（选择元素） 按钮。

3. 在下面的列表中选择 Tokyo。

   • Tokyo
   • Beirut

   <li>Tokyo</li> 在 DOM 树中高亮显示。

检查节点也是查看、修改节点样式和 CSS的第一步。

使用键盘浏览 DOM 树

在 DOM 树中选中一个节点后，可以用键盘浏览树结构。

1. 在下面的列表中，右键点击 Ringo，选择 Inspect。DOM 树会选中 <li>Ringo</li>。

   • George
   • Ringo
   • Paul

   • John

     
     官方原图：检查 Ringo 节点。来源：Chrome for Developers

2. 按两次向上箭头，选中 <ul>。

   
   官方原图：选中 ul 节点。来源：Chrome for Developers

3. 按向左箭头，折叠 <ul> 列表。

4. 再按一次向左箭头，选中 <ul> 的父节点。在这里，它是包含步骤 1 说明的 <li> 节点。

5. 按三次向下箭头，重新选中刚才折叠的 <ul> 列表。它应显示为 <ul>...</ul>。

6. 按向右箭头，展开列表。

滚动到可见位置

浏览 DOM 树时，有时节点位于视口之外。例如，你已滚动到页面底部，却想查看页面顶部的 <h1> 节点。Scroll into view（滚动到视图）可以迅速调整视口，让节点出现在屏幕上。

1. 在下面的列表中，右键点击 Magritte，选择 Inspect。

   • Magritte
   • Soutine

2. 滚动到附录中的滚动到可见位置，继续完成操作。

完成后，回到本节。

显示标尺

在视口中显示标尺后，将鼠标悬停在 Elements 面板中的元素上，就可以测量元素的宽度和高度。

官方原图：在视口中显示标尺。来源：Chrome for Developers

两种启用方式任选一种：

• 按 Control+Shift+P，macOS 上按 Command+Shift+P，打开 Command menu（命令菜单），输入 Show rulers on hover，然后按回车。
• 在 Settings > Preferences > Elements 中勾选 Show rulers on hover。

标尺的尺寸单位是像素。

搜索节点

DOM 树支持通过字符串、CSS 选择器或 XPath 选择器搜索。

1. 将焦点放到 Elements 面板。
2. 按 Control+F，macOS 上按 Command+F。搜索栏会出现在 DOM 树底部。

3. 输入 The Moon is a Harsh Mistress。DOM 树中的最后一句会被高亮显示。

   
   官方原图：在搜索栏中高亮查询文字。来源：Chrome for Developers

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

Elements 面板会选择 DOM 树中的第一个匹配结果，并将视口滚动到该结果。默认情况下，这会在你输入时实时发生。如果经常输入很长的搜索条件，可以改为只在按回车时执行搜索。

要避免节点之间不必要的跳转，进入 Settings > Preferences > Global，取消勾选 Search as you type。

官方原图：在设置中取消勾选 Search as you type。来源：Chrome for Developers

编辑 DOM

你可以实时编辑 DOM，观察修改如何影响页面。

编辑内容

在 DOM 树中双击节点内容，即可编辑。

1. 在下面的列表中，右键点击 Michelle，选择 Inspect。

   • Fry
   • Michelle

2. 在 DOM 树中双击 Michelle，也就是 <li> 和 </li> 之间的文字。文字会高亮为蓝色，表示已选中。

   
   官方原图：编辑节点文字。来源：Chrome for Developers

3. 删除 Michelle，输入 Leela，按回车确认。页面文字从 Michelle 变成 Leela。

编辑属性

双击属性名称或值，就可以编辑属性。按下面的步骤练习给节点添加属性。

1. 在下面的列表中，右键点击 Howard，选择 Inspect。

   • Howard
   • Vince

2. 展开 <ul>，双击 <li> 进入编辑状态。文字高亮表示节点已被选中。

   
   官方原图：选中节点类型文字进入编辑。来源：Chrome for Developers

3. 按向右箭头，添加一个空格，输入 style="background-color:gold"，然后按回车。节点背景会变成金色。

   
   官方原图：给节点添加 style 属性。来源：Chrome for Developers

编辑节点类型

双击节点类型，然后输入新的类型即可。

1. 在下面的列表中，右键点击 Hank，选择 Inspect。

   • Dean
   • Hank
   • Thaddeus
   • Brock

2. 双击 <li>，li 文字被高亮显示。

3. 删除 li，输入 button，按回车。<li> 节点变成 <button> 节点。

   
   官方原图：将节点类型改为 button。来源：Chrome for Developers

以 HTML 形式编辑

要使用语法高亮和自动补全编辑节点的 HTML，在节点的下拉菜单中选择 Edit as HTML。

1. 在下面的列表中，右键点击 Leonard，选择 Inspect。

   • Penny
   • Howard
   • Rajesh
   • Leonard

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

   
   官方原图：节点菜单中的 Edit as HTML。来源：Chrome for Developers

3. 按回车换行，开始输入 <l。DevTools 会高亮 HTML 语法，并建议可补全的标签。

   
   官方原图：自动补全 HTML 标签。来源：Chrome for Developers

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

   
   官方原图：自动添加结束标签。来源：Chrome for Developers

5. 在标签内部输入 Sheldon，按 Control+Enter（macOS 上按 Command+Enter）应用修改。

复制节点

右键菜单中的 Duplicate element 可以复制元素。

1. 在下面的列表中，右键点击 Nana，选择 Inspect。

   • Bonfire of the Vanities
   • Nana
   • Orlando
   • White Noise

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

   
   官方原图：菜单中的 Duplicate element。来源：Chrome for Developers

3. 回到页面，列表项已经被复制。

也可以使用快捷键：Windows 和 Linux 上按 Shift+Alt+向下箭头；macOS 上按 Shift+Option+向下箭头。

截取节点图片

你可以截取 DOM 树中任意单个节点的图片。

1. 右键点击本页任意图片，选择 Inspect。

2. 在 Elements 面板中，右键点击图片 URL，从下拉菜单中选择 Capture node screenshot。

   
   官方原图：使用 Capture node screenshot 截取节点。来源：Chrome for Developers

3. 截图会保存到下载目录（Windows 和 macOS）。

更多方式见 使用 DevTools 截图的 4 种方法。

调整 DOM 节点顺序

拖动节点即可重新排列。

1. 在下面的列表中，右键点击末尾的 Elvis Presley，选择 Inspect。

   • Stevie Wonder
   • Tom Waits
   • Chris Thile
   • Elvis Presley

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

强制状态

你可以让节点保持在 :active、:hover、:focus、:visited、:focus-within 等状态。

1. 将鼠标悬停在 The Lord of the Flies 列表项上，背景会变成橙色。

   • The Lord of the Flies
   • Crime and Punishment
   • 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 Count of Monte Cristo
   • The Stars My Destination

2. 按 H，节点会隐藏。也可以右键点击节点，选择 Hide element。

   
   官方原图：隐藏节点后在 DOM 树中的显示。来源：Chrome for Developers

3. 再按一次 H，节点重新显示。

删除节点

按 Delete 可以删除节点。

1. 在下面的列表中，右键点击 Foundation，选择 Inspect。

   • The Illustrated Man
   • Through the Looking-Glass
   • Foundation

2. 按 Delete，节点被删除。也可以右键点击节点，选择 Delete element。

3. 按 Control+Z，macOS 上按 Command+Z，撤销上一步操作，节点重新出现。

在 Console 中访问节点

DevTools 提供了几个快捷方式，可以在 Console（控制台）访问 DOM 节点，或者获取节点的 JavaScript 引用。

用 $0 引用当前选中的节点

检查节点时，节点旁边的 == $0 表示可以在 Console 中通过变量 $0 引用该节点。

1. 右键点击 The Left Hand of Darkness 列表项，选择 Inspect。

   • The Left Hand of Darkness
   • Dune

2. 按 Escape 打开 Console Drawer（控制台抽屉）。必要时，再选择 Console。

3. 输入 $0，按回车。表达式结果是 $0 求值为 <li>The Left Hand of Darkness</li>。

   
   官方原图：Console 中第一次 $0 表达式的结果。来源：Chrome for Developers

4. 将鼠标悬停在结果上，该节点会在视口中高亮显示。

5. 在 DOM 树中点击 <li>Dune</li>，再次在 Console 中输入 $0 并按回车。这时 $0 求值为 <li>Dune</li>。

   
   官方原图：Console 中第二次 $0 表达式的结果。来源：Chrome for Developers

保存为全局变量

如果需要反复引用同一个节点，可以将它保存为全局变量。

1. 在下面的列表中，右键点击 The Big Sleep，选择 Inspect。

   • The Big Sleep
   • The Long Goodbye

2. 在 DOM 树中右键点击 <li>The Big Sleep</li>，选择 Store as global variable。找不到这一选项时，请阅读缺失的菜单选项。

3. 在 Console 中输入 temp1，按回车。表达式结果表明该变量指向这个节点。点击节点即可展开列表项。

   
   官方原图：Console 中 temp1 表达式的结果。来源：Chrome for Developers

复制 JavaScript 路径

复制节点的 JavaScript 路径，可以在自动化测试中引用该节点。

1. 在下面的列表中，右键点击 The Brothers Karamazov，选择 Inspect。

   • The Brothers Karamazov
   • Crime and Punishment

2. 在 DOM 树中右键点击 <li>The Brothers Karamazov</li>，选择 Copy > Copy JS Path。一个可以定位该节点的 document.querySelector() 表达式会被复制到剪贴板。

3. 按 Control+V，macOS 上按 Command+V，将表达式粘贴到 Console。

4. 按回车，执行表达式。

   
   官方原图：Copy JS Path 表达式的结果。来源：Chrome for Developers

在 DOM 变化时暂停

DevTools 可以在页面 JavaScript 修改 DOM 时暂停执行。更多说明见 DOM 变化断点。

后续学习

以上涵盖了 DevTools 中大部分与 DOM 有关的功能。其余功能可以通过右键点击 DOM 树中的节点，尝试本教程未介绍的选项来发现。

继续阅读：

• 阅读 Elements 面板快捷键。
• 查看其他 DevTools 文档，了解 DevTools 还能做什么。

参加 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。此时，DOM 中的对象与 HTML 相对应。

假设 HTML 底部引用的 script.js 文件包含下面的函数：

const h1 = document.querySelector('h1');
h1.parentElement.removeChild(h1);
const p = document.createElement('p');
p.textContent = 'Wildcard!';
document.body.appendChild(p);

脚本从 DOM 中移除 h1 节点，再添加一个 p 节点。DOM 变成：

html
  head
    title
  body
    p
    script
    p

这时，页面的 HTML 与 DOM 已经不同。

HTML 代表初始页面内容，DOM 代表当前活动的页面内容。JavaScript 添加、移除或编辑节点后，DOM 就会与 HTML 不同。

更多说明见 MDN 的 DOM 简介。

滚动到可见位置

这是前面滚动到可见位置练习的后续步骤，请按说明完成本节。

1. DOM 树中应仍选中 <li>Magritte</li>。如果没有，请回到滚动到可见位置重新开始。

2. 右键点击 <li>Magritte</li>，选择 Scroll into view。页面会向上滚动，让 Magritte 节点出现在视口中。如果没有这一选项，请阅读缺失的菜单选项。

   
   官方原图：菜单中的 Scroll into view。来源：Chrome for Developers

缺失的菜单选项

本教程许多步骤要求在 DOM 树中右键点击节点，再从弹出的上下文菜单中选择某个选项。如果看不到所需选项，请尝试右键点击节点文字之外的位置。

官方原图：看不到所需菜单选项时应点击的位置。来源：Chrome for Developers