一个关于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

image-20210404210732384

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

image-20210404210814317

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

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

posted @   dou_fu_gan  阅读(63)  评论(1编辑  收藏  举报
编辑推荐:
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 使用C#创建一个MCP客户端
· ollama系列1:轻松3步本地部署deepseek,普通电脑可用
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示