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

相关推荐
开心工作室_kaic13 分钟前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿32 分钟前
webWorker基本用法
前端·javascript·vue.js
cy玩具1 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
清灵xmf1 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据1 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161772 小时前
防抖函数--应用场景及示例
前端·javascript
334554322 小时前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test2 小时前
js下载excel示例demo
前端·javascript·excel
Yaml42 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事2 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro