DOM程式設計

2021-10-24 02:37:05 字數 2751 閱讀 2797

1.d:當建立了乙個網頁並把它載入到web瀏覽器中時,dom就生成了,它將我們編寫的網頁文件轉換成乙個文件物件。

js中的物件可以分為三種型別:

a、使用者定義物件:程式設計師自行建立的物件。

b、內建物件:array、math、date

c、宿主物件:由瀏覽器提供的物件。

js最初版本中,非常重要的一些宿主物件就可以使用了,最基礎的物件是window物件。window物件對應著瀏覽器視窗本身,這個物件的屬性和方法通常統稱為bom。

更好理解:(window object model)視窗物件模型。

document物件的主要功能就是處理網頁內容。

3.m:model map 某種事物的表現形式

dom代表著載入到瀏覽器視窗的當前網頁。瀏覽器提供了網頁的地圖,我們可以通過js去讀取這張地圖。要想從dom獲得資訊,必須先把各種表示和描述文件的「圖例」弄明白。

dom把文件表示為一顆家譜樹。

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

根元素是html

4.節點: 文件是由節點構成的集合。

元素節點:dom的原子是元素節點。這些元素在文件中的布局形成了文件的結構。

文字節點:文字節點總是被包含在元素節點的內部,或者間接包含。

屬性節點:用來對元素做出更具體的描述,因為屬性節點總是被放在起始標籤裡,所以屬性節點總是被包含在元素節點中,所有的屬性節點都被元素包含.

css:dom並不是唯一和網頁結構打交道,css告訴瀏覽器應該如何顯示乙份文件的內容。

繼承是css技術中的一項強大功能,類似於dom,css也把文件的內容視為一顆節點樹,節點樹上的各個元素將繼承其父元素的樣式屬性。

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

calss屬性:為相同的class屬性值相同的所有元素定義同一種樣式。
id屬性就像是乙個掛鉤,一頭連線著文件裡的某個元素,另一頭連著css樣式表裡的某個樣式。dom也可以使用這種掛鉤。

5 .獲取元素

有三種dom方法可以獲取元素節點:

getelementbyid

返回乙個物件。

document物件特有的函式。

文件中的每乙個元素都是乙個物件,利用dom提供的方法能得到任何乙個物件。

getelementsbytagname

返回乙個物件陣列

即使這個標籤只有乙個元素,也返回乙個陣列。

getelementsbyclassname

返回乙個物件陣列

也可以結合使用,比如,只要id為***的裡面的元素。

這個函式,ie8以下有相容問題。

6.獲取和設定屬性(只能用於元素節點)

getattribute

object.getattribute(attribute);

getattribute方法不屬於document物件,只能通過元素節點物件呼叫。

如果它們沒有某個屬性,將會是返回空白或者null.

這種表裡不一的現象源自dom的工作模式:

先載入文件的靜態內容,再動態重新整理,動態重新整理不影響文件的靜態內容。

這正是dom的真正作用:對頁面內容進行重新整理卻不需要在瀏覽器裡重新整理頁面。

這幾種方法,是將要編寫的許多dom指令碼的基石。

DOM程式設計

dom 基於文件物件模型程式設計,解析html頁面時,js引擎將html頁面中每乙個標籤都封裝成一物件,通過操作這些物件在頁面中顯示效果 整個文件 document 乙個標籤物件代表乙個節點 node 屬性 nodename 節點名稱 它是以乙個樹狀結構進行儲存 學習dom程式設計的作用 all 返...

DOM程式設計

相容ie專用 工作用建立乙個文字節點 標籤裡面插入文字 div1.innertext 你好 node原型提供的介面 div1.textcontent 你好 element提供的介面 插入頁面中 改style 改data 屬性 讀標準屬性 改節點的事件處理函式 改子節點 改html內容 改標籤改父節點...

DOM程式設計初探

這篇部落格將會介紹以下內容 想象一下你的 非常龐大 事實就是這樣 完全載入完需要很長的時間,如果等待載入完使用者才能看到網頁。顯然,使用者體驗和載入時間成反比,載入時間和網頁大小成正比,和網速大小成反比。我們的網頁越大,網速越慢,使用者體驗就會越差,直接的後果就是使用者丟失。當然,資料量小,網速快的...