什么是DOM？

DOM是一个标准（或者说API），允许程序和脚本访问、操作页面的内容、结构和样式，为文档提供了一种结构化的表示方式，以改变文档呈现方式（即用来改变文档呈现方式）。

DOM标准包括3个不同的部分：

核心DOM（Core DOM）：所有文档类型的标准模型
XML DOM：XML文档的标准模型
HTML DOM：HTML文档的标准模型

HTM DOM

HTML DOM 可以获取、添加、删除和修改HTML元素。它定义了HTML元素和属性，并可以访问它们。将HTML 文档呈现为树结构。

如何从HTML文档构建网页？

浏览器将文档转换为可视化页面的过程称为“渲染”，这大致分为俩阶段。

浏览器解析文档，将HTML文档每个元素映射为一个存在层级关系的节点，皆喜玩城后，生成一个由不同节点组成的树结构，即DOM树。document对象就用来描述

DOM树的状态和属性，同时也提供操作DOM的API。如下：

HTML DOM定义了：

HTML元素均为节点对象
HTML元素的属性
操作HTML元素的方法
HTML元素的事件

通过HTML DOM，JavaScript可以动态地对HTML进行如下操作：

添加、修改和移除页面中HTML元素和属性
修改页面中的CSS样式
实现事件交互
增加新的事件

DOM树不一定是源html文档

1.html无效

<!doctype html>
<html>
Hello, world!
</html>

这段没有<head>和<body>，但是生成的DOM树依然有，所以不一定是源html文档。

2.通过JS改变HTML元素

var newParagraph = document.createElement("p");
var paragraphContent = document.createTextNode("I'm new!");
newParagraph.appendChild(paragraphContent);
document.body.appendChild(newParagraph);

通过JS新增了元素，会更新DOM树内的节点。但是源html文当内没有，所以不一定是源html文档。

DOM不是浏览器内看到的可视化页面

页面内看到的是渲染树，它是DOM和CSSOM结合，因为渲染树只关注了渲染出的东西，剔除了隐藏的内容，但是DOM不同，DOM树内依然还有隐藏的节点内容，如下：

<!doctype html>
<html lang="en">
  <head></head>
  <body>
    <h1>Hello, world!</h1>
    <p style="display: none;">How are you?</p>
  </body>
</html>

DOM不是DevTools的内容

F12弹出的DevTool检查器最接近DOM，但是DevTool检查器包含了DOM不包含的一些东西。比如伪元素，像：：after和：：before这些都是由CSSM渲染的，因为DOM仅仅有HTML文档构建，不包含样式。

总结

DOM是文档的API，并允许访问元素和修改元素的方法。如HTML DOM，提供了document，利用JS可以实现对元素的操作。

虽然与HTML文档相似，但不完全相同

1.DOM是有效的HTML

2.可以通过JS修改

3.不包含伪元素

4.确实包含隐藏元素

DOM理解