最近學(xué)習(xí)JavaScript的時(shí)候嫩絮，接觸到了DOM藻治。第一次接觸這個(gè)概念的時(shí)候我有點(diǎn)懵，因?yàn)闊o論作為英文還是中文的解釋垄潮，它都讓我很困惑。
來自W3C School的解釋：

When a web page is loaded, the browser creates a Document Object Model of the page.

The HTML DOM model is constructed as a tree of Objects.

he DOM is a W3C (World Wide Web Consortium) standard.

The DOM defines a standard for accessing documents:

"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."

The W3C DOM standard is separated into 3 different parts:

• Core DOM - standard model for all document types
• XML DOM - standard model for XML documents
• HTML DOM - standard model for HTML documents

來自Wiki的解釋：
The Document Object Model (DOM) is a cross-platform and language-independent interface that treats an XML or HTML document as a tree structure where in each node is an object representing a part of the document. The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree; with them one can change the structure, style or content of a document. Nodes can have event handlers attached to them. Once an event is triggered, the event handlers get executed. So, what does DOM exactly mean???
上面的解釋出現(xiàn)了tree structure(樹形結(jié)構(gòu))闷盔，node(節(jié)點(diǎn))和object（對象）弯洗，那么這些又分別是什么？對于剛學(xué)習(xí)前端的我看了一個(gè)名詞解釋里出現(xiàn)那么多不認(rèn)識(shí)的名詞這簡直要送我走逢勾。而Udemy課上老師對此講的也很含糊牡整。
接下來我們來看看簡中語境下的解釋。
來自Mozilla:

文檔對象模型 (DOM) 是HTML和XML文檔的編程接口溺拱。它提供了對文檔的結(jié)構(gòu)化的表述逃贝，并定義了一種方式可以使從程序中對該結(jié)構(gòu)進(jìn)行訪問，從而改變文檔的結(jié)構(gòu)迫摔，樣式和內(nèi)容沐扳。DOM 將文檔解析為一個(gè)由節(jié)點(diǎn)和對象（包含屬性和方法的對象）組成的結(jié)構(gòu)集合。簡言之句占，它會(huì)將web頁面和腳本或程序語言連接起來迫皱。

一個(gè)web頁面是一個(gè)文檔。這個(gè)文檔可以在瀏覽器窗口或作為HTML源碼顯示出來辖众。但上述兩個(gè)情況中都是同一份文檔。文檔對象模型（DOM）提供了對同一份文檔的另一種表現(xiàn)和敬，存儲(chǔ)和操作的方式凹炸。 DOM是web頁面的完全的面向?qū)ο蟊硎觯軌蚴褂萌?JavaScript等腳本語言進(jìn)行修改昼弟。

菜鳥教程：

DOM (Document Object Model) 譯為文檔對象模型啤它，是 HTML 和 XML 文檔的編程接口。

HTML DOM 定義了訪問和操作 HTML 文檔的標(biāo)準(zhǔn)方法。

DOM 以樹結(jié)構(gòu)表達(dá) HTML 文檔变骡。
OK离赫，樹結(jié)構(gòu)出現(xiàn) once again.

百度百科：
文檔對象模型（Document Object Model，簡稱DOM）塌碌，是W3C組織推薦的處理可擴(kuò)展置標(biāo)語言的標(biāo)準(zhǔn)編程接口渊胸。它是一種與平臺(tái)和語言無關(guān)的應(yīng)用程序接口(API),它可以動(dòng)態(tài)地訪問程序和腳本,更新其內(nèi)容、結(jié)構(gòu)和www文檔的風(fēng)格(目前,HTML和XML文檔是通過說明部分定義的)台妆。文檔可以進(jìn)一步被處理翎猛，處理的結(jié)果可以加入到當(dāng)前的頁面。DOM是一種基于樹的API文檔接剩，它要求在處理過程中整個(gè)文檔都表示在存儲(chǔ)器中切厘。另外一種簡單的API是基于事件的SAX，它可以用于處理很大的XML文檔懊缺，由于大疫稿，所以不適合全部放在存儲(chǔ)器中處理。
總結(jié)一下以上定義鹃两，對于一個(gè)不太清楚“可擴(kuò)展指標(biāo)語言”遗座、“標(biāo)準(zhǔn)編程接口”、“www文檔風(fēng)格”怔毛、“樹形結(jié)構(gòu)”以及"SAX"的初學(xué)者员萍，這些解釋等同于沒解釋。
筆者根據(jù)自己在practice的過程拣度，反復(fù)觀看了Udemy上老師講述DOM的時(shí)候提到的一個(gè)關(guān)鍵詞——"manipulate"（操作碎绎、操縱），逐漸摸索出來了What the f***ing DOM is?
假設(shè)一個(gè)html網(wǎng)頁是一個(gè)Document（文件),那么html網(wǎng)頁里的標(biāo)簽抗果，無論是div,還是body筋帖，由于它們有可能層層嵌套或者“并聯(lián)”（這里借助一下電路圖的概念，也就是同級(jí)目錄）的關(guān)系冤馏，可以用樹形來描述它們的關(guān)系日麸，即有展開目錄，目錄下面有子目錄這樣的結(jié)構(gòu)逮光。思維導(dǎo)圖也可以說是樹形結(jié)構(gòu)的一種表現(xiàn)代箭。
DOM是什么呢？DOM的意思是涕刚，不需要通過直接改變html每個(gè)標(biāo)簽下面的content（內(nèi)容）嗡综，就可以靈活地展示html頁面，用別的方法來操作杜漠。最典型的例子就是雙人游戲的html網(wǎng)頁极景。如何顯示每個(gè)游戲參與者的姓名察净、設(shè)置什么條件下輪到對方、每一輪游戲結(jié)束顯示對方的分?jǐn)?shù)盼樟，這種動(dòng)態(tài)內(nèi)容如果寫在html網(wǎng)頁里氢卡，會(huì)顯得代碼很繁冗，可讀性低晨缴。因此使用DOM方法译秦，單獨(dú)寫一個(gè)腳本文件，讓這個(gè)腳本來控制html標(biāo)簽下的內(nèi)容喜庞。
通俗地來說诀浪，DOM是這么一個(gè)東西，假定讀者有一點(diǎn)html的知識(shí)（知道html標(biāo)簽延都，結(jié)構(gòu)）：
我有一本書（對應(yīng)的是html頁面雷猪，或者叫Document），我在第5頁插了一個(gè)書簽（對應(yīng)的是形如div之類的標(biāo)簽名晰房，甚至是具體的class和id的名字）求摇，上面寫著“這一頁夾了100塊”，在第32頁又插了個(gè)標(biāo)簽“期末考試考點(diǎn)2”……當(dāng)我打開書簽（manipulate）到書中相應(yīng)頁的時(shí)候殊者，我可以“找到100塊”或者閱覽与境、涂改某一頁內(nèi)容(content),統(tǒng)稱為DOM。
說到這里猖吴，DOM更像是tag（標(biāo)簽）對吧摔刁？我個(gè)人覺得就是根據(jù)一些標(biāo)簽做索引改變相應(yīng)標(biāo)簽下的內(nèi)容，根據(jù)標(biāo)簽對標(biāo)簽下面的元素進(jìn)行操作海蔽。那么為什么它的定義看起來非常的不像人話呢共屈？
筆者在此再舉一個(gè)例子，正好是昨天看書看到的党窜。