DOM的理解

1.1 D：當創建了一個網頁并把它加載到Web瀏覽器中時，DOM就生成了，它將我們編寫的網頁文檔轉換成一個文檔對象。

1.2 O：“對象”是一種自足的數據集合，相關聯的變量稱為這個對象的屬性，只能通過這個對象調用的函數稱為這個對象的方法。

JS中的對象可以分為三種類型：

A、用戶定義對象：程序員自行創建的對象。

B、內建對象：Array、Math、Date

C、宿主對象：由瀏覽器提供的對象。

JS最初版本中，非常重要的一些宿主對象就可以使用了，最基礎的對象是Window對象。Window對象對應著瀏覽器窗口本身，這個對象的屬性和方法通常統稱為BOM。

更好理解：（window object model）窗口對象模型。

document對象的主要功能就是處理網頁內容。接下來我們基本上只討論document對象的屬性和方法。

1.3 M：model map 某種事物的表現形式

DOM代表著加載到瀏覽器窗口的當前網頁。瀏覽器提供了網頁的地圖，我們可以通過JS去讀取這張地圖。要想從DOM獲得信息，必須先把各種表示和描述文檔的“圖例”弄明白。

DOM把文檔表示為一顆家譜樹。

家譜樹、節點樹：使用parent、child、sibling等記號來表明家族成員之間的關系。

根元素是html

1.4 節點： 文檔是由節點構成的集合。

元素節點：DOM的原子是元素節點。這些元素在文檔中的布局形成了文檔的結構。

文本節點：文本節點總是被包含在元素節點的內部，或者間接包含。

屬性節點：用來對元素做出更具體的描述，因為屬性節點總是被放在起始標簽里，所以屬性節點總是被包含在元素節點中，所有的屬性節點都被元素包含。

CSS：DOM并不是唯一和網頁結構打交道，CSS告訴瀏覽器應該如何顯示一份文檔的內容。

繼承是CSS技術中的一項強大功能，類似于DOM，CSS也把文檔的內容視為一顆節點樹，節點樹上的各個元素將繼承其父元素的樣式屬性。

有時我們需要將某些樣式作用于某個特定的元素，需要把元素與其他元素區分開，需要使用class屬性或id屬性。

calss屬性：為相同的class屬性值相同的所有元素定義同一種樣式。

id屬性：給頁面里的某個元素加上一個獨一無二的標識符。

id屬性就像是一個掛鉤，一頭連接著文檔里的某個元素，另一頭連著CSS樣式表里的某個樣式。DOM也可以使用這種掛鉤。

1.5 獲取元素

有三種DOM方法可以獲取元素節點：

getElementById

返回一個對象。

document對象特有的函數。

document.getElementById(‘xxx’);

文檔中的每一個元素都是一個對象，利用DOM提供的方法能得到任何一個對象。

2.getElementsByTagName

返回一個對象數組

document.getElementsTagName(‘li’);

即使這個標簽只有一個元素，也返回一個數組。

3.getElementsByClassName

返回一個對象數組

document.getElementsClassName(‘yyy’);

也可以結合使用，比如，只要id為xxx的里面的元素。

這個函數，IE8以下有兼容問題。不過，現在，沒有繼續兼容IE的了吧？瑟瑟發抖……

1.6 獲取和設置屬性（只能用于元素節點）

A、getAttribute

object.getAttribute(attribute);

getAttribute方法不屬于document對象，只能通過元素節點對象調用。

如果它們沒有某個屬性，將會是返回空白或者null，至于是哪個，要看是什么瀏覽器。

B、setAttribute

對屬性節點的值做出修改

object.setAttribute(attribute,value)

用在本身就有這個屬性的元素上，就會將原來的值覆蓋掉。

但是，setAttribute做出的修改不會反映在文檔本身的源代碼里。

這種表里不一的現象源自DOM的工作模式：

先加載文檔的靜態內容，再動態刷新，動態刷新不影響文檔的靜態內容。

這正是DOM的真正威力：對頁面內容進行刷新卻不需要在瀏覽器里刷新頁面。

tips：這五種方法，是將要編寫的許多DOM腳本的基石。

總結

以上是生活随笔為你收集整理的ie插件获取dom_读书笔记《DOM编程艺术》DOM的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。