html属性和dom属性的区别,HTML属性与DOM属性的区别？

BTW，这样的文章我还是没有读懂

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

对于浏览器引擎而言，并不存在“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不同名的差异点，这是很自然的。

html属性和dom属性的区别,HTML属性与DOM属性的区别？相关推荐

文档对象模型DOM（获取元素节点、设置节点属性）
练习题: 制作一个表格,显示班级的学生信息. 要求: 1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2,移开鼠标时则恢复为原背景色 #fff 2. 点击添加按钮,能动态在最后添加一行 3. 点 ...
[css] 说说visibility属性的collapse属性值有什么作用？在不同浏览器下有什么区别？
[css] 说说visibility属性的collapse属性值有什么作用?在不同浏览器下有什么区别? 设置visibility: collapse后对于普通元素来说跟visibility: hidd ...
前端：JS/27/HTML DOM简介和新特性，HTML DOM访问HTML元素的方法，元素对象的属性（标准属性），noscroll事件，实例：书讯快递
HTML DOM简介和新特性 1,HTML DOM简介核心DOM中,提供的属性和方法,已经可以操作网页了,为什么还要HTML DOM? 如果在核心DOM中,网页中节点层级很深时,访问这个节点时将十分 ...
console 对象属性方法详解 log、info、warn、error的区别
参考: https://blog.csdn.net/S_clifftop/article/details/80363128?utm_medium=distribute.pc_relevant.none ...
virtual DOM和真实DOM的区别_让虚拟DOM和DOMdiff不再成为你的绊脚石
来源 | https://juejin.im/post/5c8e5e4951882545c109ae9c Keep Moving 时至今日,前端对于知识的考量是越来越有水平了,逼格高大上了各类框架大 ...
属性被分为八大类不包括_Python语言---私有属性
属性分为实例属性与类属性方法分为普通方法,类方法,静态方法一:属性: 尽量把需要用户传入的属性作为实例属性,而把同类都一样的属性作为类属性.实例属性在每创造一个实例时都会初始化一遍,不同的实例的实 ...
python的面向对象中属性和方法默认是-Python 面向对象，类的属性和类的方法...
面向对象,类的属性和类的方法面向对象类和对象 Python类定义类属性类方法面向过程和面向对象面向过程和面向对象编程面向过程编程:函数式编程,C程序,shell等面向对象编 ...
动态创建的 CEdit 被限制长度，增加 ES_AUTOHSCROLL 属性；被无法Tab激活焦点，增加 WS_TABSTOP 属性(转)...
动态创建的 CEdit 被限制长度,增加 ES_AUTOHSCROLL 属性:被无法Tab激活焦点,增加 WS_TABSTOP 属性. CEdit m_editUrl; // ES_AUTOHSCRO ...
python修改类的属性值_python 四种方法修改类变量，实例对象调用类方法改变类属性的值，类对象调用类方法改变类属性的值，调用实例方法改变类属性的值，直接修改类属性的值...
三种方法修改类变量,实例对象调用类方法改变类属性的值,类对象调用类方法改变类属性的值,调用实例方法改变类属性的值,类名就是类对象,city就是类变量, #coding=utf-8 class empl ...
WPF 使用依赖属性(DependencyProperty) 定义用户控件中的Image Source属性
原文:WPF 使用依赖属性(DependencyProperty) 定义用户控件中的Image Source属性如果你要自定义一个图片按钮控件,那么如何在主窗体绑定这个控件上图片的Source呢? ...

html属性和dom属性的区别,HTML属性与DOM属性的区别？

html属性和dom属性的区别,HTML属性与DOM属性的区别？相关推荐

最新文章

热门文章