這篇文章給大家分享的是有關(guān)html中DOM的示例分析的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過來看看吧。

一 DOM是什么
DOM是HTML和XML文檔的編程接口。它不同于把html源碼在瀏覽器窗口當(dāng)做頁面或使用文本編輯器當(dāng)做純文本展示,它是對文檔的另一種結(jié)構(gòu)化的表述。DOM把文檔的所有節(jié)點(diǎn)都解析為一個(gè)對象,并提供了一些屬性和方法來描述它們。
DOM是W3C的標(biāo)準(zhǔn)。它被分為3個(gè)部分:
核心DOM:針對任何結(jié)構(gòu)化文檔的標(biāo)準(zhǔn)模型
XML DOM:針對XML文檔的標(biāo)準(zhǔn)模型
HTML DOM:針對HTML文檔的標(biāo)準(zhǔn)模型
DOM不是一種編程語言,它是一種標(biāo)準(zhǔn),一個(gè)模型,它與編程語言相對獨(dú)立。編程語言都可以按照這種模型實(shí)現(xiàn)對文檔的訪問和處理。
注:因?yàn)槲覀冎饕菍W(xué)習(xí)WEB編程,所以接下來文章中即將提到的DOM均指HTML DOM,使用到的DOM API也均是JavaScript腳本語言實(shí)現(xiàn)。
二 DOM的訪問
我們知道,各個(gè)瀏覽器對JavaScript都有不同的實(shí)現(xiàn),所以它們在實(shí)現(xiàn)DOM標(biāo)準(zhǔn)時(shí),也會有一些差異,但它們既然都遵循了該標(biāo)準(zhǔn),所以又呈現(xiàn)出了不同程度一致性。所以我們在使用DOM時(shí),并不需要做任何特別的操作,如果碰到有差異的地方(主要體現(xiàn)在方法名稱和參數(shù)上),只需根據(jù)不同瀏覽器使用他們各自實(shí)現(xiàn)的相關(guān)方法即可。實(shí)際上他們的實(shí)現(xiàn)都遵循了統(tǒng)一標(biāo)準(zhǔn)。
DOM把文檔視做樹結(jié)構(gòu):
整個(gè)文檔是一個(gè)文檔節(jié)點(diǎn)
每個(gè) HTML 標(biāo)簽是一個(gè)元素節(jié)點(diǎn)
包含在 HTML 元素中的文本是文本節(jié)點(diǎn)
每一個(gè) HTML 屬性是一個(gè)屬性節(jié)點(diǎn)
注釋屬于注釋節(jié)點(diǎn)

通過這個(gè)節(jié)點(diǎn)樹,JavaScript可以輕松的訪問并操作這些節(jié)點(diǎn)。
三 DOM節(jié)點(diǎn)類型
每個(gè)節(jié)點(diǎn)對象有都有一個(gè)nodeType,nodeName和nodeValue屬性,通過這幾個(gè)屬性的值,我們可以獲取該節(jié)點(diǎn)的相關(guān)信息:
| 節(jié)點(diǎn)類型 | nodeName 返回 | nodeValue 返回 |
| 1 | Element | 元素名 | null |
| 2 | Attr | 屬性名稱 | 屬性值 |
| 3 | Text | #text | 節(jié)點(diǎn)的內(nèi)容 |
| 4 | CDATASection | #cdata-section | 節(jié)點(diǎn)的內(nèi)容 |
| 5 | EntityReference | 實(shí)體引用名稱 | null |
| 6 | Entity | 實(shí)體名稱 | null |
| 7 | ProcessingInstruction | target | 節(jié)點(diǎn)的內(nèi)容 |
| 8 | Comment | #comment | 注釋文本 |
| 9 | Document | #document | null |
| 10 | DocumentType | 文檔類型名稱 | null |
| 11 | DocumentFragment | #document 片段 | null |
| 12 | Notation | 符號名稱 | null |
四 DOM分級
一級DOM
1級DOM在1998年10月份成為W3C的提議,由DOM核心與DOM HTML兩個(gè)模塊組成。DOM核心能映射以XML為基礎(chǔ)的文檔結(jié)構(gòu),允許獲取和操作文檔的任意部分。DOM HTML通過添加HTML專用的對象與函數(shù)對DOM核心進(jìn)行了擴(kuò)展。
二級DOM
2級DOM在一級DOM的基礎(chǔ)上進(jìn)行了擴(kuò)展,它引進(jìn)了幾個(gè)新DOM模塊來處理新的接口類型:
DOM視圖:描述跟蹤一個(gè)文檔的各種視圖(使用CSS樣式設(shè)計(jì)文檔前后)的接口;
DOM事件:描述事件接口;
DOM樣式:描述處理基于CSS樣式的接口;
DOM遍歷與范圍:描述遍歷和操作文檔樹的接口;
專門建立的學(xué)習(xí)Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享學(xué)習(xí)方法和需要注意的小細(xì)節(jié),互相交流學(xué)習(xí),不停更新最新的教程和學(xué)習(xí)技巧(從零基礎(chǔ)開始到WEB前端項(xiàng)目實(shí)戰(zhàn)教程,學(xué)習(xí)工具,全棧開發(fā)學(xué)習(xí)路線以及規(guī)劃)
三級DOM
3級DOM通過引入統(tǒng)一方式載入和保存文檔和文檔驗(yàn)證方法對DOM進(jìn)行進(jìn)一步擴(kuò)展,DOM3包含一個(gè)名為“DOM載入與保存”的新模塊,DOM核心擴(kuò)展后可支持XML1.0的所有內(nèi)容,包括XML Infoset、 XPath、和XML Base。
感謝各位的閱讀!關(guān)于“html中DOM的示例分析”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
新聞標(biāo)題:html中DOM的示例分析-創(chuàng)新互聯(lián)
當(dāng)前鏈接:http://chinadenli.net/article0/edioo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供Google、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、外貿(mào)建站、網(wǎng)站維護(hù)、品牌網(wǎng)站設(shè)計(jì)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容