了解如何使用 DOM 面板,以 HTML 標記對應「即時檢視」中的元素或 CSS 設計工具中套用的選取器來編輯 HTML 結構。

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

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

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

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

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

註解:

您只能在 DOM 面板中編輯靜態內容。唯讀或動態元素會以較暗的灰色陰影顯示。

DOM 面板
DOM 面板

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

如何使用 DOM 面板

  1. 開啟所需的文件,然後選擇「視窗 > DOM」來開啟 DOM 面板

  2. 切換到「即時檢視」,然後按一下您要檢視或編輯的元素。

    • 所選擇元素的 HTML 標記會在 DOM 面板中反白標示。 
    • 已套用的選取器會在 CSS 設計工具中反白標示。
    • 相關的程式碼會在「程式碼檢視」中反白標示。
    • 相關的標籤會在「標籤選取器」中以藍色反白標示。

    或者,您可以在 DOM 面板中選擇 HTML 元素。當您在 DOM 面板中按一下任何元素:

    • 即時檢視」會捲動至相對應的元素。
    • 若已開啟「程式碼檢視」,則「程式碼檢視」會捲動至對應於該元素的程式碼。
    • CSS 設計工具 (「選取器」面板) 會捲動至最接近的相對應選取器 (類似於在「即時檢視」中按一下該元素)。
    • 標籤會在「標籤選取器」中反白標示。

    不同檢視與 CSS 設計工具之間的這種同步作業,可讓您迅速將與所選取元素相關聯的 HTML 標記和樣式視覺化。 

  3. 視需要繼續編輯元素 (HTML 或 CSS 編輯)。如需使用 DOM 面板來編輯 HTML 標記的詳細資訊,請參閱「使用 DOM 面板編輯 HTML 結構」。如需 CSS 設計工具的詳細資訊,請參閱「使用 CSS 設計工具配置頁面」。

使用 DOM 面板編輯 HTML 結構

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

  • 若要選取某個元素或節點,請按一下該元素或節點。若要展開或收合元素或節點,請按一下 HTML 標籤,或按兩下標籤旁邊的選取器。
  • 若要複製元素或節點,請以滑鼠右鍵按一下該元素或節點,然後按一下「複製」。當您複製元素及與其相關聯的 ID 時,ID 會遞增為新 (重複) 的元素。
  • 若要複製元素或節點,請以滑鼠右鍵按一下該元素或節點,然後按一下「複製」。如果您複製有子項的元素,子元素也會複製。
  • 若要貼上元素或節點,請按一下要將複製元素以巢狀方式嵌入其下的元素或節點。然後,以滑鼠右鍵按一下該元素或節點,再按一下「貼上」。 
  • 若要將複製的元素貼上做為特定元素或節點的子項,請以滑鼠右鍵按一下元素或節點 (上層),然後按一下「貼成子項」。
  • 若要移動或重新排列元素,請將元素拖到 DOM 面板內的所需位置。

一條綠線隨即顯示,為所拖曳元素定出將放下的位置。如果將所拖曳元素放到以灰色反白標示的元素 (參考元素) 上方,則所放下元素將定位為該元素的第一個子元素。

  • 若要刪除元素或節點,請以滑鼠右鍵按一下該元素或節點,然後按一下「刪除」。

您可以還原 (Ctrl/Cmd + Z) 或重做 (Ctrl/Cmd + Y) 您在 DOM 面板中執行的作業。

鍵盤快速鍵:

  • 重製 - Ctrl + D (Win)/ Cmd + D (Mac)
  • 刪除 - Del 或 Backspace
  • 複製 - Ctrl + C (Win)/Cmd + C (Mac)
  • 貼上 - Ctrl + V (Win)/Cmd + V (Mac)
  • 還原 - Ctrl + Z (Win)/Cmd + Z (Mac)
  • 重做 - Ctrl + Y (Win)/Cmd + Y (Mac)

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

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

註解:

通常在編輯頁面時,「文件」工具列中的「重新整理」按鈕會變成「停止」按鈕,表示正在重新載入頁面。重新載入頁面之後,「重新整理」按鈕會再次出現,表示頁面載入完成。

DOM 面板中的編輯選項
DOM 面板中的編輯選項

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

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

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

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

編輯類別
編輯類別

在 DOM 面板中插入元素

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

  • 在 DOM 面板中按空格鍵或按一下所要元素旁邊的插入圖示。在出現的彈出式視窗中,按一下其中一個選項。若要使用標籤圍繞多個元素,請選取所要的元素,然後從插入選項中選擇「用標籤圍繞」。
預留位置 div 標籤隨即插入並以編輯模式顯示。您可以輸入所要的標籤名稱來取代 div 標籤。
DOM 面板的插入選項
DOM 面板的插入選項

  • 在「插入」面板中按一下所要的元素,然後拖曳至 DOM 面板中。即時導引線隨即出現,指示將插入元素的位置。將元素放到所要的位置。

當您使用 DOM 面板插入標籤時,也會插入標籤的預設 (預留位置) 文字和必要屬性:

  • 當您插入下列任一個標籤並認同變更時,便會在「程式碼」、「即時」和「設計」檢視中插入預設文字:
    divheadernavasidearticlesectionfooterh1-h6hgroup
  • 當您插入 table 標籤並認同變更時,便會插入 3X3 表格。
  • 當您插入 embedimg 標籤並認同變更時,便會顯示「選取檔案」對話方塊,並提示您選取適當的檔案。
  • 當您插入 meta 標籤並認同變更時,便會在「程式碼檢視」中新增下列程式碼:<meta name="" content="">
  • 當您插入 figure 標籤並認同變更時,便會插入具有巢狀 figcaption 的 figure 標籤。
  • 當您插入 ulol 標籤並認同變更時,便會插入具有巢狀 li 標籤的 ol/ul 標籤。

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策