什么是前端的dom,咱也来定一个“POM”

简介: 什么是前端的dom,咱也来定一个“POM”

dom也叫dom对象,是浏览器对HTML文本解析后得到的,留在浏览器内存中的一个JS对象,俗称“文档对象模型”,其实dom元素就是一个浏览器生成的JavaScript对象啦。



我看过网上很多对dom的解释,但是我个人感觉很多都不太准确。在我看来,没那么复杂,dom就是一个浏览器根据网页源代码生成的一个JavaScript对象。



一个网页,对浏览器而言就是一个大的dom,网页中各个HTML节点,也被称为一个个小dom。



既然是对象,自然有很多方法,这是必然的。我们通过dom的对应api去操作网页上的HTML元素,这个过程就成为dom操作。



从本质来看,dom是一个实实在在的东西,是一个浏览器生成的对象。



可是,网上也有将dom解释为接口:



文档对象模型(Document Object Model,简称 DOM),是 W3C 组织推荐的处理可扩展标记语言的标准编程接口。



什么是接口?



就是我对于某个事物提供了一系列的增删改查方法,这些方法,就是接口。



比如,你给我一个土豆🥔,我定义了切丝,油炸,削皮,爆炒四个操作。那么,我也可以说,我TM定义了一个土豆操作模型(potato object model ,简称POM),是我个人推荐的,处理土豆的标准编程接口。



这么讲可能还是有点抽象。


b2098ce90c3e4858bd5ddbfe025d175a.jpg


想象一下,我们处于一个游戏世界,你得到一本技能书,上面写着potato。你执行这个命令,就得到了一个土豆。



let p = potato.create()



然后你调用油炸方法



p.fryAndGet()



你就得到了一个炸过的土豆。



potato是技能书自带的关键字,p是一个POM对象。



看吧,没什么大不了的。



综上,面试的时候咋说呢?



从定义上看,



dom 是操作HTML的标准编程接口。



从使用上看,



dom 是浏览器解析HTML后得到的JS对象,包含了一系列操作它的一系列api方法。



背下来就行了,没必要太过纠结字面含义。


e908cbbfa3da44fb91b35b0f028e6ddb.jpg

相关文章
|
2月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
72 5
|
3月前
|
JavaScript 前端开发 编译器
吐血整理:纯前端如何实现批量dom转图片,并下载成压缩包
【10月更文挑战第2天】吐血整理:纯前端如何实现批量dom转图片,并下载成压缩包
76 2
|
4月前
|
前端开发 JavaScript
前端基础(七)_DOM元素获取(getElementById、getElementsByTagName、getElementsByClassName、querySelector等)
本文介绍了如何在前端通过不同的方法获取DOM元素,包括getElementById、getElementsByTagName、getElementsByClassName、querySelector和querySelectorAll。
216 3
|
4月前
|
XML 缓存 JavaScript
提升对前端的认知,不得不了解Web API的DOM和BOM
该文章强调了在前端开发中理解和掌握DOM(文档对象模型)和BOM(浏览器对象模型)的重要性,并介绍了它们的相关操作和应用。
提升对前端的认知,不得不了解Web API的DOM和BOM
|
4月前
|
JavaScript 前端开发
前端基础(十)_Dom自定义属性(带案例)
本文介绍了DOM自定义属性的概念和使用方法,并通过案例展示了如何使用自定义属性来控制多个列表项点击变色的独立状态。
64 0
前端基础(十)_Dom自定义属性(带案例)
|
3月前
|
JavaScript 前端开发 UED
【前端基础篇】JavaScript之DOM介绍2
【前端基础篇】JavaScript之DOM介绍
37 0
|
3月前
|
JavaScript 前端开发 搜索推荐
【前端基础篇】JavaScript之DOM介绍1
【前端基础篇】JavaScript之DOM介绍
51 0
|
4月前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
4月前
|
移动开发 前端开发 JavaScript
使用html-to-image代替html2canvas,结合jspdf实现下载pdf(下载截图下载前端dom元素)
本文介绍了在前端项目中,当使用`html2canvas`遇到问题时,如何使用`html-to-image`库作为替代方案,结合`jspdf`实现将DOM元素生成为PDF文件并提供下载。文章首先讨论了`html2canvas`可能遇到的问题,并提供了该库的使用示例代码。随后,详细介绍了`html-to-image`库的安装和使用方法,展示了如何将DOM元素转换为Canvas,再利用`jspdf`生成PDF文件。最后,文章通过示例代码说明了整个转换和下载的过程,并展示了效果截图。
254 0
|
5月前
|
JSON JavaScript 前端开发
JS的无限可能: 前端 精妙DOM技巧至Node.js的服务端
JS的无限可能: 前端 精妙DOM技巧至Node.js的服务端

热门文章

最新文章