开始查看和更改DOM完成这些交互式教程，了解使用 Chrome DevTools 查看和更改页面 DOM 的基础知识。

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

查看DOM节点元素面板中的DOM树，是在DevTools中执行所有与DOM相关的活动的地方。

检查节点当您对特定的 DOM 节点感兴趣时，检查是一种打开 DevTools 并调查该节点的快速方法。

​ 1 右键单击下方的 Michelangelo字段并选择 检查。

Michelangelo

Raphael

DevTools的元素面板就会被打开。

​

​ 2 在DevTools工具的左上方角落里点击检查图标

​

​ 3 点击下面的Tokyo

TokyoBeirut​ 现在，

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

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

1 右键点击下面的Ringo然后选择检查。在DOM树中

GeorgeRingoPaulJohn

2 按2 次向上箭头键 。

就会被选中。

3 按左箭头键。

列表就会展开。

4 再次按下左箭头键。

节点的父节点就会被选中。在本例中，这个父节点包含了步骤1中的
• 节点。

  5 按3次向下箭头键，就会重新选择到刚刚展开的

  列表。它看起来像这样
  ...
  。

  6 按右箭头键，这个列表会被展开。

  滚动到视野范围内滚动到视野范围内查看DOM树，有时您会发现感兴趣的DOM节点并不在当前视口中。比如，假设您滚动到了当前页的底部，但是您想查看当前页顶部的

  节点。滚动到视图能让您快速重新定位视口，以便您可以查看到节点。

  1 右键点击下面的Magritte并选择检查

  MagritteSoutine2 跳转到本页底部的附录：滚动到视野范围内部分。那里会继续说明该部分的内容。

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

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

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

  按 Control+Shift+P 或 Command+Shift+P (Mac) 打开命令菜单，键入在鼠标指针悬停时显示标尺，然后按 Enter。选择设置 > 首选项 > 元素 > 在鼠标指针悬停时显示标尺。标尺的尺寸单位是像素。

  查找节点您可以使用字符串、CSS 选择器或 XPath 选择器搜索 DOM 树。

  1 将光标聚焦在元素面板上。

  2 按下Control+F或者Command+F (Mac)。DOM树底部会打开搜索栏。

  3 键入The Moon is a Harsh Mistress。最后一句话将会在DOM树中高亮显示。

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

  元素面板选择 DOM 树中的第一个匹配结果并将其滚动到视口中的视图中。默认情况下，这会在您键入时发生。如果您总是使用长搜索查询，则可以让 DevTools 仅在您按 Enter 时运行搜索。

  避免节点之间不必要的跳转，可以在设置 > 首选项 > 全局 > 即输即搜中去掉勾选。

  编辑DOM您可以即时编辑 DOM 并查看这些更改如何影响页面。

  编辑内容要编辑节点的内容，请双击 DOM 树中的内容。

  1 右键点击下面的Michelle并选择检查。

  FryMichelle2 在DOM树中，双击Michelle。也就是，双击

  和

  标签之间的文本。文本以蓝色突出显示，表示它已被选中。

  3 删除Michelle，输入Leela，然后回车以确定修改。文本内容就会从Michelle修改为Leela。

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

  1 右键点击下面的Howard选择检查。

  HowardVince2 双击

  标签，li文本会高亮以表示该节点被选中。

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

  编辑节点类型要编辑节点类型，请双击该类型，然后输入新类型。

  1 右键点击下面的Hank并选择检查

  DeanHankThaddeusBrock2 双击

  节点，li文本将会高亮显示。

  3 删除li，输入button，然后回车。

  节点将会变为节点。

  以HTML格式修改要使用HTML语法高亮和自动补全功能编辑节点，可在节点的下拉菜单中选择以HTML格式修改。

  1 右键点击下面的Leonard并选择检查。

  PennyHowardRajeshLeonard2 在元素面板，右键点击当前节点，在下拉菜单中选择以HTML格式修改。

  3 回车来开始新的一行，并输入

  提示：DevTools 也可以自动完成 DOM 属性。

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

  5 在标签内键入 Sheldon，然后按 Control / Command + Enter 应用更改。

  重新排序 DOM 节点拖动节点来重新排序。

  1 右键点击下面的Elvis Presley并选择检查。注意它是列表中的最后一项。

  Stevie WonderTom WaitsChris ThileElvis Presley2 在DOM树中，拖拽

  Elvis Presley

  到列表的顶部。

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

  1 悬停在下面的The Lord of the Flies上。它的背景色会变为橙色。

  The Lord of the FliesCrime and PunishmentMoby Dick2 右键点击上面的The Lord of the Flies，并选择检查。

  3 右键点击

  The Lord of the Flies

  ，选择强制执行状态 > :hover。如果您没有看到对应的选项，请查看

  附录：缺少选项。即使您实际上并未将鼠标悬停在节点上，背景颜色仍保持橙色。

  隐藏节点按H键可以隐藏节点。

  1 右键点击下面的The Stars My Destination并选择检查。

  The Count of Monte CristoThe Stars My Destination2 按下H键，该检点就会被隐藏。

  3 再次按下H键，该节点又会出现。

  删除节点按下Delete键可以删除节点。

  1 右键点击下面的Foundation并选择检查。

  The Illustrated ManThrough the Looking-GlassFoundation2 按下Delete键，该节点就会被删除。

  3 按下Control+Z或者Command+Z (Mac)，上一次操作会被撤销，该节点会重现出现。

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

  用 $0 引用当前选择的节点当您检查一个节点时，该节点旁边的 == $0 文本意味着您可以在控制台中使用变量$0引用该节点。

  1 右键点击下面的The Left Hand of Darkness并选择检查。

  The Left Hand of DarknessDune2 按下Escape键可打开控制台抽屉。

  3 输入$0并回车，表达式的结果显示$0的计算结果为

  The Left Hand of Darkness

  。

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

  5 在DOM树中点击

  Dune

  ，在控制台中再次输入$0并回车。现在，$0就等于

  Dune

  。

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

  1 右键点击下面的The Big Sleep并选择检查。

  The Big SleepThe Long Goodbye2 右键点击DOM树中的

  The Big Sleep

  ，并选择存储为全局变量。如果您没有看到对应的选项，请查看

  附录：缺少选项。

  3 在控制台输入temp1并回车。表达式的结果显示变量计算为节点。

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

  1 右键点击下面的The Brothers Karamazov并选择检查。

  The Brothers KaramazovCrime and Punishment2 在DOM树中右键点击

  The Brothers Karamazov

  并选择复制 > 复制JS路径。一条解析为节点的 document.querySelector() 表达式已复制到剪贴板。

  3 按下Control+V或者Command+V (Mac) 可在控制台粘贴该表达式。

  4 按下回车可执行这条表达式。

  在 DOM 更改时中断DevTools 允许您在 JavaScript 修改 DOM 时暂停页面的 JavaScript。请参阅 DOM 更改断点。

  下一步本文已经涵盖了 DevTools 中大多数与 DOM 相关的功能。您可以通过右键单击 DOM 树中的节点并尝试本教程中未涵盖的其他选项来发现它们的其余部分。也可以查看元素面板快捷键。

  查看Chrome DevTools主页，了解您可以使用 DevTools 做的所有其他事情。

  如果您想联系 DevTools 团队或从 DevTools 社区获得帮助，请参阅社区。

  附录：HTML 与 DOM本节将会快速解释 HTML 和 DOM 之间的区别。

  当您用一个web浏览器请求一个网页（比如https://example.com），服务器会返回类似下方的HTML：

  Hello, world!

  This is a hypertext document on the World Wide Web.

  浏览器解析 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 节点并将另一个p节点添加到 DOM。完整的 DOM 现在看起来像这样：

  html head title body p script p该页面的 HTML 现在与其 DOM 不同。换句话说，HTML 表示初始页面内容，DOM 表示当前页面内容。当 JavaScript 添加、删除或编辑节点时，DOM 变得不同于 HTML。

  查看 Introduction to the DOM 以了解更多。

  附录：滚动到视野范围内这是滚动到视野范围内部分的延续。按照以下说明完成该部分。

  1 在DOM树中，

  Magritte

  节点应该仍是被选中的。如果未被选中，请回到滚动到视野范围内并重新开始。

  2 右键点击

  Magritte

  节点然后选择滚动到视野范围内。这时您的视口会滚动到可以看见Magritte节点处。如果您没有看到滚动到视野范围内选项，请查看附录：缺少选项。

  附录：缺少选项本教程中的许多说明都指导您右键单击 DOM 树中的一个节点，然后从弹出的上下文菜单中选择一个选项。如果您在上下文菜单中没有看到指定的选项，请尝试在节点文本以外的地方单击鼠标右键。