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

相关推荐
sunny_28 分钟前
💥 Claude Code 源码泄露?我把这个最强 AI Coding Agent 的架构扒干净了
前端·agent·claude
西洼工作室32 分钟前
React轮播图优化:通过延迟 + 动画的组合,彻底消除视觉上的闪烁感
前端·react.js·前端框架
yaaakaaang42 分钟前
(八)前端,如此简单!---五组结构
前端·javascript
我是若尘1 小时前
我的需求代码被主干 revert 了,接下来我该怎么操作?
前端·后端·代码规范
魁首1 小时前
Claude Code 源码泄露的背后,到底与Codex,Gemini 有啥不一样?
前端·openai·claude
攀登的牵牛花1 小时前
程序员失业论,被 SWE-CI 一组数据打醒:真正先被替代的是低质量交付
前端·github
EstherNi2 小时前
vue3仿照elementui样式的写法,并进行校验,并且有默认值的设置
javascript·elementui
BumBle2 小时前
Vue项目中实现路由守卫自动取消Pending请求
前端
gCode Teacher 格码致知2 小时前
Javascript提高:get和post等请求,对于汉字和空格信息进行编码的原则-由Deepseek产生
开发语言·前端·javascript·node.js·jquery
竹林8182 小时前
从ethers.js迁移到Viem:我在一个DeFi项目前端重构中踩过的坑
前端·javascript