一个关于DOM的小小思考

在学习过程中碰见这样一个方法（原生JavaScript可使用的方法）：

document.querySelector('div').innerHTML=`
  <h2>编号：${resp.id} </h2>
  <h2>标题：${resp.title}</h2>
`					`

这个方法提醒了我，我想知道document自带的所有方法，于是我查看了MDN：

https://developer.mozilla.org/zh-CN/docs/Web/API/Document

然后抱着了解一下web api的心，点开了web api接口参考

https://developer.mozilla.org/zh-CN/docs/Web/API

首先我们看这个网页的结构

• 标题：web api 接口参考
• 规范
• 接口

结果我发现，dom被列在规范中，而document被列在接口中

为什么这个网站把dom归为规范呢？我们都知道dom是文档对象模型，文档对象模型到底是什么？为什么document被称之为接口？

dom全称为document obj model，维基百科定义：“dom是W3C组织推荐的处理可扩展置标语言的标准编程接口。”

我们知道浏览器得到页面数据之后，首先要根据HTML创建dom树，然后根据css得到带style的dom树，通过渲染树计算布局，最后渲染

创建dom树的过程，我们还可以称之为 “把html文档处理成树状的对象模型” 这里我们咬文嚼字一番，品一品：

什么是飞机模型，什么是对象模型？飞机模型是对飞机进行简化得到的实体，对象模型在这里是指的就是html简化后得到的实体，而这个实体就是树状对象，这个对象是C++对象，并非js对象

DOM是C++对象，DOM对象是js对象

DOM是C++的概念，但是DOM对象是js的概念，DOM对象是一种特殊的js对象，js引擎给开发者提供了api，可以操作通过js中的DOM对象，来修改底层的DOM

这是MDN对dom介绍中的一个部分，也就是说dom并不需要我们来访问（是给浏览器内部的内容用的），像getelementbyid等方法，直接获取的就是dom对象

jQuery对象是对dom对象的封装（对一个js对象的封装），jQuery的选择器是css选择器，css选择器返回的是dom对象，前面的$符，代表工厂方法，把dom对象转化成jQuery对象

//这里我愿意把a当作dom对象的引用，你可以试着console.log(a)一下
var a=document.getElementById("wocao");

之前的博客只是感觉，dom略微奇怪，然后进行了很多猜想，今天问了一些有经验的巨巨，把这里补上了，除了有点啰嗦应该没太大问题，我还没有深入了解浏览器内部实现的打算，所以不在深究了

最后再放一张红宝书中的图

---割---