開始查看及變更 DOM

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

觀看影片並完成這些互動式教學課程，瞭解如何使用 Chrome 開發人員工具查看及變更網頁 DOM 的基本概念。

本教學課程假設您瞭解 DOM 和 HTML 的差異。請參閱附錄：HTML 與 DOM，複習相關概念。

查看 DOM 節點

您可以在「元素」面板的 DOM 樹狀結構中，執行所有與 DOM 相關的開發人員工具活動。

檢查節點

如果您對特定 DOM 節點感興趣，可以使用「檢查」快速開啟開發人員工具，並調查該節點。

  1. 在下列清單中，在「Michelangelo」上按一下滑鼠右鍵。在選單中選取「檢查」。

    • 米開朗基羅
    • 拉斐爾

    開發人員工具的「Elements」面板隨即開啟。<li>Michelangelo</li> 在 DOM 樹狀結構中會醒目顯示。

    醒目顯示米開朗基羅節點

  2. 按一下 「選取元素」。

  3. 從下列清單中選取「Tokyo」。

    • 東京
    • 貝魯特

    <li>Tokyo</li> 在 DOM 樹狀結構中會醒目顯示。

檢查節點也是查看及變更節點樣式和 CSS 的第一步。

使用鍵盤瀏覽 DOM 樹狀結構

在 DOM 樹狀結構中選取節點後，即可使用鍵盤瀏覽 DOM 樹狀結構。

  1. 在下列清單中，對「Ringo」按一下滑鼠右鍵，然後選取「檢查」。 在 DOM 樹狀結構中選取 <li>Ringo</li>。

    • 小喬
    • 波蘭林哥球運動
    • Paul

    • John

      檢查 Ringo 節點

  2. 按 2 下向上鍵，已選取「<ul>」。

    檢查 ul 節點

  3. 按向左鍵。<ul> 清單會收合。

  4. 再次按下向左鍵。系統會選取 <ul> 節點的父項。在本例中，這是包含步驟 1 指令的 <li> 節點。

  5. 按 3 次向下鍵，重新選取剛才收合的 <ul> 清單。如下所示：<ul>...</ul>

  6. 按向右鍵。清單會展開。

捲動至檢視畫面

查看 DOM 樹狀結構時，有時會發現 DOM 節點不在可視區域中。舉例來說，假設您捲動到頁面底部，但對頁面頂端的 <h1> 節點感興趣。「Scroll into view」可讓您快速重新調整可視區域的位置，以便查看節點。

  1. 在下列清單中，對「Magritte」按一下滑鼠右鍵，然後選取「檢查」。

    • 馬格利特
    • Soutine

  2. 如需其他操作說明，請捲動至附錄部分 捲動至檢視畫面。

完成後，您應該會跳回這個部分。

顯示尺規

在檢視區中顯示尺規後，只要將滑鼠游標懸停在「Elements」面板中的元素上，即可測量元素的寬度和高度。

如要啟用尺規，請採取下列任一做法：

  • 按下 Control+Shift+P 鍵或 Command+Shift+P 鍵 (macOS) 開啟指令選單，輸入 Show rulers on hover，然後按下 Enter 鍵。
  • 查看 依序前往「設定」 >「偏好設定」 >「元素」 >「將滑鼠游標懸停在元素上時顯示尺規」。

尺規的尺寸單位為像素。

您可以依字串、CSS 選取器或 XPath 選取器搜尋 DOM 樹狀結構。

  1. 將游標移至「Elements」面板。
  2. 按下 Control+F 鍵或 Command+F 鍵 (macOS)。 搜尋列會在 DOM 樹狀結構底部開啟。

  3. 輸入「The Moon is a Harsh Mistress」。DOM 樹狀結構中會醒目標示最後一句。

    在搜尋列中醒目顯示查詢。

搜尋列也支援 CSS 和 XPath 選取器。

「Elements」面板會選取 DOM 樹狀結構中的第一個相符結果，並在可視區域中捲動至該結果。根據預設，系統會在您輸入時執行這項操作。如果您經常使用長搜尋查詢，可以設定 DevTools 僅在按下 Enter 鍵時才執行搜尋。

如要避免在節點之間不必要地跳轉，請清除中的「Settings」 >「Preferences」 >「Global」 >「Search as you type」核取方塊。

在「設定」中取消勾選「即時搜尋」核取方塊。

編輯 DOM

您可以即時編輯 DOM，並查看這些變更對網頁的影響。

編輯內容

如要編輯節點內容，請在 DOM 樹狀結構中按兩下內容。

  1. 在下列清單中，對著「Michelle」按一下滑鼠右鍵，然後選取「檢查」。

    • Fry
    • 雪兒

  2. 在 DOM 樹狀結構中，按兩下 Michelle。也就是說，請按兩下 <li> 和 </li> 之間的文字。文字會以藍色醒目顯示，表示已選取。

    編輯文字

  3. 刪除 Michelle，輸入 Leela，然後按 Enter 鍵確認變更。文字會從「Michelle」變更為「Leela」。

編輯屬性

如要編輯屬性，請按兩下屬性名稱或值。請按照這些操作說明，瞭解如何將屬性新增至節點。

  1. 在下方清單中，對「Howard」按一下滑鼠右鍵，然後選取「檢查」。

    • Howard
    • Vince

  2. 展開 <ul>，然後按兩下 <li> 進行編輯。文字會醒目顯示，表示已選取節點。

    點選後，節點會醒目顯示，表示已選取。

  3. 按下向右鍵，加入空格，輸入 style="background-color:gold"，然後按下 Enter 鍵。節點的背景顏色會變成金色。

    在節點中新增樣式屬性

編輯節點類型

如要編輯節點類型，請按兩下類型，然後輸入新類型。

  1. 在下列清單中，在「Hank」上按一下滑鼠右鍵，然後選取「檢查」。

    • Dean
    • 漢克
    • Thaddeus
    • Brock

  2. 按兩下 <li>。文字 li 會醒目顯示。

  3. 刪除 li，輸入 button，然後按下 Enter 鍵。<li> 節點會變更為 <button> 節點。

    將節點類型變更為按鈕

以 HTML 格式編輯

如要以 HTML 格式編輯節點，並啟用語法醒目顯示和自動完成功能，請在節點的下拉式選單中選取「Edit as HTML」(以 HTML 格式編輯)。

  1. 在下方的「Leonard」上按一下滑鼠右鍵，然後選取「檢查」。

    • 一分錢
    • Howard
    • Rajesh
    • Leonard

  2. 在「元素」面板中，對目前節點按一下滑鼠右鍵，然後從下拉式選單中選取「以 HTML 形式編輯」。

    節點的下拉式選單。

  3. 按下 Enter 鍵即可換行，然後開始輸入 <l。開發人員工具會醒目顯示 HTML 語法，並建議自動完成的標記。

    自動完成 HTML 代碼。

  4. 從自動完成選單中選取 li 元素，然後輸入 >。游標後方會自動加上結尾 </li> 標記。

    開發人員工具會自動關閉標記。

  5. 在標記中輸入 Sheldon，然後按下 Control 或 Command + Enter 鍵套用變更。

複製節點

您可以使用滑鼠右鍵選單中的「複製元素」選項複製元素。

  1. 在下方清單中的「Nana」上按一下滑鼠右鍵，然後選取「檢查」。

    • 虛榮大火
    • Nana
    • 奧蘭多市
    • 白噪音

  2. 在「元素」面板中，按一下滑鼠右鍵 <li>Nana</li>，然後從下拉式選單中選取「複製元素」。

    下拉式選單中醒目顯示的「複製元素」選項。

  3. 返回頁面。清單項目已複製。

你也可以使用鍵盤快速鍵：Shift + Alt + 向下鍵 (Windows 和 Linux) 和 Shift + Option + 向下鍵 (macOS)。

擷取節點螢幕截圖

您可以為 DOM 樹狀結構中的任何個別節點建立螢幕截圖。

  1. 在頁面上的任一圖片按一下滑鼠右鍵，然後選取「檢查」。

  2. 在「Elements」面板中，在圖片網址上按一下滑鼠右鍵，然後從下拉式選單中選取「Capture node screenshot」。

    正在擷取節點螢幕截圖。

  3. 螢幕截圖會儲存到下載資料夾 (Windows 和 macOS)。

詳情請參閱「使用開發人員工具擷取螢幕截圖的 4 種方式」。

重新排序 DOM 節點

拖曳節點即可重新排序。

  1. 在下方清單中，對「Elvis Presley」按一下滑鼠右鍵，然後選取「檢查」。這是清單中的最後一個項目。

    • 史提夫汪達
    • Tom Waits
    • Chris Thile
    • 艾維斯·普雷斯利

  2. 在 DOM 樹狀結構中，將 <li>Elvis Presley</li> 拖曳到清單頂端。

強制狀態

您可以強制節點維持在 :active、:hover、:focus、:visited 和 :focus-within 等狀態。

  1. 將游標懸停在「蒼蠅王」清單項目上。背景顏色會變成橘色。

    • 蒼蠅王
    • 罪與罰
    • 白鯨記

  2. 在「The Lord of the Flies」清單項目上按一下滑鼠右鍵，然後選取「Inspect」。

  3. 在 <li class="demo--hover">The Lord of the Flies</li> 上按一下滑鼠右鍵，然後依序選取「Force State」 >「:hover」。如果沒有看到這個選項，請參閱附錄。

    即使您並未實際將滑鼠游標懸停在節點上，背景顏色仍會保持橘色。

隱藏節點

按下 H 鍵可隱藏節點。

  1. 在下列清單中，對「The Stars My Destination」按一下滑鼠右鍵，然後選取「檢查」。

    • 基督山恩仇記
    • 《群星，我的歸宿》

  2. 按下 H 鍵，節點已隱藏。你也可以在節點上按一下滑鼠右鍵，然後使用「隱藏元素」選項。

    節點隱藏後在 DOM 樹狀結構中的樣子

  3. 再次按下 H 鍵。節點會再次顯示。

刪除節點

按下 Delete 鍵即可刪除節點。

  1. 在下列清單中，對「Foundation」按一下滑鼠右鍵，然後選取「檢查」。

    • The Illustrated Man
    • 愛麗絲夢遊仙境續集
    • Foundation

  2. 按下 Delete 鍵。節點會遭到刪除。您也可以在節點上按一下滑鼠右鍵，然後使用「Delete element」選項。

  3. 按下 Control + Z 鍵或 Command + Z 鍵 (macOS)。系統會復原上一個動作，節點也會重新顯示。

在控制台中存取節點

開發人員工具提供一些快速鍵，可讓您從控制台存取 DOM 節點，或取得這些節點的 JavaScript 參照。

使用 $0 參照目前選取的節點

檢查節點 (包括 ::before 或 ::after 等虛擬元素) 時，節點旁的 == $0 文字表示您可以在控制台中使用變數 $0 參照這個節點。

  1. 在「The Left Hand of Darkness」清單項目上按一下滑鼠右鍵，然後選取「檢查」。

    • 黑暗的左手
    • 沙丘褐

  2. 按下 Escape 鍵開啟控制台導覽匣。您可能需要選取「Console」才能開啟。

  3. 輸入 $0，然後按下 Enter 鍵。運算式的結果是 $0 評估為 <li>The Left Hand of Darkness</li>。

    控制台中第一個 $0 運算式的結果。

  4. 將游標懸停在結果上。節點會在可視區域中醒目顯示。

  5. 在 DOM 樹狀結構中按一下 <li>Dune</li>，再次在控制台中輸入 $0，然後再次按下 Enter 鍵。現在，$0 的評估結果為 <li>Dune</li>。

    控制台中第二個 $0 運算式的結果。

儲存為全域變數

如需多次參照節點，請將節點儲存為全域變數。

  1. 在下方清單中，對「The Big Sleep」按一下滑鼠右鍵，然後選取「檢查」。

    • 大眠
    • The Long Goodbye

  2. 在 DOM 樹狀結構中，在 <li>The Big Sleep</li> 上按一下滑鼠右鍵，然後選取「儲存為全域變數」。如果找不到這個選項，請參閱這篇文章，瞭解選項未顯示的原因。

  3. 在控制台中輸入 temp1，然後按下 Enter 鍵。運算式結果顯示變數評估為節點。按一下節點即可展開清單項目。

    temp1 運算式的結果。

複製 JS 路徑

將 JavaScript 路徑複製到節點，以便在自動化測試中參照。

  1. 在下方清單中，在「The Brothers Karamazov」上按一下滑鼠右鍵，然後選取「Inspect」。

    • 卡拉馬助夫兄弟們
    • 犯罪與刑罰

  2. 在 DOM 樹狀結構中的 <li>The Brothers Karamazov</li> 上按一下滑鼠右鍵，然後依序選取「Copy」 >「Copy JS Path」。解析為節點的 document.querySelector() 運算式已複製到剪貼簿。

  3. 按下 Control+V 鍵或 Command+V 鍵 (macOS)，將運算式貼到控制台中。

  4. 按下 Enter 鍵即可評估運算式。

    複製 JS 路徑運算式的結果

在 DOM 變更時中斷

DevTools 可讓您在 JavaScript 修改 DOM 時暫停網頁的 JavaScript。請參閱DOM 變更中斷點。

後續步驟

這涵蓋了開發人員工具中與 DOM 相關的大部分功能。如要瞭解其餘選項，請在 DOM 樹狀結構中按一下滑鼠右鍵，然後試用本教學課程未涵蓋的選項。

繼續閱讀：

加入 DevTools 社群，與 DevTools 團隊聯絡，或向其他開發人員尋求協助。

附錄

進一步瞭解特定主題。

HTML 與 DOM

本節將快速說明 HTML 和 DOM 之間的差異。

使用網路瀏覽器要求 https://example.com 等網頁時，伺服器會傳回 HTML 文件：

<!doctype html>
<html>
  <head>
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>This is a hypertext document on the World Wide Web.</p>
    <script src="/script.js" async></script>
  </body>
</html>

瀏覽器會剖析 HTML 並建立物件樹狀結構：

html
  head
    title
  body
    h1
    p
    script

這個物件或節點樹狀結構代表網頁內容。這就是文件物件模型，簡稱 DOM。目前，DOM 和 HTML 中的物件相同。

假設 HTML 底部的 script.js 檔案包含下列函式：

const h1 = document.querySelector('h1');
h1.parentElement.removeChild(h1);
const p = document.createElement('p');
p.textContent = 'Wildcard!';
document.body.appendChild(p);

該指令碼會移除 h1 節點，並將另一個 p 節點新增至 DOM。DOM 現在看起來像這樣：

html
  head
    title
  body
    p
    script
    p

網頁的 HTML 現在與 DOM 不同。

HTML 代表初始網頁內容，DOM 則代表目前有效的網頁內容。當 JavaScript 新增、移除或編輯節點時，DOM 就會與 HTML 不同。

如要瞭解詳情，請參閱 MDN 的「DOM 簡介」。

捲動至檢視畫面

這是「捲動至可視區域」一節的延續。按照操作說明完成該部分。

  1. DOM 樹狀結構中應該仍選取 <li>Magritte</li> 節點。如果沒有，請返回「捲動至可見範圍」，然後重新開始。

  2. 在 <li>Magritte</li> 節點上按一下滑鼠右鍵，然後選取「Scroll into view」(捲動至檢視畫面)。 您的檢視區塊會向上捲動，以便您查看「Magritte」節點。 如果找不到「捲動至可視範圍」，請參閱這篇文章，瞭解缺少選項的原因。

缺少選項

本教學課程中的許多操作說明，都會要求您在 DOM 樹狀結構中按一下節點，然後從彈出的內容選單中選取選項。如果內容選單中未顯示指定選項，請嘗試在節點文字以外的地方按一下滑鼠右鍵。

如果沒有看到所有選項，請點選這裡