DOM 面板

上次更新日期： 2021年4月29日

了解如何通过映射实时视图中的元素或 CSS Designer 中应用的选择器及其 HTML 标记，使用 DOM 面板来编辑 HTML 结构。

DOM 面板呈现包含静态和动态内容的交互式 HTML 树。此视图有助于直观地在实时视图中通过 HTML 标记以及 CSS Designer 中所应用的选择器，对元素进行映射。您也可在 DOM 面板中编辑 HTML 结构，并在实时视图中查看即时生效的更改。

要打开 DOM 面板，请选择“窗口”>“DOM”。也可使用键盘快捷键（Ctrl + /（在 Windows 中）；Cmd + /（在 Mac 中）），打开 DOM 面板。

当您拖动元素以直接将其插入实时视图时，在放置元素之前会出现 </> 图标。您可以单击此图标打开 DOM 面板并在文档结构中的适当位置插入此元素。有关详细信息，请参阅直接在“实时视图”中插入元素。

DOM 面板在代码视图或设计视图中仅显示静态元素，在实时视图中则同时显示静态和动态元素。

在流体网格文档中，DOM 面板只能将 HTML DOM 结构可视化，而不能编辑 HTML 结构。

注意:

在 DOM 面板中，您只能编辑静态内容。只读或动态元素以较深的灰色阴影显示。

可将 DOM 面板移动到用户界面上的任意便利位置。您还可以将此面板与其他面板一起停放。

如何使用 DOM 面板

打开所需的文档，然后依次选择“窗口”>“DOM”即可打开 DOM 面板。
切换至实时视图，并单击希望检查或编辑的元素。
- 选定元素的 HTML 标记在 DOM 面板中突出显示。
- 所应用的选择器在 CSS Designer 中突出显示。
- 相关代码在代码视图中突出显示。
- 相关标签在标签选择器中（以蓝色）突出显示。
或者，您可以在 DOM 面板中选择一个 HTML 元素。当您单击 DOM 面板中的任何元素时：
- 实时视图滚动到相应的元素。
- 如果代码视图打开，则代码视图滚动到与该元素对应的代码。
- CSS Designer（选择器窗格）滚动到最接近的相应选择器（类似于在实时视图中单击元素）。
- 此标签在标签选择器中突出显示。
不同视图和 CSS Designer 之间的同步让您能够概览与选定元素相关联的 HTML 标记和样式。
继续根据要求编辑该元素（HTML 或 CSS 编辑）。有关使用 DOM 面板编辑 HTML 标记的信息，请参阅使用 DOM 面板编辑 HTML 结构。有关 CSS Designer 的信息，请参阅使用 CSS Designer 对页面进行布局。

页面上当前选定的元素在 DOM 面板中突出显示。可使用箭头键，导航到任意节点或元素。

键盘快捷键：

出现的绿线指明放置拖动的元素的位置。如果将元素放在灰色突出显示的元素（引用元素）上面，则放置的元素将被作为参考元素的第一个子项。

注意：可撤销 (Ctrl/cmd + Z) 或还原 (Ctrl/cmd + Y) 在 DOM 面板中执行的操作。

要对多个元素执行上面提及的编辑操作，请在 DOM 面板中选择多个元素：

注意:

通常，在编辑页面后，“文档”工具栏中的“刷新”按钮将变为“停止”按钮，指示正在重新加载该页面。重新加载页面后，将再次出现“刷新”按钮以指示页面已加载完毕。

重要说明：如果页面包含 JavaScript，则 DOM 面板中的右键单击菜单将显示一会儿，然后变为不可用。要使用右键单击菜单，请隐藏实时视图显示（“实时视图选项”>“隐藏实时视图显示”），然后禁用 JavaScript（“实时视图选项”>“禁用 JavaScript”）。

可以通过在 DOM 面板中双击标签、类和 ID 对它们进行编辑。您还可以添加其他类或 ID，并使用空格来分隔它们。对于未与类或 ID 关联的标签，您可以在双击标签后键入类或 ID 的名称。

在您开始键入标签、类或 ID 名称时显示代码提示。要将提示缩小至类，请以圆点开始键入。要仅在提示中查看 ID，请以井号 (#) 开始键入。

您现在可以使用 DOM 面板通过以下方式之一将新元素插入到您的网页中：

按空格键或单击 DOM 面板中与所需元素相邻的插入图标。在显示的弹出菜单中，单击其中一个选项。要将多个元素包含在一个标签中，请选择所需元素，然后从插入选项中选择“环绕标签”。

使用 DOM 面板插入标签时，也会插入标签的默认（占位符）文本和必需属性：

插入下列任何标签并提交更改时，都会在“代码”、“实时”和“设计”视图中插入默认文本：
div、header、nav、aside、article、section、footer、h1-h6 以及 hgroup
插入 table 标签并提交更改时，会插入一个 3X3 表格。
插入 embed 或 img 标签并提交更改时，会出现“选择文件”对话框，提示您选择一个适当的文件。
插入 meta 标签并提交更改时，会在代码视图中添加下列代码：<meta name="" content="">
插入 figure 标签并提交更改时，会插入带嵌套 figcaption 的 figure 标签。
插入 ul 或 ol 标签并提交更改时，会插入带嵌套 li 标签的 ol/ul 标签。

新用户？