詳細瞭解文件物件模型（DOM）

前端嵐楓發表於2019-03-25
物件模型

我們都聽說過與JavaScript相關的DOM或文件物件模型。DOM是Web開發中一個非常重要的概念。沒有它，我們就無法在瀏覽器中動態修改HTML頁面。 學習和理解DOM可以更好地訪問、修改改和監聽HTML頁面的不同元素。文件物件模型還可以幫助我們減少不必要的指令碼執行時間增加。

另請閱讀：15個用於Web開發人員DOM操作的javascript方法

資料結構樹節點

在討論dom是什麼，它是如何產生的，它是如何存在的，以及它內部發生了什麼之前，我想讓您瞭解樹。不是針葉樹和落葉樹，而是資料結構樹。

如果我們簡化資料結構的定義，就更容易理解它的概念。我想說，資料結構是關於安排資料的。是的，只是簡單的舊安排，就像你把家裡的傢俱或書放在書架上，或是把所有不同的食物組放在盤子裡，以便讓它對你有意義一樣。

當然，這並不是資料結構的全部功能，但這幾乎就是所有功能的起點。這種“安排”是一切的核心。它在DOM中也非常重要。但我們還沒有討論DOM，所以讓我引導您使用一種您可能熟悉的資料結構：陣列。

陣列與樹 陣列具有索引和長度，它們可以是多維的，並且具有更多的特性。儘管瞭解陣列的這些內容很重要，但我們現在不要為此而煩惱。當你把不同的事情排成一行的時候。對我們來說，陣列非常簡單。

在這裡插入圖片描述
同樣，當我們想到樹的時候，比如說，它是把東西放在另一個下面，從頂部的一個東西開始。

在這裡插入圖片描述

現在，你可以從以前的單列鴨子身上取下來，把它豎起來，告訴我“現在，每隻鴨子都在另一隻鴨子下面”。那是棵樹嗎？它是。

根據您的資料是什麼，或者您將如何使用它，樹中最頂層的資料（稱為根）可能是非常重要的資料，或者只是在樹下包含其他元素的資料。

不管怎樣，樹資料結構中最頂層的元素都會起到非常重要的作用。它提供了一個開始搜尋我們想要從樹中提取的任何資訊的位置。

在這裡插入圖片描述

DOM的意義

DOM代表文件物件模型。文件指向以物件表示的HTML（XML）文件。（在javascript中，所有內容都只能表示為物件！）

這個模型是由瀏覽器建立的，它接受一個HTML文件並建立一個表示它的物件。我們可以用javascript訪問這個物件。由於我們使用這個物件來操作HTML文件和構建我們自己的應用程式，所以DOM基本上是一個API。

DOM樹

在JavaScript程式碼中，HTML文件表示為一個物件。從該文件中讀取的所有資料也被儲存為物件，彼此巢狀（因為就像我前面所說的，在JavaScript中，所有資料都只能表示為物件）。

所以，這基本上就是程式碼中DOM資料的物理排列：所有的東西都是作為物件排列的。但從邏輯上講，它是一棵樹。

DOM解析器

每個瀏覽器軟體都有一個名為dom parser的程式，負責將HTML文件解析為dom。

在這裡插入圖片描述
將資料從HTML解析到DOM樹 取一個簡單的HTML檔案。它有根元素。它的子元素是和，每個子元素都有自己的子元素。 因此，從本質上講，瀏覽器讀取HTML文件中的資料，類似於：

<html>
  <head>
    <meta/>
    <link/>
  </head>
  <body>
    <header>
      <h1></h1>
         <h2></h2>
    </header>
    <main>
      <article>
        <p></p>
        <p></p>
        <p></p>
      </article>
    </main>
    <footer>
      <div></div>
    </footer>
  </body>
</html>

複製程式碼

然後，像這樣將它們排列成一個DOM樹：

在這裡插入圖片描述

DOM樹中每個HTML元素（及其所屬內容）的標籤稱為節點。根節點是的節點。

JavaScript中的DOM介面稱為文件（因為它是HTML文件的表示）。因此，我們通過JavaScript中的文件介面訪問HTML文件的DOM樹。

我們不僅可以訪問，還可以通過DOM操作HTML文件。我們可以向網頁新增元素，刪除並更新它們。每次我們更改或更新DOM樹中的任何節點時，它都會渲染到網頁上。

如何設計節點

我之前提到過，HTML文件中的每一段資料都儲存為JavaScript中的一個物件。那麼，如何將儲存為物件的資料邏輯地排列為樹呢

DOM樹的節點具有某些特性或屬性。幾乎樹中的每個節點都有一個父節點（它上面的節點）、子節點（它下面的節點）和兄弟節點（屬於同一父節點的其他節點）。在一個節點的上面、下面和周圍擁有這個族是使它成為樹的一部分的條件。

每個節點的族資訊都儲存為表示該節點的物件中的屬性。例如，children是一個節點的屬性，它包含該節點的子元素列表，從而在邏輯上將其子元素排列在該節點下。

避免過度操作DOM

儘管我們發現更新DOM很有用（為了修改網頁），但是別過度操作。

例如，您希望使用javascript更新網頁上的div標籤的顏色。您需要做的是訪問相應的dom節點物件並修改color屬性。這不應該影響樹的其餘部分（樹中的其他節點）。

但是，如果要從樹中刪除節點或向其中新增節點，該怎麼辦？整個樹可能需要重新渲染，刪除節點或將節點新增到樹中。這是一項昂貴的工作。完成這項工作需要時間和瀏覽器資源。

例如，假設您想向一個表中新增五行。對於每一行，當它的新節點被建立並新增到DOM時，樹每次都被更新，總共新增了五個更新。

我們可以通過使用documentfragment介面來避免這種情況。把它想象成一個可以容納所有五行並新增到樹上的盒子。通過這種方式，將這五行新增為一個單獨的資料塊，而不是一個接一個地新增，從而在樹中只進行一次更新。

這不僅在刪除或新增元素時發生，而且調整元素的大小也會影響其他節點，因為調整大小的元素可能需要其周圍的其他元素來調整其大小。因此，需要更新所有其他元素的對應節點，並根據新規則重繪HTML元素。

同樣，當整個網頁的佈局受到影響時，可能會重新呈現該網頁的一部分或全部。這一過程稱為重繪。為了避免過度重繪，請確保不要過度更改DOM。對dom的更改並不是唯一會導致網頁重繪的事情。根據瀏覽器的不同，其他因素也會對其產生影響

總結

把這些東西包裝起來，DOM被視覺化為一個由HTML文件中的所有元素組成的樹。物理上（數字能得到的物理上的任何東西），它是一組巢狀的javascript物件，其中的屬性和方法儲存著資訊，使邏輯上將它們排列到樹中成為可能。

另請閱讀：CSS物件模型（CSSOM）初學者指南

原文地址： www.hongkiat.com/blog/unders…

相關文章