開始查看及變更 DOM

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

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

本教學課程假設您已瞭解 DOM 和 HTML 之間的差異。如需說明，請參閱附錄：HTML 與 DOM。

查看 DOM 節點

您可以在「元素」面板的 DOM 樹狀結構中，執行 DevTools 中的所有 DOM 相關活動。

檢查節點

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

  1. 在下方 Michelangelo 上按一下滑鼠右鍵，然後選取「檢查」。
    • Michelangelo
    • Raphael 檢查節點 開發人員工具的「Elements」面板會隨即開啟。DOM 樹狀結構中會醒目顯示 <li>Michelangelo</li>。 醒目顯示 Michelangelo< 節點
  2. 按一下 DevTools 左上角的「Inspect」圖示。「檢查」圖示

  3. 點選下方的「東京」文字。

    • 東京

    • 貝魯特

      <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> 節點的父項。在本例中，<li> 節點包含步驟 1 的指示。

  5. 按下「向下」箭頭鍵 3 次，重新選取剛剛收起的 <ul> 清單。應如下所示：<ul>...</ul>

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

捲動至檢視畫面

查看 DOM 樹狀結構時，有時您會發現自己對目前不在檢視區中的 DOM 節點感興趣。舉例來說，假設您捲動至頁面底部，但您想查看頁面頂端的 <h1> 節點。捲動至可視範圍可讓您快速重新調整可視區域，以便查看節點。

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

    • 馬格利特
    • Soutine

  2. 請參閱本頁底部的「附錄：捲動至檢視畫面」部分。並繼續按照指示操作。

完成頁面底部的操作說明後，請返回這個頁面。

顯示尺規

在檢視區域上方和左側顯示尺規，您可以在「Elements」面板中將游標懸停在元素上，測量元素的寬度和高度。

尺規。

您可以透過下列兩種方式啟用尺規：

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

標尺的大小單位為像素。

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

  1. 將游標移至「元素」面板。
  2. 按下 Control + F 鍵或 Command + F 鍵 (Mac)。搜尋列會在 DOM 樹狀圖的底部開啟。

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

    在搜尋列中醒目顯示查詢

如上所述，搜尋列也支援 CSS 和 XPath 選取器。

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

為避免節點之間發生不必要的跳轉，請清除「設定」「設定」 >「偏好設定」 >「全域」 >「輸入內容即搜尋」核取方塊。

在「設定」中清除「輸入時搜尋」核取方塊。

編輯 DOM

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

編輯內容

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

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

    • 油炸
    • Michelle

  2. 在 DOM 樹狀結構中，按兩下 Michelle。換句話說，請在 <li> 和 </li> 之間的文字上按兩下滑鼠。文字會以藍色醒目顯示，表示已選取該文字。

    編輯文字

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

編輯屬性

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

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

    • Howard
    • Vince

  2. 按兩下 <li>。文字會醒目顯示，表示已選取節點。

    編輯節點

  3. 按下「右」箭頭鍵，新增一個空格，輸入 style="background-color:gold"，然後按下 Enter 鍵。節點的背景顏色會變更為金色。

    在節點中加入樣式屬性

您也可以使用「Edit attribute」右鍵選項。

在選項上按一下滑鼠右鍵，並醒目顯示「編輯屬性」

編輯節點類型

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

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

    • Dean
    • Hank
    • Thaddeus
    • Brock

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

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

    將節點類型變更為按鈕

以 HTML 編輯

如要以 HTML 格式編輯節點，並使用語法醒目顯示和自動完成功能，請從節點的下拉式選單中選取「Edit as 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)。

擷取節點螢幕截圖

您可以使用「Capture node screenshot」功能，擷取 DOM 樹狀結構中的任何個別節點螢幕截圖。

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

  2. 在「元素」面板中，按一下圖片網址，然後在下拉式選單中選取「擷取節點螢幕截圖」。

    正在擷取節點螢幕截圖。

  3. 系統會將螢幕截圖儲存到「下載」資料夾。

    節點螢幕截圖已儲存至「下載」資料夾。

如要瞭解使用開發人員工具擷取螢幕截圖的其他方式，請參閱「使用開發人員工具擷取螢幕截圖的 4 種方式」。

重新排序 DOM 節點

拖曳節點即可重新排序。

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

    • Stevie Wonder
    • 湯姆威茲
    • Chris Thile
    • 貓王艾維斯

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

    將節點拖曳至清單頂端

強制使用狀態

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

  1. 將滑鼠游標懸停在下方的「The Lord of the Flies」上。背景顏色會變成橘色。

    • 《蒼蠅王》
    • 《罪與罰》
    • Moby Dick

  2. 在上述「The Lord of the Flies」上按一下滑鼠右鍵，然後選取「檢查」。

  3. 在 <li class="demo--hover">The Lord of the Flies</li> 上按一下滑鼠右鍵，然後依序選取「Force State」 >「:hover」。如果沒有看到這個選項，請參閱附錄：缺少選項。即使您並未將游標懸停在節點上，背景顏色仍會維持橘色。

隱藏節點

按下 H 鍵可隱藏節點。

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

    • The Count of Monte Cristo
    • The Stars My Destination

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

    隱藏節點後，節點在 DOM 樹狀結構中的外觀

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

刪除一個節點

按下「刪除」即可刪除節點。

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

    • The Illustrated Man
    • 穿過魔鏡
    • Foundation

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

  3. 按下 Control + Z 鍵或 Command + Z 鍵 (Mac)。上一個動作會復原，節點會再次顯示。

在控制台中存取節點

開發人員工具提供幾個快速鍵，可用於從控制台存取 DOM 節點，或取得 JavaScript 對這些節點的參照。

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

檢查節點時，節點旁的 == $0 文字表示您可以在控制台中使用變數 $0 參照這個節點。

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

    • The Left Hand of Darkness
    • 沙丘

  2. 按下 Escape 鍵，開啟控制台抽屜。

  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」上按一下滑鼠右鍵，然後選取「檢查」。

    • 卡拉馬佐夫兄弟
    • 《罪與罰》

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

  3. 按下 Control + V 鍵或 Command + V 鍵 (Mac)，即可將運算式貼入控制台。

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

    複製 JS 路徑運算式的結果

在 DOM 變更時中斷

開發人員工具可讓您在 JavaScript 修改 DOM 時暫停網頁的 JavaScript。請參閱「DOM 變更中斷點」。

後續步驟

這涵蓋了開發人員工具中的大多數 DOM 相關功能。您可以按一下 DOM 樹狀圖中的節點，並嘗試使用本教學課程未涵蓋的其他選項，瞭解其他選項。另請參閱「元素面板鍵盤快速鍵」。

請參閱 Chrome 開發人員工具首頁，瞭解您可以使用開發人員工具執行的其他所有操作。

如要聯絡開發人員工具團隊或尋求開發人員工具社群的協助，請參閱社群。

附錄：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。目前的樣式與 HTML 相同，但假設 HTML 底部參照的腳本執行以下程式碼：

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

該程式碼會移除 h1 節點，並在 DOM 中新增另一個 p 節點。完整的 DOM 現為如下所示：

html
  head
    title
  body
    p
    script
    p

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

詳情請參閱「DOM 簡介」。

附錄：捲動至檢視畫面

這是「捲動至可視範圍內」部分的後續內容。請按照下列操作說明完成這一節。

  1. DOM 樹狀圖中仍應選取 <li>Magritte</li> 節點。如果沒有，請返回「捲動至畫面」並重新開始。

  2. 在 <li>Magritte</li> 節點上按一下滑鼠右鍵，然後選取「捲動至檢視畫面」。可視區會向上捲動，讓您可以看到 Magritte 節點。如果找不到「捲動至畫面」選項，請參閱附錄：缺少選項。

    捲動至檢視畫面

附錄：缺少選項

本教學課程的許多操作說明都會引導您在 DOM 樹狀結構中按一下滑鼠右鍵，然後在彈出的內容選單中選取所需選項。如果在內容選單中找不到指定選項，請嘗試在節點文字以外的區域按一下滑鼠右鍵。

如果您沒有看到所有選項，請按一下