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

相关推荐
John_ToDebug1 天前
引擎深处的漫游者:构建浏览器JavaScript引擎的哲学与技艺
javascript·chrome·js
37方寸1 天前
前端基础知识(Node.js)
前端·node.js
程序猿阿伟1 天前
《TypeScript中Protobuf到运行时类型安全的转换指南》
javascript·安全·typescript
powerfulhell1 天前
寒假python作业5
java·前端·python
木子啊1 天前
前端组件化:模板继承拯救发际线
前端
三十_A1 天前
零基础通过 Vue 3 实现前端视频录制 —— 从原理到实战
前端·vue.js·音视频
前端小菜袅1 天前
PC端原样显示移动端页面方案
开发语言·前端·javascript·postcss·px-to-viewport·移动端适配pc端
Highcharts.js1 天前
如何使用Highcharts SVG渲染器?
开发语言·javascript·python·svg·highcharts·渲染器
We་ct1 天前
LeetCode 228. 汇总区间:解题思路+代码详解
前端·算法·leetcode·typescript
爱问问题的小李1 天前
ue 动态 Key 导致组件无限重置与 API 重复提交
前端·javascript·vue.js