[譯] 究竟什麼是DOM？!

原文自工程師Kara Luton博客， 傳送門

DOM，當我第一次在訓練營學習編碼時，就一直聽到這個詞，可是我歷來不知道它究竟是什麼意思。是我寫的HTML嗎？仍是我偶爾打開控制檯檢查元素的時候點擊的元素？說實話，我花了好長時間才弄明白DOM到底是什麼。

根據W3C，文檔對象模型（DOM）是「有效HTML和格式良好的XML文檔的應用程序編程接口。它定義了文檔的邏輯結構以及文檔的訪問和操做方式」。

什麼?簡單來講，DOM是HTML在瀏覽器中的表示形式，容許您操縱頁面。

那麼爲何它常常被稱爲樹呢?這是由於DOM從一個父項開始，該父項擴展爲子項。這些子項的項也能夠延伸到他們本身的小樹中，就像你在上圖中看到的那樣。

我在一些網站上讀到，你在DevTools中看到的就是DOM的可視化表示，雖然它很是接近，但並不徹底正確。DevTools將包含一些額外的信息(好比僞類)，這些信息在技術上不是DOM的一部分。若是你是像我這樣的可視化人員，這是咱們在瀏覽器中所能看到的最接近DOM的圖像。

但等一下，這難道不意味着DOM和咱們正在編寫的HTML是同樣的嗎?不。

您是否曾經不當心遺漏了一個必需的元素，並讓瀏覽器爲您修復它?您將在DOM中看到這個元素，儘管您已經將它從HTML中刪除了。若是您經過JavaScript操做DOM，那麼DOM也將不一樣於HTML。

使用JavaScript能夠編輯頁面的CSS、添加事件監聽器、更改節點屬性等等。這些都在改變DOM原來在HTML中編寫的內容。

總結一下，雖然DOM聽起來很是嚇人，但其實是它決定着在瀏覽器頁面上呈現什麼，以及JavaScript能夠經過DOM來操縱呈現的元素。

很是感謝你閱讀我關於DOM的文章！必定要在Twitter上關注我關於技術的大量推文，說實話，我也發了不少關於狗的推特。若是您有任何問題，請隨時在下面發表評論或發推文給我。