1. 程式人生 > >javascript--- HTML DOM

javascript--- HTML DOM

web post 動態頁面 編程 結構化 認知 部分 方法 --

看了這個題目,不知聰明的讀者會有什麽樣的感覺?這篇文章將要講javascript和DOM的關系呢?還是要講javascript的DOM?

在這裏我首先就講明文章的主旨有兩點:什麽是DOM?它和javascript的關系是什麽?


什麽是DOM?


官方解釋:Document Object Model 是一種用於HTML和XML文檔的編程接口。它給文檔提供一個結構化的表示方法。能夠改變文檔的內容和呈現方式。

看了這個官方解釋認為。還是那樣沒有什麽感覺,那好請尾隨我繼續,等讀完本文相信你對上面的官方解釋會有了共同的認知。

不同的類型的網頁文檔有不同的DOM,本文將從HTML DOM 入手。DOM中的D能夠理解為WEB載入的文檔,當創建一個網頁並把它載入到瀏覽器時,DOM就在幕後悄然而生。它將依據你編寫的網頁文檔創建一個文檔對象。

O指的是對象。document對象。DOM為html網頁中的每一元素都封裝為對象。

M是模型,可是我更喜歡說是結構,這個模型體現了html各個元素之間的結構關系。

將封裝的對象以節點的形式構成單性生殖家族圖譜樹,每一個網頁元素都能夠被確切的定位。

二 html與 DOM


以下的一張圖,解釋了他們兩個的關系。

技術分享

從圖中我們不難看出。他們兩個的關系。html網頁中的標簽和DOM結構圖中的節點是一一相應的。DOM中的節點是對網頁中標簽的映射。

我們通過對節點的操作就能夠實現對元素的操作。外界可通過DOM提供的對象、方法和屬性,訪問全部 HTML元素。連同他們包括的文本和屬性,能夠對當中的內容進行改動和刪除。同一時候也能夠創建新的元素。這樣解除了html頁面內容和動態實現之間的耦合。同一時候有利於保護原有html頁面的結構。


三 javascript與DOM


通過javascript,能夠重構整個HTML文檔,能夠加入、刪除、改變或重排頁面上的項目。要改變頁面,javascript
就須要獲得對HTML文檔中的全部元素進行訪問的入口。

這個入口。包含對HTML元素進行加入、移動、改變等操作。都是通過DOM來實現的。

DOM是一套規範、標準。DOM不是javascript的一部分。它為javascript提供對象方法。它是網頁對被“外界”使用的通道或者說是接口。今天流行的語言是javascript,通過它能夠實現動態頁面等各種功能。或許明天就會有還有一種語言的誕生。這樣的語言也能夠通過DOM提供的對象方法。對網頁進行查詢和操作。

DOM有一種“以不變應萬變的情懷”。DOM解除了網頁內容與動態實現之間的耦合。


總結:


DOM就是一套標準規範,它也是web文檔對外提供的接口。DOM實現了頁面內容和實現的分離,使網頁有了更高的靈活性。javascript能夠實現html頁面的動態功能。而DOM就是連接二者的橋梁。

javascript--- HTML DOM