區(qū)分DOM屬性和html' target='_blank'>HTML元素屬性

HTML元素的屬性大家應該都知道，比如 img 元素的src，id等。

最終瀏覽器會解析HTML，構(gòu)建DOM模型，也就是說瀏覽器會解析HTML元素為DOM元素。

javascript中獲取到的都是DOM元素，而不是HTML元素。

HTML元素屬性和DOM屬性的名稱和值大部分都相同，所以導致很多人都錯誤的認為兩者是相同的。

區(qū)分HTML元素屬性和DOM屬性是一件很考驗經(jīng)驗和記憶力的事情，那是曾經(jīng)。現(xiàn)在jQuery的屬性操作函數(shù)attr()就可以忘記這些差異。

使用javascript操作DOM屬性

使用javascript操作DOM屬性就是操作javascript對象的屬性。javascript對象的屬性是不需要聲明的。有多種方式可以訪問屬性，如下：

myImg.src = xxxxxx //使用“.”運算符myImg[ src ] = xxxxxx // 使用屬性訪問器var propName = src myImg[propName] = xxxxxx //屬性訪問器支持變量

因為提供了屬性訪問器，所以可以通過下面的方式遍歷一個DOM對象的所有屬性：

var result = for (var p in myImg)result += 屬性名： + p + ，屬性值： + myImg[p] + /n }

注意，事件或者函數(shù)也是對象的一個屬性。如果一個對象是DOM對象，就默認情況下?lián)碛泻芏嗟膶傩?/p>

使用javascript操作HTML元素屬性

使用javascript中的getAttribute和setAttribute，可以操作HTML元素屬性。比如：

alert(myImg.getAttribute( class ));myImg.setAttribute( class , myclass2 

通過改變HTML屬性class，會改變相應的DOM元素的className屬性。但不是所有的HTML元素都有對應的DOM屬性。比如自定義的HTML元素屬性就無法轉(zhuǎn)換成DOM屬性。再如元素屬性 className 就比較特別，因為className是和HTML的class對應的

HTML屬性與DOM屬性的區(qū)別是什么？

對于瀏覽器引擎而言，并不存在“HTML標簽”這回事。其本質(zhì)是DOM節(jié)點對象。也并不存在“HTML文檔”這回事，其本質(zhì)是DOM節(jié)點對象組成的文檔樹。瀏覽器引擎才是實際存儲和渲染DOM節(jié)點對象的“大爺”。只是我們無法直接操作瀏覽器引擎，所以對這個本質(zhì)并不熟悉（其實也不需要很熟悉，但是得知道）。

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

HTML可以通過 img 的width屬性去定義；

JavaScript可以通過element.width去讀取和修改；

別忘了CSS，CSS也可以通過width屬性去修改。

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

多個原因影響同一個DOM節(jié)點的實質(zhì)數(shù)據(jù)（多對一），請務(wù)必記住這個本質(zhì)理由。

詳細而言：

HTML僅僅是文檔樹和節(jié)點對象的一種描述方法。

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

用其他的方法，也可以描述DOM對象，例如JSX。（當然用其他方法描述DOM對象的時候，生成DOM文檔樹的過程，肯定會發(fā)生相應的修改）

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

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

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

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

這樣用戶就能通過操作JavaScript的DOM對象，透明的修改引擎中存儲的DOM節(jié)點。

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

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

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

// 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;

雖然這樣就真的沒法記了。

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

總結(jié)：以上就是本篇文的全部內(nèi)容，希望能對大家的學習有所幫助。更多相關(guān)教程請訪問JavaScript視頻教程，jQuery視頻教程，bootstrap教程！

以上就是HTML屬性與DOM屬性的區(qū)別是什么？的詳細內(nèi)容，其它編程語言

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。