开始查看和更改 DOM

Sofia Emelianova
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

      检查 Ringo 节点

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

    检查 ul 节点

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

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

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

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

滚动到视图中

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

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

    • 马格里特
    • 苏廷
  2. 转到本页底部的附录:滚动到视图部分。 继续按照说明操作。

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

显示标尺

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

标尺。

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

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

标尺的尺寸单位是像素。

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

  1. 将光标置于Elements面板上。
  2. Ctrl+FCommand+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>。 节点。

    将节点类型更改为“button”

以 HTML 格式修改

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

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

    • 一分
    • Howard
    • Rajesh
    • Leonard
  2. Elements面板中,右键点击当前节点,然后从下拉菜单中选择Elements

    节点的下拉菜单。

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

    HTML 标记自动补全。

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

    DevTools 会自动关闭标记。

  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 键。节点已隐藏。您还可以右键点击节点并使用隐藏元素选项。

    节点隐藏后在 DOM 树中的显示效果

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

删除一个节点

Delete 可删除节点。

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

    • 《画风人》
    • 透过视镜
    • 基础
  2. Delete 键。该节点会被删除。您也可以右键点击节点,然后使用 Delete element 选项。

  3. Ctrl+ZCommand+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>

    控制台中第一个 $0 表达式的结果

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

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

    控制台中第二个 $0 表达式的结果

存储为全局变量

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

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

    • 《大睡》
    • 漫长的再见
  2. 右键点击 DOM 树中的 <li>The Big Sleep</li>,然后选择 Store as global 变量。如果您没有看到此选项,请参阅附录:缺少选项

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

    temp1 表达式的结果

复制 JS 路径

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

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

    • 卡拉马佐夫兄弟
    • 犯罪与惩罚
  2. 右键点击 DOM 树中的 <li>The Brothers Karamazov</li>,然后选择 复制 >复制 JS 路径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 一样,但假设脚本在 运行以下代码:

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

如果此处未列出所有选项,可点击哪些选项