争怎路由网/网站教程/内容

HTML属性与DOM属性的区别是什么？

网站教程2024-05-23 阅读
网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。
HTML属性与DOM属性的区别是什么？本篇文章就给大家介绍HTML属性与DOM属性的区别。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助

区分DOM属性和HTML元素属性

HTML元素的属性大家应该都知道，比如<img>元素的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属性和JavaScript的DOM对象的属性，本质上都只是影响DOM节点对象数据的众多理由之一。
多个原因影响同一个DOM节点的实质数据（多对一），请务必记住这个本质理由。
详细而言：
HTML仅仅是文档树和节点对象的一种描述方法。
JavaScript中的DOM对象，仅仅是一种操作浏览器引擎中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属性的区别是什么？的详细内容，更多请关注php中文网其它相关文章！
				
				
网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



      
……
标签:HTML属性与DOM属性的区别是啥？
 
相关阅读