Studio 編輯器：使用 DOM 順序
4 分鐘
文件物件模型（DOM）是指網站頁面的結構方式，並決定元件的索引標籤和載入順序。整理網站的 DOM 順序可提升無障礙程度與表現，並為訪客提供更好的體驗。
值得留意：
在網站上使用堆疊和 FlexBox 等較複雜的版面配置工具時，依 DOM 順序整理元件尤為重要。
DOM 順序的重要性
DOM 順序決定頁面元件的載入、閱讀和索引標籤順序。這代表其會影響網站的：
- 無障礙：部分網站訪客可能會使用輔助技術瀏覽網站，例如螢幕助讀程式及／或 Tab 金鑰。網站的 DOM 決定螢幕助讀程式閱讀的順序以及索引標籤順序。瞭解更多關於 DOM 與無障礙的資訊。
- 表現：DOM 決定網站元件載入的順序。因此，讓 DOM 順序與元件的視覺順序一致，即可建立邏輯化的載入體驗。瞭解更多關於 DOM 與表現的資訊。
- SEO 排名：由於對齊且具邏輯性的結構可提升無障礙程度與網站載入速度，因此也可能提高網站的 SEO 排名。
邏輯性的 DOM 順序非常重要，因為這能確保網站訪客獲得最佳體驗。例如，網站選單應排在第一位，接著是頁首中的其餘元件，然後是頁面標題，最後才是頁面內容等。
自動 DOM 順序
自動（Auto）DOM 是根據頁面元件的視覺順序（由左至右且由上至下）。DOM 順序會隨著新增、對齊和調整大小元件而自動重新排列，因此應能在操作過程中保持最佳化。
停用自動 DOM 順序
若發現正在處理的網站 DOM 順序出現問題，可針對整個網站停用此功能。若特定元件出現問題，則可針對個別區段、容器以及區段內的格線儲存格停用此功能。
選擇選項以了解停用自動 DOM 順序的方法：
整個網站
。
區段與容器
區段中的格線儲存格
如何處理相黏元件與區段？
手動變更元件的 DOM 順序
關閉自動 DOM 順序後，即可手動變更順序以符合元件的視覺順序（由左至右、由上至下）。
若要手動變更 DOM 順序：
- 點擊編輯器左側的圖層
。 - 選擇想要整理的項目：
- 區段內的元件：
- 選擇區段以將其開啟。
- 將元件拖放至正確位置。
- 區段：
- 將游標懸停在頂部區段，然後點擊更多操作圖示
。 - 點擊排列。
- 點擊移至最前。
- 對所有其他區段重複步驟 i-iii，在面板中由上而下進行。
- 將游標懸停在頂部區段，然後點擊更多操作圖示
- 區段內的元件：
重新整理 DOM 順序
點擊即可重新排列區段、FlexBox、堆疊或整個頁面中的元件 DOM 順序。系統已將順序最佳化，以符合元件的視覺順序（由左至右且由上至下）。
若要重新整理頁面的 DOM 順序：
- 點擊編輯器左側的頁面
。 - 選擇相關頁面。
- 點擊更多操作圖示 。
- 點擊重新整理 DOM 順序。
若要重新整理元件的 DOM 順序：
- 點擊編輯器左側的圖層 。
- 選擇相關區段、FlexBox 或堆疊。
- 點擊更多操作圖示 。
- 點擊重新整理 DOM 順序。
常見問題
選擇問題以瞭解更多關於網站 DOM 順序的資訊。
如何檢查正在建置的網站 DOM 順序？
自動 DOM 順序如何在網站頁面運作？
還可以在哪裡啟用自動 DOM 順序？
自動 DOM 順序是否套用於其他地方？
如果在圖層面板中重新排列元件，自動 DOM 會發生什麼變化？
DOM 順序如何搭配網站語言運作？