DOM 是用來(lái)訪問(wèn)或操作HTML文檔、XHTML文檔、XML文檔中的節(jié)點(diǎn)元素。
現(xiàn)在基本上所有的瀏覽器都都執(zhí)行了W3C發(fā)布的DOM規(guī)范,所以在瀏覽器上就可以用DOM的這些API。
DOM的級(jí)別Level
DOM0:不是W3C規(guī)范。
DOM1:開始是W3C規(guī)范。專注于HTML文檔和XML文檔。
DOM2:對(duì)DOM1增加了樣式表對(duì)象模型
DOM3:對(duì)DOM2增加了內(nèi)容模型 (DTD 、Schemas) 和文檔驗(yàn)證。
牢記:站高一個(gè)維度去理解問(wèn)題 !
為了理解DOM,我們至少需要站在瀏覽器的角度來(lái)思考。
DOM概念本身很簡(jiǎn)單,請(qǐng)先完全跟著我的思路來(lái):
抽象一下:
再抽象一下:
最后:
再回顧下整個(gè)過(guò)程,每個(gè)步驟都可以問(wèn)自己幾個(gè)問(wèn)題,比如:DOM到底是建模過(guò)程,還是最后建的那個(gè)模型,還是指操作節(jié)點(diǎn)的API接口呢,還是...?
以上是站在瀏覽器的角度思考DOM,你還可以站在瀏覽器設(shè)計(jì)人員、網(wǎng)頁(yè)編碼人員等角度考慮:
至此,你應(yīng)該明白了什么是DOM,甚至明白了為什么一開始不明白以后如何做,如何舉一反三,甚至還能看出一點(diǎn)如何建立體系化認(rèn)知的影子。笑
牢記:站高一個(gè)維度去理解問(wèn)題 !
文檔對(duì)象模型( DOM, Document Object Model )主要用于對(duì)HTML和XML文檔的內(nèi)容進(jìn)行操作。DOM描繪了一個(gè)層次化的節(jié)點(diǎn)樹,通過(guò)對(duì)節(jié)點(diǎn)進(jìn)行操作,實(shí)現(xiàn)對(duì)文檔內(nèi)容的添加、刪除、修改、查找等功能。
一、DOM樹
DOM樹有兩種,分別為節(jié)點(diǎn)樹和元素樹。
節(jié)點(diǎn)樹:把文檔中所有的內(nèi)容都看成樹上的節(jié)點(diǎn);
元素樹:僅把文檔中的所有標(biāo)簽看成樹上的節(jié)點(diǎn)。
二、DOM常用操作
2.1 查找節(jié)點(diǎn)
document.getElementById('id屬性值');
返回?fù)碛兄付╥d的第一個(gè)對(duì)象的引用
document/element.getElementsByClassName('class屬性值');
返回?fù)碛兄付╟lass的對(duì)象集合
document/element.getElementsByTagName('標(biāo)簽名');
返回?fù)碛兄付?biāo)簽名的對(duì)象集合
document.getElementsByName('name屬性值');
返回?fù)碛兄付Q的對(duì)象結(jié)合
document/element.querySelector('CSS選擇器');
僅返回第一個(gè)匹配的元素
document/element.querySelectorAll('CSS選擇器');
返回所有匹配的元素
document.documentElement
獲取頁(yè)面中的HTML標(biāo)簽
document.body
獲取頁(yè)面中的BODY標(biāo)簽
document.all['']
獲取頁(yè)面中的所有元素節(jié)點(diǎn)的對(duì)象集合型
2.2 新建節(jié)點(diǎn)
document.createElement('元素名');
創(chuàng)建新的元素節(jié)點(diǎn)
document.createAttribute('屬性名');
創(chuàng)建新的屬性節(jié)點(diǎn)
document.createTextNode('文本內(nèi)容');
創(chuàng)建新的文本節(jié)點(diǎn)
document.createComment('注釋節(jié)點(diǎn)');
創(chuàng)建新的注釋節(jié)點(diǎn)
document.createDocumentFragment( );
創(chuàng)建文檔片段節(jié)點(diǎn)
2.3 添加新節(jié)點(diǎn)
parent.appendChild( element/txt/comment/fragment );
向父節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)后追加新節(jié)點(diǎn)
parent.insertBefore( newChild, existingChild );
向父節(jié)點(diǎn)的某個(gè)特定子節(jié)點(diǎn)之前插入新節(jié)點(diǎn)
element.setAttributeNode( attributeName );
給元素增加屬性節(jié)點(diǎn)
element.setAttribute( attributeName, attributeValue );
給元素增加指定屬性,并設(shè)定屬性值
dom是app文檔格式。
DOM一般指文檔對(duì)象模型。文檔對(duì)象模型(Document Object Model,簡(jiǎn)稱DOM),是W3C組織推薦的處理可擴(kuò)展置標(biāo)語(yǔ)言的標(biāo)準(zhǔn)編程接口。它是一種與平臺(tái)和語(yǔ)言無(wú)關(guān)的應(yīng)用程序接口(API),它可以動(dòng)態(tài)地訪問(wèn)程序和腳本,更新其內(nèi)容、結(jié)構(gòu)和www文檔的風(fēng)格。
DOM是一種基于樹的API文檔,它要求在處理過(guò)程中整個(gè)文檔都表示在存儲(chǔ)器中。
DOM: 要求解析器將整個(gè)XML 文檔裝在到內(nèi)存, 并解析成一個(gè) Document 對(duì)象.
a) . 優(yōu)點(diǎn): 元素與元素之間保留結(jié)構(gòu)關(guān)系, 故可以進(jìn)行增刪改查操作.
b) . 缺點(diǎn): XML 文檔過(guò)大, 可能出現(xiàn)內(nèi)存溢出現(xiàn)象
解析器: 就是根據(jù)不同的解析方式提供的具體實(shí)現(xiàn), 有的解析器操作過(guò)于繁瑣, 為開發(fā)方便, 提供了易于操作的解析開發(fā)包。
dom是Document Object Model縮寫,翻譯過(guò)來(lái)就是文檔對(duì)象模型
文檔對(duì)象模型(Document Object Model,簡(jiǎn)稱DOM),是W3C組織推薦的處理可擴(kuò)展置標(biāo)語(yǔ)言的標(biāo)準(zhǔn)編程接口。它是一種與平臺(tái)和語(yǔ)言無(wú)關(guān)的應(yīng)用程序接口(API),它可以動(dòng)態(tài)地訪問(wèn)程序和腳本,更新其內(nèi)容、結(jié)構(gòu)和www文檔的風(fēng)格(HTML和XML文檔是通過(guò)說(shuō)明部分定義的)。文檔可以進(jìn)一步被處理,處理的結(jié)果可以加入到當(dāng)前的頁(yè)面。
文檔對(duì)象模型(Document Object Model,簡(jiǎn)稱DOM),是W3C組織推薦的處理可擴(kuò)展置標(biāo)語(yǔ)言的標(biāo)準(zhǔn)編程接口。它是一種與平臺(tái)和語(yǔ)言無(wú)關(guān)的應(yīng)用程序接口(API),它可以動(dòng)態(tài)地訪問(wèn)程序和腳本,更新其內(nèi)容、結(jié)構(gòu)和www文檔的風(fēng)格(HTML和XML文檔是通過(guò)說(shuō)明部分定義的)。文檔可以進(jìn)一步被處理,處理的結(jié)果可以加入到當(dāng)前的頁(yè)面。
1 虛擬dom是在操作真實(shí)dom的基礎(chǔ)上進(jìn)行操作和渲染的,相較于真實(shí)dom來(lái)說(shuō)更加輕量級(jí)、高效且易于維護(hù)。2 虛擬dom不需要直接操作真實(shí)dom,而是通過(guò)diff算法和批量操作等方式,將修改后的虛擬dom與之前的虛擬dom進(jìn)行比對(duì),最終僅對(duì)需要進(jìn)行更新的真實(shí)dom節(jié)點(diǎn)進(jìn)行操作,從而降低了dom操作的成本和頻率。3 使用虛擬dom可以提供更加流暢的用戶體驗(yàn),同時(shí)也能夠減輕大型web應(yīng)用程序的服務(wù)器壓力。4 真實(shí)dom的操作屬于瀏覽器的原生操作,因此在某些場(chǎng)景下可能比虛擬dom更加高效,例如單頁(yè)面應(yīng)用程序中復(fù)雜交互和低延遲等操作,但同時(shí)也會(huì)帶來(lái)更多的維護(hù)和優(yōu)化難度。
你是在什么場(chǎng)景下遇到這個(gè)問(wèn)題的?login.dom我能聯(lián)想到的可能只有dom是某個(gè)叫l(wèi)ogin的對(duì)象的屬性
1 虛擬DOM和真實(shí)DOM的最大區(qū)別在于刷新頁(yè)面方式的不同。
真實(shí)DOM需要重新渲染整個(gè)頁(yè)面,而虛擬DOM只更新需要更新的部分,減少了頁(yè)面重繪的操作,從而提高了頁(yè)面的渲染效率。
2 虛擬DOM是在內(nèi)存中維護(hù)的一份虛擬的DOM樹,通過(guò)比對(duì)虛擬DOM和真實(shí)DOM的差異來(lái)進(jìn)行有針對(duì)性地更新操作,實(shí)現(xiàn)最小化渲染,提高效率。
3 虛擬DOM還能夠保證頁(yè)面渲染的一致性,不受操作系統(tǒng)和瀏覽器的影響,并且方便進(jìn)行跨平臺(tái)和跨框架開發(fā)。
因此,虛擬DOM成為了眾多前端框架和庫(kù)的共同選擇,如React、Vue等等。