本人对HTML元素和DOM节点之间关系的理解

这篇文章是一篇自己学习DOM相关内容之后的总结，也是方便对DOM属性和HTML属性的理解，以及使用JavaScript更好的对HTML和DOM进行操作，自我感觉官方的话特别的繁琐，不是特别好理解，都是一些书面语看起来特别的别扭，特意记录一下，方便后续回头复习，下面原本是自己记录的一大段文字，为了方便大家看，我把它分成了几小段，如果有不妥之处请评论区告诉我，以便及时修改。

1）DOM：文档对象模型，何为文档对象模型，首先从HTML说起，HTML（超文本标记语言）它不是一种编程语言，而是一种标记语言，通俗的来讲HTML就是来描述网页用的。

2）HTML主要表现形式是HTML标签，HTML元素其实和HTML标签通常描述的是一个意思，但是严格来讲HTML元素包含了HTML的开始标签和结束标签，而HTML文档就是由HTML元素组成的树状结构，HTML元素也就是HTML节点（每个HTML元素都是一个HTML节点），由于HTML就是用来描述网页的标记语言，并且HTML文档又是由HTML节点组成，所以HTML文档也称为web页面。

3）而我们要想操作这些HTML节点，就引出了DOM的概念，DOM就是HTML 和 XML的编程接口，通俗的讲就是我们要想使用编程语言或脚本操作文档，就必须用到这些接口，即操作HTML文档就需要HTML DOM，操作XML文档就需要XML DOM，另外还有核心DOM，它可以针对任何结构化文档的标准模型，所以有了HTML DOM，我们可以间接的操作HTML文档。

4）那么DOM是怎么来的呢，它和HTML元素的关系是什么呢？我们又是如何通过DOM来操作HTML文档的呢？

5）首先说下DOM是怎么来的，其实HTML文档加载到浏览器的时候，浏览器最终会载入HTML文档并解析HTML，构建DOM模型，也就是说浏览器会解析HTML元素为DOM元素，HTML DOM将HTML文档视作树结构，这种结构被称为节点树，通过HTML DOM，节点树中的所有节点均可以通过JavaScript进行访问，所有HTML元素（节点）均可以被修改，也可以创建或删除节点，由此可见DOM模型是浏览器根据HTML文档构建出来的。

6）对于浏览器引擎而言，并不存在"HTML标签"这回事，本质是DOM节点对象，也不存在"HTML文档这回事"，其本质是DOM节点对象组成的文档树。

7）在JavaScript中获取到的都是DOM元素，而不是HTML元素，JavaScript中的DOM对象，仅仅是一种操作浏览器引擎中的DOM对象接口，JavaScript中的DOM对象和浏览器引擎存储的DOM节点，本质上所指的不是一个东西，用户实际上仅仅有权操作JavaScript中提供的DOM对象。什么意思呢？就是说我们通过JavaScript操作的DOM对象并不是浏览器引擎存储的DOM节点也并不是HTML元素，而JavaScript中的DOM对象其实是JS引擎和浏览器引擎协作，确保了JavaScript的DOM对象是引擎中DOM节点的一个原样映射，这样用户就能通过操作JavaScript的DOM对象，透明的修改引擎中储存的DOM节点。

8）而浏览器引擎本质上，仅仅负责DOM树更新时承担重新渲染，实际上并不关心JS的存在，也就是说JS如何操作如何修改并不关心，但是JS修改之后，浏览器会将DOM树更新并负责重新渲染到浏览器的页面中。

9）小结：也就是说对于HTML文档、浏览器引擎、和JavaScript引擎他们各自有各自的作用，对于HTML文档来说，它本身是由HTML元素（HTML节点）组成的一个HTML节点树，它主要是负责描述页面，对于浏览器引擎来说它主要是负责加载解析HTML文档并构建DOM树，DOM树是由DOM节点组成，浏览器又和JavaScript相互协作，构建了浏览器引擎中DOM节点的一个原样映射供用户来进行操作，用户通过操作JavaSctipt的DOM对象，透明的修改引擎中的DOM节点，最后浏览器再更新DOM树并重新渲染完成修改。

10）HTML元素和DOM节点对象是一 一对应的关系，HTML属性和JavaScript的DOM对象属性，本质上都是影响DOM节点对象数据的众多理由之一，多个原因影响同一个DOM节点的实质数据，是多对一关系，请务必记住这个本质理由。

11）通过上面我们已经知道HTML DOM是怎么来的，还有HTML元素和HTML DOM节点以及JavaScript节点对象之间的关系，下面我们就来仔细说说HTML DOM节点对象是何方神圣，当浏览器载入HTML文档，它就会变成为Document对象，Document对象是HTML文档的根节点，Document对象使我们可以从脚本中对HTML页面中的所有元素进行访问（提示：Document是Window对象的一部分，可以通过window.document属性对其进行访问），还记不记得我们使用js获取元素时都是document.getElementById()等等，可见document对象非常的重要了。点击了解Document对象的属性和方法

12）在HTML DOM中，元素对象代表着一个HTML元素，元素对象的子节点可以是元素节点、文本节点、注释节点，NodeList对象代表了节点列表，类似于HTML元素的子节点集合，元素可以有属性，属性属于属性节点，在HTML DOM中Attr对象代表一个HTML属性，HTML属性总是属于THML元素，HTML元素中只有标准特性才会以属性的形式添加到DOM对象中，所以如果你在元素中加入了自定义属性，通过DOM节点对象获取是获取不到的。

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

14）上面只是说了它们之间的关系和我自己的理解，那些网上一找一堆的属性和方法我并没有放在文章中，希望可以帮助到你，如果有不足的地方后续还会补充，学习就是一个循序渐进的过程嘛！！

你要去做一个大人，不要回头，不要难过。

“如果你给我的，和你给别人的是一样的，那我就不要了。”