在学习过程中碰见这样一个方法(原生JavaScript可使用的方法):
document.querySelector('div').innerHTML=`
<h2>编号:${resp.id} </h2>
<h2>标题:${resp.title}</h2>
` `
这个方法提醒了我,我想知道document自带的所有方法,于是我查看了MDN:
developer.mozilla.org/zh-CN/docs/…
然后抱着了解一下web api的心,点开了web api接口参考
developer.mozilla.org/zh-CN/docs/…
首先我们看这个网页的结构
- 标题: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略微奇怪,然后进行了很多猜想,今天问了一些有经验的巨巨,把这里补上了,除了有点啰嗦应该没太大问题,我还没有深入了解浏览器内部实现的打算,所以不在深究了
最后再放一张红宝书中的图
---割---