DOM属性和HTML属性的区别

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了DOM属性和HTML属性的区别相关的知识,希望对你有一定的参考价值。

一、是否可变的区别:

html属性中的值是不变的,dom属性的值是变化的。

二、适用场合不同:

核心DOM适合操作节点,如创建,删除,查找等;HTML DOM适合操作属性,如读取或修改属性的值。

三、两者对象不同:

核心DOM :

对象:Document,Node,   ElementNode,TextNode,AttributeNode,CommentNode,NodeList 

HTML DOM:

对象:image,Table,Form,Input,Select...HTML标签对象化

扩展资料

使用javascript操作DOM属性就是操作javascript对象的属性。javascript对象的属性是不需要声明的。有多种方式可以访问属性,如下:

myImg.src = "xxxxxx" //使用“.”运算符

myImg["src"] = "xxxxxx" // 使用属性访问器

var propName = "src";  myImg[propName] = "xxxxxx" //属性访问器支持变量

注:1)因为提供了属性访问器,所以可以通过下面的方式遍历一个DOM对象的所有属性:

var result = "";

for (var p in myImg)

result += "属性名:" + p + ",属性值:" + myImg[p] + "\\n";

参考技术A

区分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可以通过<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不同名的差异点,这是很自然的。

    参考

    [1]使用jQuery操作元素 —— DOM属性与HTML元素属性

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

    [2]HTML属性与DOM属性的区别?

    https://segmentfault.com/q/1010000004100696?_ea=489898

    博客内容仅作学习/交流/参考之用,欢迎大家交流探讨;E-Mail:dwang2014#hotmail.com(# ——> @)

    如果内容信息侵犯了您的合法权益,请告知我,我将及时处理。

    站在巨人的肩上才能看得更远,一步一个脚印才能走得更远。分享成长,交流进步,转载请注明出处!

参考技术B

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树,也能更新文档结构。(当然这种办法基本上不存在…)

以上是关于DOM属性和HTML属性的区别的主要内容,如果未能解决你的问题,请参考以下文章

js中,dom元素和节点的区别

DOM节点和DOM元素的区别

“HTML 属性”与“DOM 元素的属性”[重复]

HTML DOM 中 元素节点和属性节点是啥关系

jQuery之html(),text()和val()的区别

jQuery之html(),text()和val()的区别