什么是前端的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

相关文章
|
3天前
|
前端开发 JavaScript 算法
深入理解前端框架:解析 React 的虚拟 DOM
虚拟 DOM 是 React 前端框架的核心概念之一。本文将深入探讨虚拟 DOM 的原理和应用,帮助读者更好地理解 React 框架的工作机制,并学习如何高效地使用虚拟 DOM 进行前端开发。
41 1
|
3天前
|
JavaScript 前端开发 UED
【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
【5月更文挑战第2天】【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
|
3天前
|
前端开发 JavaScript 数据安全/隐私保护
前端javascript的DOM对象操作技巧,全场景解析(二)
前端javascript的DOM对象操作技巧,全场景解析(二)
|
3天前
|
移动开发 缓存 JavaScript
前端javascript的DOM对象操作技巧,全场景解析(一)
前端javascript的DOM对象操作技巧,全场景解析(一)
|
3天前
|
JavaScript 前端开发 开发者
【Web 前端】如何操作DOM元素?
【4月更文挑战第22天】【Web 前端】如何操作DOM元素?
|
3天前
|
JavaScript 前端开发 索引
【Web 前端】JQ对象和DOM元素之间如何转换?
【4月更文挑战第22天】【Web 前端】JQ对象和DOM元素之间如何转换?
|
3天前
|
JavaScript 算法 前端开发
【专栏】前端开发中的slot算法和shadow DOM,两者提供更灵活、高效和模块化的开发方式
【4月更文挑战第29天】本文探讨了前端开发中的slot算法和shadow DOM,两者提供更灵活、高效和模块化的开发方式。slot算法允许在组件中定义插槽位置,实现内容的灵活插入和复用,提高代码可读性和维护性。shadow DOM则通过封装DOM子树,实现样式和事件的隔离,增强组件独立性和安全性。这两种技术常应用于组件开发、页面布局和主题定制,但也面临兼容性、学习曲线和性能优化等挑战。理解并掌握它们能提升开发效率和用户体验。
|
3天前
|
JavaScript 前端开发 算法
深入探讨前端框架Vue.js中的虚拟DOM机制
本文将深入探讨前端框架Vue.js中的虚拟DOM机制,分析其原理、优势以及在实际开发中的应用场景,帮助读者更好地理解Vue.js框架的核心特性。
|
3天前
|
XML 存储 JavaScript
【前端】对前端小白极为友好的JS DOM入门文章
【前端】对前端小白极为友好的JS DOM入门文章
|
3天前
|
JavaScript 前端开发 算法
JavaScript 前端框架相关:谈谈你对虚拟DOM的理解。
JavaScript 前端框架相关:谈谈你对虚拟DOM的理解。
57 0