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的总结

相关推荐
前端Hardy14 分钟前
实测!Three.js 实现动态粒子螺旋与星环环绕动画
前端·javascript
俊劫16 分钟前
响应式图片实战指南:深入理解与应用 img srcSet
前端·css·vue.js
vvilkim34 分钟前
Flutter开发入门:Dart语言基础全面解析
android·前端·flutter
Allen Bright35 分钟前
【CSS-4】掌握CSS文字样式:从基础到高级技巧
前端·css
lens9440 分钟前
Oxlint v1.0.0 发布:ESLint 的性能革命,快 50~100 倍!
前端·javascript
这里是阿栗42 分钟前
TS进阶!深入探索 TypeScript 工具类型:内置神器与高阶扩展
前端·typescript
DarkLONGLOVE44 分钟前
一键锁死网页内容!这个JS函数让你的原创无法被复制!
前端·javascript
DarkLONGLOVE44 分钟前
彻底解决"'vue-cli-service' 不是内部或外部命令"的问题!
前端·vue.js
curdcv_po1 小时前
甲方嫌弃,项目首页加载太慢
前端
刘同学有点忙1 小时前
技术升级中的"幽灵Bug"排查:从message失效看架构迁移的隐性成本
前端