Studio 編輯器：使用 DOM 順序
文件物件模型（DOM）是指網站頁面的結構，並決定元件的 Tab 鍵巡覽與載入順序。妥善安排網站的 DOM 順序，有助於改善無障礙與效能，並為訪客提供更優質的體驗。
小提示：
網站使用堆疊和 FlexBox 等較複雜的版面配置工具時，依 DOM 順序安排元件尤其重要。
DOM 順序的重要性
DOM 順序決定頁面元件的載入、閱讀和 Tab 鍵巡覽順序，因此可能影響網站的以下層面：
- 無障礙：部分網站訪客可能會使用螢幕助讀程式及／或 Tab 鍵等輔助技術瀏覽網站。網站的 DOM 會決定螢幕助讀程式的閱讀順序，以及使用 Tab 鍵巡覽的順序。深入了解 DOM 與無障礙。
- 效能：DOM 會決定網站元件的載入順序。因此，讓 DOM 順序與元件的視覺順序一致，即可建立符合邏輯的載入體驗。深入了解 DOM 與效能。
- SEO 排名：一致且符合邏輯的結構有助於改善無障礙與網站載入速度，也可能提升網站的 SEO 排名。
因此，符合邏輯的 DOM 順序相當重要，可為網站訪客提供最佳體驗。例如，網站選單應排在最前面，後面依序為頁首的其他元件、頁面標題、頁面內容等。
自動 DOM 順序
自動 DOM 會根據頁面元件的視覺順序排列，也就是由左至右、由上至下。新增、對齊元件或調整元件大小時，DOM 順序會自動重新排列，讓順序隨操作保持最佳化。
停用自動 DOM
如果發現正在處理的網站有 DOM 順序問題，可在整個網站停用此功能。如果只有特定元件發生問題，則可針對個別區段、容器，以及區段內的格線儲存格停用此功能。
選擇選項，了解停用自動 DOM 的方法：
整個網站
。
區段和容器
區段內的格線儲存格
使用相黏元件和區段？
手動變更元件的 DOM 順序
關閉自動 DOM 順序後，可手動變更順序，使其符合元件的視覺順序（由左至右、由上至下）。
若要手動變更 DOM 順序：
- 點擊編輯器左側的「圖層」
。 - 選擇要整理的內容：
- 區段內的元件：
- 選擇區段即可展開。
- 將元件拖放到正確位置。
- 區段：
- 將滑鼠游標移至最上方的區段，然後點擊「更多操作」圖示
。 - 點擊「排列」。
- 點擊「移至最前方」。
- 按照面板中由上至下的順序，對所有其他區段重複步驟 i 至 iii。
- 將滑鼠游標移至最上方的區段，然後點擊「更多操作」圖示
- 區段內的元件：
重新整理 DOM 順序
只要點擊一次，即可重新排列區段、FlexBox 或堆疊中的元件 DOM 順序，也可重新排列整個頁面的 DOM 順序。系統會最佳化順序，使其符合元件的視覺順序（由左至右、由上至下）。
若要重新整理頁面的 DOM 順序：
- 點擊編輯器左側的「頁面」
。 - 選擇相關頁面。
- 點擊「更多操作」圖示。
- 點擊「重新整理 DOM 順序」。
若要重新整理元件的 DOM 順序：
- 點擊編輯器左側的「圖層」。
- 選擇相關的區段、FlexBox 或堆疊。
- 點擊「更多操作」圖示 。
- 點擊「重新整理 DOM 順序」。
常見問題
選擇問題，深入了解網站的 DOM 順序。
如何檢查正在建立的網站 DOM 順序？
自動 DOM 在網站頁面上如何運作？
還可在哪裡啟用自動 DOM？
自動 DOM 是否也會套用至其他位置？
在「圖層」面板中重新排列元件會如何影響自動 DOM？
DOM 如何配合網站語言運作？