一个关于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略微奇怪,然后进行了很多猜想,今天问了一些有经验的巨巨,把这里补上了,除了有点啰嗦应该没太大问题,我还没有深入了解浏览器内部实现的打算,所以不在深究了
最后再放一张红宝书中的图
---割---
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 使用C#创建一个MCP客户端
· ollama系列1:轻松3步本地部署deepseek,普通电脑可用
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 按钮权限的设计及实现