DOM 面板

DOM 面板會為靜態和動態內容產生互動式 HTML 樹狀結構。這種檢視可協助您以視覺方式對應「即時檢視」中的元素與其 HTML 標記，以及 CSS 設計工具中已套用的選取器。您也可以在 DOM 面板中編輯 HTML 結構，並立即在「即時檢視」中看到變更生效。

若要開啟 DOM 面板，請選擇「視窗 > DOM」。您也可以使用鍵盤按鍵 - Ctrl+/ (Win)、Cmd+/ (Mac) - 來開啟 DOM 面板。

當您拖曳元素，直接將其插入「即時檢視」時，</> 圖示會在您置放元素之前出現。您可以按一下這個圖示開啟 DOM 面板，並在文件結構中的適當位置插入元素。如需詳細資訊，請參閱「直接在即時檢視中插入元素」。

DOM 面板只會在「程式碼」或「設計」檢視中顯示靜態元素，或在「即時」檢視中顯示靜態和動態元素。

在流變格線文件中，DOM 面板只能讓您將 DOM HTML 結構視覺化，而且不會讓您編輯 HTML 結構。

您可以隨意移動 DOM 面板，並將它放置在用戶介面上任何方便的位置。您也可以將面板及其他面板一起固定。

使用 DOM 面板編輯 HTML 結構

頁面上目前已選取的元素會在 DOM 面板中反白標示。您可以使用方向鍵，瀏覽到任何節點或元素。

若要在多個元素上執行上述編輯作業，請在 DOM 面板中選取多個元素：

• Shift + 按一下所需的元素，以進行連續選取
• Ctrl + 按一下所需的元素，以進行非連續選取

重要事項：如果您的頁面包含 JavaScript，DOM 面板中的按滑鼠右鍵選單會先顯示片刻，然後變成無法使用。若要使用按滑鼠右鍵選單，請隱藏「即時檢視顯示」(「即時檢視選項 > 隱藏即時檢視顯示」)，然後停用 JavaScript (「即時檢視選項 > 停用 JavaScript」)。

在 DOM 面板中編輯標籤、類別和 ID

您可以在 DOM 面板中按兩下標籤、類別和 ID，即可編輯它們。您也可以用空格分隔的方式來新增額外的類別或 ID。對於未與類別或 ID 相關聯的標籤，您可以在按兩下標籤後輸入類別或 ID 的名稱。

當您開始輸入標籤、類別或 ID 名稱時，程式碼提示就會出現。若要縮小提示至類別，請以點 (.) 做為開頭開始輸入。若只要在提示中顯示 ID，請以井字號 (#) 做為開頭開始輸入。

在 DOM 面板中插入元素

您現在可以透過下列其中一種方式，使用 DOM 面板將新元素插入您的網頁：

• 在 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 標籤。