開始查看及變更 DOM

凱斯巴斯克文
Kayce Basques
索菲亞艾梅利安諾瓦
Sofia Emelianova

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

本教學課程假設您瞭解 DOM 和 HTML 之間的差異。詳情請參閱「附錄:HTML 與 DOM」一文。

查看 DOM 節點

「Elements」面板的「DOM 樹狀圖」可讓您在 DevTools 中進行所有 DOM 相關活動。

檢查節點

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

  1. 在下方的「米開朗基羅」上按一下滑鼠右鍵,然後選取「檢查」。
    • 米開朗基羅
    • Raphael 檢查節點 開發人員工具的「Elements」面板會隨即開啟。 <li>Michelangelo</li> 會醒目顯示在「DOM Tree」中。 醒目顯示米開朗基羅< 節點
  2. 按一下開發人員工具左上角的「檢查」圖示。檢查圖示
  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> 節點的父項。在這種情況下,這是包含步驟 1 操作說明的 <li> 節點。

  5. 按 3 次向下鍵即可重新選取剛收合的 <ul> 清單。看起來應該像這樣:<ul>...</ul>

  6. 按下向右鍵。清單隨即展開。

捲動查看

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

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

    • 馬格利特
    • 哭泣
  2. 前往本頁底部的「附錄:捲動至檢視畫面」部分。 相關操作說明請參閱後續說明。

完成頁面底部的說明後,你應該回到這個頁面。

顯示尺規

您可以利用可視區域上方和左側的尺規,在「元素」面板中將元素懸停在元素上時,測量元素的寬度和高度。

尺。

透過下列任一方式啟用尺規:

  • 按下 Control + Shift + P 鍵或 Command + Shift + P 鍵 (Mac) 開啟「Command」選單,然後輸入 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 樹狀結構中第一個相符的結果,並擲出可視區域中的檢視畫面。根據預設,系統會在您輸入內容時套用。如果您一律需要處理較長的搜尋查詢,可以選擇在按下 Enter 鍵後,讓開發人員工具執行搜尋。

為避免節點之間出現不必要的跳轉,請清除 [設定]。「設定」 >「偏好設定」 >「全域」 >「輸入時搜尋」核取方塊。

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

編輯 DOM

您可以即時編輯 DOM,查看這些變更對頁面造成什麼影響。

編輯內容

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

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

    • 油炸
    • 阿雪
  2. 在 DOM 樹狀結構中,按兩下 Michelle。換句話說,按兩下 <li></li> 之間的文字。文字會以藍色醒目顯示,表示已選取該文字。

    編輯文字

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

編輯屬性

如要編輯屬性,請按兩下屬性名稱或值。請按照以下操作說明,將屬性新增至節點。

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

    • Howard
    • 文斯
  2. 按兩下 <li>。文字會醒目顯示,表示已選取該節點。

    編輯節點

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

    新增樣式屬性至節點

你也可以使用「編輯屬性」選項按一下滑鼠右鍵。

在選項上按一下滑鼠右鍵,醒目顯示編輯屬性。

編輯節點類型

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

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

    • 主任
    • 漢克
    • 塔德烏斯
    • Brock
  2. 按兩下 <li>。「li」文字已醒目顯示。

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

    正在將節點類型變更為按鈕

以 HTML 格式編輯

如要以 HTML 格式編輯節點,同時將語法醒目顯示和自動完成功能,請在節點的下拉式選單中選取「以 HTML 格式編輯」

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

    • 一分錢
    • Howard
    • 阿雷
    • Leonard
  2. 在「Elements」面板中,在目前的節點上按一下滑鼠右鍵,然後在下拉式選單中選取「Edit as HTML」

    節點的下拉式選單。

  3. 按下 Enter 鍵,開始新的一行,然後開始輸入 <l。開發人員工具會為你醒目顯示 HTML 語法和自動完成標記。

    自動完成 HTML 標記。

  4. 從自動完成選單中選取 li 元素,然後輸入 >。開發人員工具會自動在遊標後方加上 </li> 結尾標記。

    開發人員工具會自動關閉代碼。

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

    正在套用變更。

複製節點

您可以使用滑鼠右鍵點選「複製元素」選項來複製元素。

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

    • 王國之火
    • 那那
    • 奧蘭多市
    • 白噪音
  2. 在「元素」面板中按一下右鍵 <li>Nana</li>,然後從下拉式選單中選取「複製元素」

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

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

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

擷取節點螢幕截圖

您可以使用「擷取節點螢幕截圖」,擷取 DOM 樹狀結構中任一節點的螢幕截圖。

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

  2. 在「元素」面板中的圖片網址上按一下滑鼠右鍵,然後從下拉式選單中選取「擷取節點螢幕截圖」

    正在擷取節點螢幕截圖。

  3. 螢幕截圖就會儲存至下載內容。

    已將節點螢幕截圖儲存至下載內容。

重新排序 DOM 節點

拖曳節點即可重新排序。

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

    • 史蒂夫.旺德 (Stvie Wonder)
    • 湯姆威特
    • Chris Thile
    • 貓王艾維斯利 (Elvis Presley)

  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」上按一下滑鼠右鍵,然後選取「Inspect」

    • 蒙地基督教徒數量
    • 星際爭霸戰
  2. H 鍵。已隱藏節點。您也可以在節點上按一下滑鼠右鍵,並使用「隱藏元素」選項。

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

  3. 再次按下 H 鍵。系統隨即再次顯示節點。

刪除一個節點

按下 Delete 鍵刪除節點。

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

    • 插圖男人
    • 透視地球
    • Foundation
  2. 按下 Delete 鍵。節點已刪除。您也可以在節點上按一下滑鼠右鍵,然後使用「Delete 元素」選項。

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

存取控制台中的節點

DevTools 提供了幾個捷徑,讓您能夠透過主控台存取 DOM 節點,或取得這些 DOM 節點的 JavaScript 參照。

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

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

  1. 在下方的「黑暗的左手」上按一下滑鼠右鍵,然後選取「檢查」

    • 黑暗的左手
    • 沙丘
  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」上按一下滑鼠右鍵,然後選取「檢查」

    • 大睡眠
    • 長遠大挑戰
  2. 在 DOM 樹狀結構中的 <li>The Big Sleep</li> 上按一下滑鼠右鍵,然後選取「Store as 全域變數」。如果找不到這個選項,請參閱附錄:缺少選項

  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 開發人員工具首頁,探索 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。現在看起來與 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> 節點。如果沒有,請返回「Scroll in view」,然後重新開始。
  2. <li>Magritte</li> 節點上按一下滑鼠右鍵,然後選取「Scroll to view」(捲動至檢視畫面)。可視區域會向上捲動,讓您會看到「Magritte」節點。如果找不到「捲動至檢視畫面中」選項,請參閱「附錄:缺少選項」一節。

    捲動查看

附錄:缺少選項

本教學課程的許多操作說明都說明如何在 DOM 樹狀結構中的節點上按一下滑鼠右鍵,然後從彈出的內容選單中選取選項。如果內容選單中沒有顯示指定選項,請嘗試在節點文字周圍按一下滑鼠右鍵。

如果沒有看到所有選項,請按一下這裡