一个关于dom的小小思考(顺便安利一下MDN)

207 阅读2分钟

    在学习过程中碰见这样一个方法(原生JavaScript可使用的方法):

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

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

    developer.mozilla.org/zh-CN/docs/…

image-20210404210732384

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

image-20210404210814317

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对象

image-20210404212629073

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

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

image.png

image.png

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

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

---割---

image.png