開始查看及變更 DOM

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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

本教學課程假設您瞭解 DOM 和 HTML 之間的差異。詳情請見 附錄：HTML 與 DOM 的說明。

查看 DOM 節點

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

檢查節點

對特定的 DOM 節點感興趣時，Inspect 是一個快速開啟開發人員工具 並調查該節點

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

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

    • 東京

    • 貝魯特

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

檢查節點也是檢視及變更節點樣式的第一步。 請參閱「開始查看及變更 CSS」一文。

使用鍵盤瀏覽 DOM 樹狀結構

選取 DOM 樹狀結構中的節點後，您就能使用 鍵盤。

  1. 在下方的「Ringo」Ringo上按一下滑鼠右鍵，然後選取「檢查」Ringo。已選取「<li>Ringo</li>」 DOM 樹狀結構

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

    • John

      檢查 Ringo 節點

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

    檢查 ul 節點

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

  4. 再次按下向左鍵。<ul> 節點的父項 已選取在本例中，<li> 節點包含步驟 1 的操作說明。

  5. 按向下鍵三次，即可重新選取 <ul> 查看是否已收合的清單它應該像這樣：<ul>...</ul>

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

捲動至檢視畫面

查看 DOM 樹狀結構時，您可能會注意到 但目前不在可視區域中舉例來說，假設您捲動至 建議您查看頁面頂端的 <h1> 節點。捲動至檢視區塊 可讓您快速調整可視區域的位置 以便查看節點

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

    • 馬格利特
    • 司康

  2. 前往本頁底部的「附錄：捲動至檢視畫面」部分。 繼續往下閱讀。

完成頁面底部的指示後，請返回這裡。

顯示尺規

您可以透過可視區域上方和左側的尺規，只要在「元素」Elements面板中將滑鼠遊標懸停在該元素上方，測量寬度和高度。

尺。

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

  • 按下 Control + Shift + P 鍵或 Command + Shift + P 鍵 (Mac) 可開啟 Command 選單，輸入 Show rulers on hover，然後按下 Enter 鍵。
  • 請查看 。「設定」>偏好設定 >Elements >懸停時顯示尺規。

尺規的大小單位為像素。

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

  1. 將遊標懸停在「元素」Elements面板。
  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上按一下滑鼠右鍵，然後選取「Inspect」Howard。

    • Howard
    • 文斯

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

    編輯節點

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

    在節點中加入樣式屬性

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

醒目顯示「Edit」屬性的右鍵選項。

編輯節點類型

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

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

    • 主事者
    • 漢克
    • Thaddeus
    • Brock

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

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

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

以 HTML 編輯

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

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

    • 一分錢
    • Howard
    • Rajesh
    • Leonard

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

    節點的下拉式選單。

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

    自動完成 HTML 標記。

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

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

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

    正在套用變更。

複製節點

使用「重複元素」選項按一下滑鼠右鍵，即可複製元素。

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

    • 梳妝檯寶座
    • 娜娜
    • 奧蘭多市
    • 白噪音

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

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

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

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

擷取節點螢幕截圖

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

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

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

    正在擷取節點螢幕截圖。

  3. 系統會將螢幕截圖儲存至下載內容。

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

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

重新排序 DOM 節點

拖曳節點即可重新排序。

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

    • 史提夫汪達
    • 湯豪斯
    • 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」 狀態 >:hover。如果您沒看到這個選項，請參閱「附錄：缺少選項」一節。 即使您並未將遊標懸停在節點上，背景顏色仍保持橘色。

隱藏節點

按下 H 鍵隱藏節點。

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

    • 危機四伏
    • 我的目的地之星

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

    將節點隱藏後，在 DOM 樹狀結構中會是什麼樣子

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

刪除一個節點

按下 Delete 鍵刪除節點。

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

    • 插畫男人
    • 透明玻璃
    • Foundation

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

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

在控制台中存取節點

開發人員工具提供幾個捷徑，方便您從控制台存取 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. 在下方的「絕佳睡眠」上按一下滑鼠右鍵，然後選取「檢查」。

    • 深夜睡眠
    • 長見

  2. 在 DOM 樹狀結構中的 <li>The Big Sleep</li> 上按一下滑鼠右鍵，然後選取「Store as Global」 變數。如果您沒看到這個選項，請參閱「附錄：缺少選項」一節。

  3. 在控制台中輸入 temp1，然後按下 Enter 鍵。運算式的結果 會顯示變數評估的節點

    temp1 運算式的結果

複製 JS 路徑

如果需要在自動化測試中參照節點，請複製該節點的 JavaScript 路徑。

  1. 以滑鼠右鍵按一下下方的「The Brothers Karamazov」，然後選取「檢查」。

    • The Brothers Karamazov
    • 犯罪與懲罰

  2. 在 DOM 樹狀結構中的 <li>The Brothers Karamazov</li> 上按一下滑鼠右鍵，然後選取 複製 >複製 JS 路徑。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 相同，但假設 程式碼的底部會執行這段程式碼：

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> 節點上按一下滑鼠右鍵，然後選取「Scroll into view」。可視區域捲動 備份，您就會看到 Magritte 節點。 如果您看不到「捲動至檢視畫面」選項，請參閱「附錄：缺少選項」一節。

    捲動至檢視畫面

附錄：缺少選項

本教學課程中的許多指示都會說明如何在 DOM 樹狀結構中，以滑鼠右鍵按一下節點 再從彈出的內容選單中選取所需選項如果您找不到 選項，試著在節點文字上按一下滑鼠右鍵。

如果您沒有看到所有選項，可以點選的位置