html属性与dom属性的区别是什么？本篇文章就给大家介绍html属性与dom属性的区别。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助
区分dom属性和html元素属性
html元素的属性大家应该都知道，比如a1f02c36ba31691bcfe87b2722de723b元素的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可以通过<img>的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="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开发者的恩惠。选择只记忆html属性名，然后记忆（或者是踩坑了再反查）javascript属性名中少量和html不同名的差异点，这是很自然的。
总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问javascript视频教程，jquery视频教程，bootstrap教程！
以上就是html属性与dom属性的区别是什么？的详细内容。