DOM基礎知識

2022-08-23 19:30:12 字數 2757 閱讀 7978

首先,我們需要介紹什麼是dom。dom的英語全稱為document object model,翻譯成中文就

是文件物件模型。也就是說,將整個文件看作是乙個物件。而乙個文件又是由很多節點組成的,

那麼這些節點也可以被看作是乙個個的物件。dom裡面的物件屬於宿主物件,需要瀏覽器來作

為宿主。一旦離開了瀏覽器這個環境,那麼該物件將不復存在。同樣,上一章我們所介紹的 bom也是如此,需要瀏覽器來作為宿主,所以它也是乙個宿主物件。

dom的作用如下:

・瀏覽器提供的操縱html文件內容的應用程式介面

・用於對文件進行動態操作,如增加文件內容,刪除文件內容,修改文件內容等等

dom歷史

在介紹了什麼是dom之後,接下來我們來看一下dom的乙個發展史。而一說到dom的發展史,

那就不得不介紹dom的級別。這裡我們對dom的級別來進行乙個簡單的介紹,如下:

dom level0:首先,我們需要確定的是在dom標準中並沒有dom0級這個級別。所謂

的dom0級是dom歷史座標中的乙個參照點而已,怎麼說呢,dom0級指的是ie4和n etscape 4.0這些瀏覽器最初支援的dom相關方法。主要關注於常見的頁面元素,比如影象,鏈結和表

單。有些現在影象和表單的那些方法,目前依然可以被用在當前版本的dom中。

dom level1:於2023年10月成為w3c的推薦標準。dom1級由兩個模組組成:dom核心 (dom core)和dom html。這個版本引入了網頁的完整模型,允許在網頁的每個部分進行導

航。dom level2:對dom level 1 做了擴充套件,於20001

年出版,引入了流行的 getelementbyid()方

法,讓訪問網頁上的特定元素變得更加容易。

dom level3:對dom level 2做了進一步的擴充套件,於2023年出版。

節點型別與節點名稱

—個文件是由大量的節點所構成的。而每乙個節點都有乙個叫做nodetype的屬性,用於表明節

點的型別。不同的節點型別對應了不同的數值,具體對應的數值如下表:

節點名稱

對應數值

兀素p

node.element_node(1)

屬性節點

node.attribute_node

文字節點

node.text_node

cdata節點

node.cdata_section_node ⑷

實體引用名稱節點

node.entry_reference_node(5)

實體名稱節點

node.entity_node(6)

處理指令節點

node.processing_instruction_node(7)

注釋節點

node.comment_node(8)

文件節點

node.document_node(9)

文件型別節點

node.document_type_node(10)

文件片段節點

node.document_fragment_node(11)

dtd宣告節點

node.notation_node(12)

從上面我們可以看出, 到該節點的節點型別,

不同的節點對應了不同的節點型別,我們可以通過nodetype屬性來獲取 示例如下:

lorem ipsum dolor sit amet.

nodetype屬性可以和if配合使用,確保不會在錯誤的節點型別上執行錯誤的操作,如下:

lorem ipsum dolor sit amet.

效果:lorem ipsum dolor sit amet.

除了獲取節點型別以外,我們還可以通過nodename屬性來獲取節點的名稱,示例如下:

lorem ipsum dolor sit amet.

可以使用nodevalue來獲取乙個元素節點的文字值,示例如下:

lorem ipsum dolor sit amet.

lorem ipsum dolor sit amet.

鏈結 1

效果:lorem ipsum dolor sit amet.

需要注意的是n odevalue是獲取節點的值,所以還是需要先定位到元素節點下面的文字節點。

最後一點需要說明的是,屬性節點並不是元素節點的子節點,只能算作是元素節點的乙個附屬節

點,如下圖:

這裡我們通過一段**來證明上面說的這一點,如下:

lorem ipsum dolor sit amet.

效果:▼ nodelist(1)

► 0: text

length: 1

►_proto_: nodelist

可以看到,當我們檢視vp>元素下面的子節點時,列印出來的子節點只有乙個文字節點,通過這

個例子就可以證明屬性節點並不是元素節點的子節點,只能算作是元素節點的乙個附屬節點。

dom基礎知識

dom 英文全稱 document object model 譯成中文即是 文件對像模型 聽起來很術語,其實就是文件內容的結構關係 文件型別可以是html或xml,dom具有對html檔案和xml檔案元素的訪問控制能力,簡單點說利用dom可以對某個html或xml檔案新增,修改,刪除元素 更改其現有...

DOM 基礎知識

dom樹中的元素節點 節點的屬性 x.nodevalue 節點物件x的值 唯讀 元素節點的 nodename 與標籤名相同 屬性節點的 nodename 是屬性的名稱 文字節點的 nodename 永遠是 text 文件節點的 nodename 永遠是 document x.nodename 節點物...

DOM小基礎知識

1.獲取頁面中的html元素 2.獲取或改變頁面中的html元素內容 3.獲取或改變頁面中的html屬性 4.獲取或改變頁面中的css樣式 5.為元素繫結事件 6.建立html元素 7.刪除已有的html元素 通過id查詢html元素 唯一 var p document.getelementbyid...