开始查看和更改 DOM

凯切·巴斯克斯
Kayce Basques
索菲亚·埃梅利安诺娃
Sofia Emelianova

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

本辅导手册假设您了解 DOM 和 HTML 之间的区别。有关说明,请参阅附录:HTML 与 DOM

查看 DOM 节点

在 Element 面板的 DOM Tree 中,您可以在开发者工具中执行所有与 DOM 相关的活动。

检查节点

如果您对特定 DOM 节点感兴趣,可以通过 Inspect 这种快速打开开发者工具并调查该节点。

  1. 右键点击下方的米开朗基罗,然后选择检查
    • 米开朗基罗
    • Raphael 检查节点 开发者工具的 Elements 面板随即会打开。 <li>Michelangelo</li>DOM 树中突出显示。 突出显示 Michelangelo< 节点
  2. 点击开发者工具左上角的检查图标。 “Inspect”(检查)图标
  3. 点击下面的东京文字。

    • 东京
    • 贝鲁特

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

检查节点也是查看和更改节点样式的第一步。请参阅查看和更改 CSS 使用入门

使用键盘浏览 DOM 树

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

  1. 右键点击下方的 Ringo,然后选择检查。在 DOM 树中选择 <li>Ringo</li>

    • George
    • 飞环
    • Paul
    • John

      检查 Ringo 节点

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

    检查 ul 节点

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

  4. 再次按向左键。已选择 <ul> 节点的父节点。在本例中,它是包含第 1 步的说明的 <li> 节点。

  5. 向下箭头键 3 次,以重新选择刚刚收起的 <ul> 列表。显示的内容应如下所示:<ul>...</ul>

  6. 向右箭头键。系统会展开列表。

滚动到视野范围内

查看 DOM 树时,有时您会发现自己对当前不在视口内的 DOM 节点感兴趣。例如,假设您已滚动到页面底部,并且对页面顶部的 <h1> 节点感兴趣。Scroll into view 可让您快速调整视口位置,以便您可以看到节点。

  1. 右键点击下方的 Magritte,然后选择检查

    • 马格里特
    • 南瓜
  2. 请参阅本页面底部的附录:滚动进入视图部分。 然后继续按说明操作。

完成页面底部的说明后,您应返回到此处。

显示标尺

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

尺子。

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

  • Ctrl+Shift+PCommand+Shift+P (Mac) 打开 Command 菜单,输入 Show rulers on hover,然后按 Enter
  • 依次选择 设置。 Settings > Preferences > Elements > 在光标悬停时显示标尺

标尺的尺寸调整单位为像素。

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

  1. 将光标放在元素面板上。
  2. Ctrl+FCommand+F (Mac)。 搜索栏会在 DOM 树的底部打开。
  3. 输入 The Moon is a Harsh Mistress。最后一个语句在 DOM 树中突出显示。

    在搜索栏中突出显示查询

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

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

为避免在节点之间出现不必要的跳转,请清除 设置。 Settings > Preferences > Global > Search as your type 复选框。

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

编辑 DOM

您可以即时修改 DOM,看看这些更改对网页有何影响。

修改内容

要编辑节点的内容,请在 DOM 树中双击相应内容。

  1. 右键点击下方的 Michelle,然后选择检查

    • 薯条
    • 小麦
  2. 在 DOM 树中,双击 Michelle。也就是说,双击 <li></li> 之间的文本。文本以蓝色突出显示,表示其处于选中状态。

    编辑文本

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

修改属性

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

  1. 右键点击下方的 Howard,然后选择 Inspect

    • Howard
    • 文斯
  2. 双击 <li>。系统会突出显示文本,指示节点已被选中。

    修改节点

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

    向节点添加样式属性

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

右键点击选项并突出显示修改属性。

修改节点类型

要修改节点类型,请双击该类型,然后输入新类型。

  1. 右键点击下方的 Hank,然后选择 Inspect

    • 院长
    • 汉克
    • 塔迪乌斯
    • Brock
  2. 双击 <li>。突出显示文本 li

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

    将节点类型更改为按钮

以 HTML 格式修改

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

  1. 右键点击下方的 Leonard,然后选择检查

    • 一分
    • Howard
    • 李杰
    • Leonard
  2. 元素面板中,右键点击当前节点,然后从下拉菜单中选择以 HTML 形式修改

    节点的下拉菜单。

  3. Enter 键另起一行,并输入 <l。开发者工具会突出显示 HTML 语法并为您自动补全标签。

    HTML 标记的自动补全。

  4. 从自动补全菜单中选择 li 元素,然后输入 >。开发者工具会自动在光标后面添加结束的 </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 Flies,然后选择 Inspect

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

隐藏节点

H 可隐藏节点。

  1. 右键点击下方的 The Stars My Destination,然后选择 Inspect

    • 基督山伯爵
    • 《星光》,我的目的地
  2. H 键。节点已隐藏。您也可以右键点击节点,然后使用隐藏元素选项。

    节点隐藏后在 DOM 树中是什么样子

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

删除一个节点

Delete 可删除节点。

  1. 右键点击下方的 Foundation,然后选择 Inspect

    • 插图的人
    • 透过望远镜
    • 基本知识
  2. Delete 键。节点会被删除。您也可以右键点击节点,然后使用删除元素选项。

  3. Ctrl+ZCommand+Z (Mac)。 最后一项操作已撤消,节点会重新出现。

在控制台中访问节点

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

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

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

  1. 右键点击下方的黑暗左手,然后选择检查

    • 黑暗的左手
    • 沙丘
  2. Esc 键打开控制台抽屉。

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

    • 卡拉马佐夫兄弟
    • 犯罪和惩罚
  2. 右键点击 DOM 树中的 <li>The Brothers Karamazov</li>,然后依次选择 Copy > Copy JS Path。解析为节点的 document.querySelector() 表达式已复制到剪贴板。

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

  4. Enter 键对表达式求值。

    “Copy JS Path”表达式的结果

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

如果未看到所有选项,在哪里点击