文章目錄
element面板擴展之DOM
在最早的第一期博客裏已經介紹過element面板的基本相關功能。
這期，我將以DOM樹爲基礎進一步講述一些細節且實用的知識點。
查看DOM節點
檢查元素節點（一些重要的基礎操作）
選擇瀏覽器的某一元素->右鍵->檢查即可，然後devtools的Elements面板會跳轉並顯示此元素在DOM樹的位置。
選擇DOM樹上的一個元素，然後我們有兩種重要的功能操作（檢查狀態默認是選擇狀態）：
點擊其最左邊的按鈕，此效果“一般的”右鍵效果一樣，然後會彈出如下的功能區域框：
如果是選中當前節點的文本內容再執行右鍵操作，則彈出不一樣的功能區域框：
不難發現這兩個功能區域框的核心功能幾乎一樣，而這章的重點也就是講述這些DOM功能框，其中有些比較簡單，很淺顯的功能我在這裏就不講述或者一帶而過。爲了簡述方便，在下文中這些功能區域框我都默認是通過右鍵顯示。
使用鍵盤導航DOM樹
檢查一個節點顯示其DOM樹，此時可用鍵盤的up，down，left，right四個鍵來查看此DOM樹的層級結構，此功能比較簡單，自己親自動手一試便懂。
Scroll into view
這個功能類似於反向檢查，檢查是通過瀏覽器的某一元素找到其在DOM樹的對於位置，而Scroll into view則是通過DOM樹的某一節點找到其在瀏覽器頁面的相應位置。
具體步驟：選擇某一元素->右鍵->Scroll into view
然後就能瀏覽器頁面就會跳轉到你所指定的DOM節點的位置。
搜索節點
打開DOM樹並按下Ctrl+f，在最下面會顯示搜索框，輸入內容然後就能按照指定的內容在DOM樹上進行搜索查詢。
注意：Ctrl+f是個很公用的默認搜索查詢的快捷鍵，不僅僅devtools能使用，在瀏覽器以及開發工具等軟件裏面都能使用。
編輯DOM
編輯功能
在DOM樹上節點元素支持三個基本的編輯功能：文本內容，節點屬性以及節點內容。
以這個li節點爲例，它的內容Howard可以編輯修改，它的style屬性可以編輯修改，它的類型li也能編輯修改。
編輯的方式有兩種，一種方式是直接雙擊此元素結點，還有一種方式是通過右鍵的功能區來操作。
重排序節點
選擇一個DOM樹節點，在DOM樹上進行上下拖動便可改變其在DOM樹上的位置，並且可立即在瀏覽器頁面上生效。
Force state
此功能等同於Styles面板的:hov的功能。
只不過在這裏有另外一種作用方式：（即Force state）
隱藏結點
先選擇一個DOM樹元素，然後又兩種方式隱藏/顯示此結點：
快捷鍵H和右鍵功能區
這是節點隱藏後的標識：
刪除結點
先選擇一個DOM樹元素，然後又兩種方式刪除此結點：
快捷鍵DEL和右鍵功能區
注意：此操作一旦刪除就無法恢復，但是可通過windows默認的撤回鍵Ctrl+z進行恢復操作。
DOM斷點
在上邊文章裏，我提及過DOM斷點這個概念，它也屬於瀏覽器的一種可進行調試的斷點類型。
首先，我們看看如何在DOM樹上打DOM斷點。
先選擇一個DOM樹元素，右鍵->Break on。
不難發現，這裏有三種DOM斷點：subtree modifications，attribute modifications，node removal。
這三種斷點之間沒有交集，即可以同時打上多個斷點。
subtree modifications：在節點上放置子樹修改斷點後，在添加或刪除節點的任何後代時，devtools將暫停頁面。
attribute modifications：暫停導致節點的任何屬性更改的JavaScript。
node removal：在刪除特定節點時暫停。
右鍵功能區的其它功能
上述已經講解了DOM樹裏面的一些基本常用的功能，其中也使用到不少右鍵功能區的一些功能，接下來我補充完善右鍵功能區的剩下一些功能。
Store as global variable
點擊此功能按鈕，devtools會自動把此DOM元素定義爲一個全局變量，並在控制檯面板顯示。
Copy
這裏的一些功能都比較簡單，這裏我以Copy selector爲例演示其效果。
下圖即顯示此選中的p標籤的selector。
此功能區對於快速瞭解目標DOM元素的結構是特別有幫助。
結語
這期知識介紹到此就結束了，百聞不如一練，看了這麼多東西終究不如自己親自動手操作一番效果來的更好，咋們下期再見！