今天要一起來看的面版是元素面版，如果你是第一次使用 Chrome 開發者工具，元素面版應該就會是你打開開發者工具後的第一個面版，這個面版其實是由幾個小的控制面版 (Panes) 組成的，我們會拆分成幾天來討論這個面版的幾個大功能，其中一個就是今天要討論的動態編輯文件物件模型。

元素面版的構成比較複雜，常常會覺得頁面的空間不夠使用，你可以使用快捷鍵 ESC 來開關控制台面版 (Console panel) 得到更多空間

尋找元素

在編輯某個特定元素時，我們首先要做的第一件事就是先找到這個元素的 DOM，在開發者工具裡有好幾個方法可來達成這件事：

• 在頁面中所要編輯的元素的畫面上按滑鼠右鍵，在選單中選擇檢查。這時候，你的開發者工具就會打開到元素面版並且指到你所選擇的元素上。
  

  有時候因為頁面的結構關係，這個方式並不一定可以準確選擇到你所指定的元素

• 假如你知道你所要選擇的元素的 ID, class 或 HTML 標籤名稱，那你其實可以在元素面版裡，使用搜尋的功能 ( 請參考上篇提到的快捷鍵) 來找你所想要選取的特定元素。
  

• 另一個方式是：在打開開發者工具並切換到元素面版後，使用在面版左上角的 - 檢查元素模式 (Inspect Element Mode) 工具來選擇元素。當你進入這個模式後，在頁面移動時就會看到正在選擇的區塊，在選擇到元素後，再按一下滑鼠左鍵，該元素就會被選取並顯示在元素面版裡。

• 還有一個方法是當你在元素面版的文件物件模型樹中 (DOM tree view) 使用鍵盤上的方向鍵來做操作。

  • 方向鍵上：在 DOM 樹中往上移
  • 方向鍵下：在 DOM 樹中往下移
  • 方向鍵右：如果你所選擇的 DOM 元素有子元素(當元素左邊有這一個向右箭頭圖示時，代表這個 DOM 元素下還有子元素 )，就會向下移動到子元素，如果沒有子元素就不會有動作。
  • 方向鍵左：如果你所選擇的 DOM 元素有父元素(當元素左邊有一個向下箭頭圖示時代表這個元素是父元素，可以往上收合)，就會向上移動到父元素，如果沒有父元素就不會有動作。

• 最後一個尋找元素的方法是使用元素面版左下方一個類似麵包屑的介面

上面提到了很多方法你可以選取 DOM 元素，我自己本人比較常用的方式是使用檢查元素模式及搭配鍵盤的方向鍵快速的移動。通常這樣都可以很快的找到你想要的元素。

編輯元素

所有的編輯在頁面重新整理後都會消失，這些編輯後的內容都不會儲存到你的原始碼裡面，> 除非你做了特殊設定

在編輯元素時可以使用取消 (Undo) (Mac 使用 Cmd+Z，Windows 用 Ctrl+Z) 及重做 (Redo) 的功能 (Mac Cmd+Shift+Z，Windows 用 Ctrl+Y)，就像我們一般在用文字編輯器一樣

• 編輯元素的標籤 (HTML tag)：你可以用滑鼠左鍵連點兩下所要編輯的元素，在進入編輯模式後，再輸入你想要的標籤名稱 (標籤會有自動完成的功能，所以，只需要改標籤的開頭就可以了 )。當完成編輯的時候，用滑鼠左鍵在編輯模式外的區域點一下就可以完成編輯，如果是要取消編輯，可以使用鍵盤的 Esc 離開。
  

  編輯 DOM 標籤

• 編輯標籤屬性：就像編輯標籤一下，在所要編輯的屬性上滑鼠左鍵連點兩下後就可以直接編輯那個屬性。另外也可以直在選好元素後，按一下鍵盤上的 Return 或 Enter 鍵來進入編輯模式。如果你要切換到下一個屬性，可以用 Tab 鍵。
  

  編輯 DOM 元素屬性

• 新增屬性：在被選取的元素上滑鼠右鍵打開更多動作選單 (More actions menu) 然後選擇新增屬性 (Add attribute)，然後再輸入新屬性就可以了。你也可以在編輯元素標籤時，直接把屬性寫上去。
  

  新增一個 DOM 元素屬性

• 刪除屬性的方式與編輯標籤屬性雷同，在選擇該屬性後把屬性跟值一起清掉就可以了。

小結

今天我們很快的看了一下如何用元素面版來尋找特定的元素並且編輯元素標籤跟屬性，這些其實是很實用的功能，特別是尋找元素，當你編輯完你的原始碼後，回到開發者工具看到的這個文件物件模型樹 (DOM tree view) 其實才是瀏覽器渲染完成的文件物件模型 ( 這個字真的很繞口 …)，透過這樣的檢查方式，常常可以找到一些臭蟲像是我們在撰寫或編輯HTML 時給錯的屬性或甚至錯誤的結構。而動態編輯的優點就是我們不需要往返我們的原始碼跟瀏覽器來查看說，這個屬性套上去後，或是這個標籤移到下面後畫面會變成怎樣 (移動的功能我們明天會介紹 )，而是可以立即的看到瀏覽器的畫面，這個優勢在接下來介紹的樣式表編輯裡會更明顯。好了，希望大家今天有學到新東西，明天我們會繼續把動態編輯文件物件模型的功能講完。