詳細瞭解文檔對象模型（DOM）

時間 2019-11-08

標籤詳細瞭解文檔對象模型 dom 欄目 HTML 简体版

原文原文鏈接

咱們都據說過與JavaScript相關的DOM或文檔對象模型。DOM是Web開發中一個很是重要的概念。沒有它，咱們就沒法在瀏覽器中動態修改HTML頁面。學習和理解DOM能夠更好地訪問、修改改和監聽HTML頁面的不一樣元素。文檔對象模型還能夠幫助咱們減小沒必要要的腳本執行時間增長。javascript

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

數據結構樹節點html

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

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

固然，這並非數據結構的所有功能，但這幾乎就是全部功能的起點。這種「安排」是一切的核心。它在DOM中也很是重要。但咱們尚未討論DOM，因此讓我引導您使用一種您可能熟悉的數據結構：數組。瀏覽器

數組與樹 數組具備索引和長度，它們能夠是多維的，而且具備更多的特性。儘管瞭解數組的這些內容很重要，但咱們如今不要爲此而煩惱。當你把不一樣的事情排成一行的時候。對咱們來講，數組很是簡單。 bash

一樣，當咱們想到樹的時候，好比說，它是把東西放在另外一個下面，從頂部的一個東西開始。

如今，你能夠從之前的單列鴨子身上取下來，把它豎起來，告訴我「如今，每隻鴨子都在另外一隻鴨子下面」。那是棵樹嗎？它是。數據結構

根據您的數據是什麼，或者您將如何使用它，樹中最頂層的數據（稱爲根）多是很是重要的數據，或者只是在樹下包含其餘元素的數據。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…

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。