RT

BTW，這樣的文章我還是沒(méi)有讀懂

http://www.cnblogs.com/tomkillua/archive/2012/08/15/2639420.html

對(duì)于瀏覽器引擎而言，并不存在“HTML標(biāo)簽”這回事。其本質(zhì)是DOM節(jié)點(diǎn)對(duì)象。也并不存在“HTML文檔”這回事，其本質(zhì)是DOM節(jié)點(diǎn)對(duì)象組成的文檔樹(shù)。

瀏覽器引擎才是實(shí)際存儲(chǔ)和渲染DOM節(jié)點(diǎn)對(duì)象的“大爺”。只是我們無(wú)法直接操作瀏覽器引擎，所以對(duì)這個(gè)本質(zhì)并不熟悉(其實(shí)也不需要很熟悉，但是得知道)。

DOM節(jié)點(diǎn)對(duì)象是唯一的，但操作DOM節(jié)點(diǎn)對(duì)象的數(shù)據(jù)，卻不止有一種方法。例如對(duì)于一個(gè)圖像的寬度：

HTML可以通過(guò)

<img>

的

width

屬性去定義；

JavaScript可以通過(guò)

element.width

去讀取和修改；

別忘了CSS，CSS也可以通過(guò)

width

屬性去修改。

HTML屬性和JavaScript的DOM對(duì)象的屬性，本質(zhì)上都只是影響DOM節(jié)點(diǎn)對(duì)象數(shù)據(jù)的眾多理由之一。

多個(gè)原因影響同一個(gè)DOM節(jié)點(diǎn)的實(shí)質(zhì)數(shù)據(jù)(多對(duì)一)，請(qǐng)務(wù)必記住這個(gè)本質(zhì)理由。

詳細(xì)而言：

HTML僅僅是文檔樹(shù)和節(jié)點(diǎn)對(duì)象的一種描述方法。

瀏覽器的解析器部分，根據(jù)HTML直接把DOM文檔樹(shù)，交給瀏覽器引擎。

用其他的方法，也可以描述DOM對(duì)象，例如JSX。(當(dāng)然用其他方法描述DOM對(duì)象的時(shí)候，生成DOM文檔樹(shù)的過(guò)程，肯定會(huì)發(fā)生相應(yīng)的修改)

JavaScript中的DOM對(duì)象，僅僅是一種操作瀏覽器引擎中DOM對(duì)象的接口。

JavaScript中的DOM對(duì)象，和瀏覽器引擎中存儲(chǔ)的DOM節(jié)點(diǎn)，本質(zhì)上不是一個(gè)東西。

用戶(hù)實(shí)際上僅僅有權(quán)操作JavaScript中提供的DOM對(duì)象。

JS引擎和瀏覽器引擎協(xié)作，確保了JavaScript的DOM對(duì)象，是引擎中DOM節(jié)點(diǎn)的一個(gè)原樣映射。

這樣用戶(hù)就能通過(guò)操作JavaScript的DOM對(duì)象，透明的修改引擎中存儲(chǔ)的DOM節(jié)點(diǎn)。

而瀏覽器引擎在本質(zhì)上，僅僅負(fù)責(zé)在DOM樹(shù)更新時(shí)承擔(dān)重新渲染，實(shí)際上并不關(guān)心JS的存在。

你如果用其他辦法修改了引擎使用的DOM樹(shù)，也能更新文檔結(jié)構(gòu)。(當(dāng)然這種辦法基本上不存在…)

至于HTML屬性名和JavaScript DOM對(duì)象的屬性名大多相似或等同，這僅僅是人為的方便。我如果喜歡我也可以設(shè)計(jì)成這樣嘛：

// <img src="http://localhost/1.png" alt="alt text" width=640 height=480 />

node.DataSource = "http://localhost/1.png";

node.AlternativeText = "alt text";

node.Dimension.Width = 640;

node.Dimension.Height = 480;

雖然這樣就真的沒(méi)法記了。

JavaScript DOM對(duì)象屬性名和HTML屬性名的近似，是JavaScript給Web開(kāi)發(fā)者的恩惠。選擇只記憶HTML屬性名，然后記憶(或者是踩坑了再反查)JavaScript屬性名中少量和HTML不同名的差異點(diǎn)，這是很自然的。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的html属性和dom属性的区别,HTML属性与DOM属性的区别？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。