js之DOM 文档对象模型

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model),简称 DOM。DOM 模型被结构化为对象树,又称DOM 树。

DOM 实际上是以面向对象方式描述的对象模型,它将文档建模为一个个对象,以树状的结构组织(本文称之为"文档树",树中的对象称为"节点")。

整个文档是一个文档节点

每个 HTML 标签是一个元素节点

包含在 HTML 元素中的文本是文本节点每一个 HTML 属性是一个属性节点

注释属于注释节点

通过可编程的对象模型,JavaScript 获得了足够的能力来动态操作 HTML。例如:

JavaScript 能添加、删除、改变、查看页面中所有的 HTML 元素、HTML 属性、CSS 样式。

JavaScript 能对页面中已有的 HTML 事件做出反应,或创建新的 HTML 事件。

获取 HTML 元素

综上所述,除了通过 ID 选择器和 querySelector 选择器获取到的元素是唯一的,其余的选择器返回的是伪数组的形式,可以通过 [下标] 的方式确定我们需要操作的元素。

// 获取 calss 名为 isCalss 的第一个元素

document.getElementsByClassName('isCalss')[0];

以上就是我关于dom的总结

相关推荐
AI3D_WebEngineer15 分钟前
企业级业务平台项目设计、架构、业务全解之组件库篇
前端·javascript·vue
charlie11451419140 分钟前
从零开始理解 CSS:让网页“活”起来的语言2
前端·css·笔记·学习·选择器·样式表·原生
浪裡遊1 小时前
Next.js路由系统
开发语言·前端·javascript·react.js·node.js·js
mapbar_front1 小时前
职场中的顶级能力—服务意识
前端
STUPID MAN1 小时前
Linux使用tomcat发布vue打包的dist或html
linux·vue.js·tomcat·html
尽兴-2 小时前
[特殊字符] 微前端部署实战:Nginx 配置 HTTPS 与 CORS 跨域解决方案(示例版)
前端·nginx·https·跨域·cors·chrom
JIngJaneIL2 小时前
助农惠农服务平台|助农服务系统|基于SprinBoot+vue的助农服务系统(源码+数据库+文档)
java·前端·数据库·vue.js·论文·毕设·助农惠农服务平台
云外天ノ☼2 小时前
待办事项全栈实现:Vue3 + Node.js (Koa) + MySQL深度整合,构建生产级任务管理系统的技术实践
前端·数据库·vue.js·mysql·vue3·koa·jwt认证
gihigo19982 小时前
使用JavaScript和Node.js构建简单的RESTful API
javascript·node.js·restful
一位搞嵌入式的 genius2 小时前
前端实战开发(三):Vue+Pinia中三大核心问题解决方案!!!
前端·javascript·vue.js·前端实战