HTML屬性與DOM屬性的差別是什麼？

HTML屬性與DOM屬性的差別是什麼？本篇文章就跟大家介紹HTML屬性與DOM屬性的差別。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助

區分DOM屬性和HTML元素屬性

##HTML元素的屬性大家應該都知道，像是元素的src，id等。

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

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

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

區分HTML元素屬性和DOM屬性是一件很考驗經驗和記憶力的事情，那是曾經。現在jQuery的屬性運算函數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";
}

注意，事件或函數也是物件的屬性。如果一個物件是DOM對象，就預設擁有很多的屬性

使用javascript操作HTML元素屬性

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

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

透過改變HTML屬性class，會改變對應的DOM元素的className屬性。但不是所有的HTML元素都有對應的DOM屬性。例如自訂的HTML元素屬性就無法轉換成DOM屬性。再如元素屬性"className"比較特別，因為className是和HTML的class對應的

HTML屬性與DOM屬性的差別是什麼？

對於瀏覽器引擎而言，並不存在「HTML標籤」這回事。其本質是

DOM節點物件。也不存在「HTML文件」這回事，其本質是DOM節點物件組成的文檔樹。 瀏覽器引擎才是實際儲存和渲染DOM節點物件的「大爺」。只是我們無法直接操作瀏覽器引擎，所以對這個本質並不熟悉（其實也不需要很熟悉，但得知道）。

DOM節點物件是唯一的，但操作DOM節點物件的數據，卻不只一種方法。例如對於一個圖像的寬度：

• HTML可以透過的width屬性去定義；

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

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

HTML屬性和JavaScript的DOM物件的屬性，本質上都只是影響DOM節點物件資料的眾多理由之一。

多個原因影響同一個DOM節點的實質資料（多對一），請務必記住這個本質理由。

詳細而言：

HTML只是文檔樹和節點物件的一種描述方法。

• 瀏覽器的

  解析器部分，依照HTML直接把DOM文件樹，交給瀏覽器引擎。

• 用其他的方法，也可以描述DOM對象，例如JSX。 （當然用其他方法描述DOM物件的時候，產生DOM文檔樹的過程，一定會發生對應的修改）

JavaScript中的DOM對象，只是一種操作瀏覽器引擎中DOM物件的介面。

• JavaScript中的DOM對象，和瀏覽器引擎中儲存的DOM節點，本質上不是一個東西。

• 使用者實際上僅有權利操作JavaScript中提供的DOM物件。

• JS引擎和瀏覽器引擎協作，確保了JavaScript的DOM對象，是引擎中DOM節點的一個

  原樣映射。

• 這樣使用者就能透過操作JavaScript的DOM對象，透明的修改引擎中儲存的DOM節點。

• 而瀏覽器引擎在本質上，僅僅負責在DOM樹更新時承擔重新渲染，實際上並不關心JS的存在。

• 你如果用其他办法修改了引擎使用的DOM树，也能更新文档结构。（当然这种办法基本上不存在…）

至于HTML属性名和JavaScript DOM对象的属性名大多相似或等同，这仅仅是人为的方便。我如果喜欢我也可以设计成这样嘛：

// <img  src="/static/imghwm/default1.png" data-src="http://localhost/1.png" class="lazy" alt="HTML屬性與DOM屬性的差別是什麼？" >
node.DataSource = "http://localhost/1.png";
node.AlternativeText = "alt text";
node.Dimension.Width = 640;
node.Dimension.Height = 480;

虽然这样就真的没法记了。

JavaScript DOM对象属性名和HTML属性名的近似，是JavaScript给Web开发者的恩惠。选择只记忆HTML属性名，然后记忆（或者是踩坑了再反查）JavaScript属性名中少量和HTML不同名的差异点，这是很自然的。

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问JavaScript视频教程，jQuery视频教程，bootstrap教程！

以上是HTML屬性與DOM屬性的差別是什麼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！