Elements 之 DOM 操作

概覽#

CSS 篇結束，這一章處理 Elements panel 左側的 Document Object Model (DOM) 結構：怎麼快速瀏覽、選取、編輯、隱藏、複製。這些操作大多都很簡單，也都有多種達成方式，但熟悉之後可以省下不少時間。

開啟 Elements panel 時，被標記的元素後方會出現 == $0。這個小提示其實在告訴你：剛剛選中的元素已經被綁到變數 $0，可以在 Console panel 直接使用。

操作流程：

更進階的：DevTools 會記住最近選過的幾個元素，可以用 $0、$1、$2、$3、$4 拿到前幾次選到的元素（目前到 $4 為止）。

想觀察 $0 的所有屬性（不只 DOM tree 顯示的那些），用 console.dir($0) 比 console.log($0) 更有用：

console.dir($0);

按 Cmd+F（Mac）會在 Elements panel 下方跳出搜尋列。搜尋支援兩種模式：

對複雜頁面、想驗證某個 selector 是否會選到對的元素時很有用。

DOM 結構可以直接在 Elements panel 編輯：

貼上元素時，元素會被加到目前選定元素的最後一個 child 之下。如果貼到 self-closed 元素如 <input /> 內，DOM 結構上會顯示嵌入的 child，但畫面上不會渲染（因為 self-closed 不該有 child）。

選中元素後，按左側的三個點點，或是在元素內按右鍵，會打開功能選單。需要注意的是：

在元素「內」按右鍵：完整的元素操作選單
在屬性（attribute）上、URL 上按右鍵：選單會不一樣，例如 URL 上會出現 Reveal in Sources panel、Open in new tab

下面挑幾個值得一提的功能。

如果某元素被遮住、選不到底層的東西，可以：

被隱藏的元素左側會出現小圓圈標示。

Hide element 的效果相當於 visibility: hidden;，元素看不到也 inspect 不到，但「不影響原本的排版」（仍佔空間），所以底層元素的位置不會跑掉，比直接刪掉更適合 debug。

想修改單一 attribute 或元素內文時，直接雙擊就能進入編輯模式。但如果想一次編輯整個元素的 markup（包括屬性、子元素），用 Edit as HTML 會更方便，特別是新增整段元素的時候。

爬蟲、自動化測試常用的功能：

自動產生的 selector 不保證效能、長度與穩定度（例如可能用了奇怪的 :nth-child 鍊），只保證「現在」能選到該元素。實際丟到爬蟲或測試前最好手動檢視。

展開所有子元素。其他達成方式：

對深層 DOM 結構非常實用，不用一層一層手動點。

Break on 用來在元素被修改、屬性改變、被移除時觸發 JavaScript 斷點（Breakpoint），這部分屬於 DOM 斷點的範疇，會在 Sources panel 章節展開介紹。

Elements panel 的介紹到此告一段落，下一章正式進入 Console panel：先講 console message 的 level、過濾、settings，再進到 Console API、Console Utilities API、執行 JavaScript 的小撇步。