JavaScript的BOM模型与DOM模型

最新推荐文章于 2025-07-29 20:32:51 发布
最新推荐文章于 2025-07-29 20:32:51 发布
阅读量210 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： Web前端 文章标签： 经验分享 前端 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/it66682/article/details/124982843

Screen：显示器屏幕对象

Location：地址栏对象

History：历史记录对象**

[](()DOM模型

===============================================================

DOM模型就是文档对象模型（Document Object Model）： 定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。

包括：

**Document：文档对象

Element：元素对象

Attribute：属性对象

Comment:注释对象

Text：文本对象

Node：节点对象，上面5个的父对象**

BOM模型与DOM模型示意图：

在这里插入图片描述

从浏览器窗口中了解BOM与DOM：

![在这里插入图片描述](https://img-blog.csdnimg.cn/20201117130542370.png? 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4MzkxNw==,size_16,color_FFFFFF,t_70#pic_center)

**读完如果对你有帮助，感谢点赞支持！

如果你是电脑端，看见右下角的“一键三连”了吗，没错点它[哈哈]**

BOM和DOM模型以及操作
weixin_45019986的博客
09-27 633
BOM和DOM模型以及操作BOM模型window对象1.概念3.定时和间隔执行方法2.定时器和间隔器DOM模型1.概念2.Document对象中的方法1.直接获取元素的对象2.简介获取元素的对象1.父子关系2.子父关系3.兄弟关系3.案例操作元素的属性1.获取属性值2.修改属性值4.操作元素内容1.获取元素的内容2.修改元素内容5.案例6.操作元素的样式1.通过style属性2.通过className7.案例8.操作文档结构1.innerHTML操作文档内容2.父节点操作 BOM模型window对象 1.概
js中的BOM,DOM知识点
qq_43412333的博客
10-08 396
js的组成: ECMAScript 解释器、翻译 兼容性：完全兼容 BOM 浏览器对象 兼容性：不兼容(例如IE，谷歌，火狐，不可能兼容) DOM 文档对象 兼容性：部分不兼容 BOM(Browser Object Model) 浏览器对象模型 BOM是js的核心 window,window对象就是浏览器内置的一个对象，...
软件测试开发转型经验分享与职业发展指南
weixin_41080437的博客
07-28 1000
本文作者基于11年测试行业经验，系统阐述了传统测试向测试开发转型的必要性、路径和方法。文章指出，测试开发岗位需求增长迅猛，转型可突破职业天花板，实现从"执行者"到"质量赋能者"的跨越。 核心内容分为五部分： 转型价值：行业技术化趋势、职业发展空间和个人成长维度 能力模型：技术(编程/框架/工程化)、业务理解和软技能的三角支撑 学习路径：分入门、进阶和资深三阶段递进学习 实战避坑：问题驱动学习、争取实践机会和构建知识体系 未来挑战：应对AI测试、云原生和团队质量共建趋势
js面试题 高频(12-22题)
m0_63472757的博客
07-29 593
1.代码服用与抽象: 高阶函数可以将重复的逻辑抽象出来,形成通用函数,提高代码的复用性,柯李华可以将复杂的函数调用转化为一系列简单的步骤,便于部分应用和服用2.函数组合: 高阶函数和柯里化是构建函数式编程风格的关键,它们使的函数的组合变得更容易,从而构建更复杂的功能3.延迟执行与配置化: 柯里化可以将函数执行延迟到所有参数都传入后进行,同时允许在传入部分参数时进行配置,生成定制化的新函数。
vue3卡片垂直无限滚动
qq_63605379的博客
07-28 194
主要是利用css动画向上滚动，js动态计算dom上有多少条数据实时更新滚动速度。js 要在onMounted里调用确保dom已经被渲染。
基于Vue3.0+Express的前后端分离的任务清单管理系统
WwLK123的博客
07-28 180
该项目是一个待办事项管理系统，主要功能包括任务统计展示、待办事项管理、分类管理和成员管理。前端界面展示了首页任务量统计面板（总任务数、已完成/未完成数）、任务清单、分类管理和成员管理页面。系统采用Vue3+Element Plus开发，通过axios与后端API交互，实现数据动态加载和操作反馈。核心功能包含任务添加（支持项目编号、标题、分类选择、时间设置和成员分配）、分类维护和成员管理等功能，并配有表单验证和操作提示机制。
24. 了解过 webp 吗
weixin_64684095的博客
07-28 878
一种图片格式WebP（发音为 “weppy”）是由 Google 推出的一种现代图片格式，支持有损压缩和无损压缩，旨在提供更小的文件体积和更高质量的图像显示。透明通道（Alpha 通道）动画支持（类似 GIF）有损压缩（类似 JPEG）无损压缩（类似 PNG）特性说明格式类型有损/无损压缩、支持透明、动画优势更小体积、更高质量、更好压缩率使用方式<img><picture>、CSS、构建工具推荐场景图片优化、移动端、SEO 提升注意事项。
CTF-Web学习笔记：SQL注入篇
Deng7326的博客
07-28 889
本文系统梳理了CTF竞赛中SQL注入的核心原理与实战技巧。首先介绍了SQL注入的基础概念和成因，即用户输入数据被直接拼接到SQL语句中执行。其次分类解析了CTF常见的注入类型，包括数字/字符串型注入、报错/盲注/联合查询等攻击方式。文章重点分享了实战经验：如何判断注入点、确定数据库类型、使用工具辅助及绕过WAF防御。最后通过一道报错注入题目，详细演示了从数据库名获取到最终拿Flag的完整解题流程，并推荐了SQLiLabs等练习平台。
Nuxt 4：前端开发的全新篇章
weixin_43073383的博客
07-26 1034
Nuxt 4正式发布，带来了一系列性能优化和开发体验提升。新版框架内置Nitro 3.0服务器引擎，显著缩短冷启动时间并减小打包体积，同时增强跨平台兼容性。深度集成Vue 3.5和Vite 5.x，提供更快的渲染性能和开发速度。改进的DevTools提供直观的调试界面和性能分析工具。统一的打包策略简化了构建流程，而增强的模块化支持使生态系统更具扩展性。Nuxt 4延续了零配置启动、自动导入等优势，并优化了SSR/SSG能力，是构建高性能Web应用的理想选择。教程部分详细介绍了从环境准备到项目初始化的完整流程
开源AI智能体-JoyAgent集成ollama私有化模型
JackieJia的博客
07-28 299
我们在实际业务中需要搭建一套基于自身业务相关的智能体，可以帮忙业务人员快速的决策和执行，如下是基于目前开源的通用智能体JoyAgent本地化部署和集成Ollama私有模型做一一介绍。
OpenLayers 综合案例-量测工具
yy的博客
07-28 385
本文介绍了基于Vue 3和OpenLayers开发的WebGIS量测工具，主要功能包括距离、面积、角度测量和单位转换。该工具采用现代技术栈（Vue 3.5.13+、OpenLayers 10.5.0+、Vite 6.3.5+），具有交互式界面，可实时显示测量结果和单位转换。开发者通过开源社区分享经验，提供每周更新的案例教程，帮助用户快速掌握OpenLayers开发技巧。文章包含完整的代码模板和技术实现细节，适用于WebGIS开发人员参考使用。
利用Trae将原型图转换为可执行的html文件，感受AI编程的魅力
胡萝卜先生的进阶之路
07-25 287
本文展示了两种许可证容量趋势图的开发过程及效果对比：1) Tare对话生成效果（5分钟）；2) 手动制作效果（30分钟）
【Java Web实战】从零到一打造企业级网上购书网站系统 | 完整开发实录（三）
笙囧同学的博客
07-28 538
本文介绍了用户管理系统和图书管理系统的核心功能设计。用户管理系统包含完整的用户生命周期管理，采用企业级多层次安全认证机制，包括前端验证、传输安全、服务端验证、存储安全和会话管理五层架构。系统实现密码强度检查、BCrypt哈希加密、随机盐值生成等安全策略，并采用RBAC权限控制模型管理用户角色和权限。图书管理系统设计注重功能丰富性和扩展性，包含详细的图书数据模型，涵盖图书基本信息、库存、销售、评价等属性，以及与分类、标签的关联关系。两个系统均通过流程图、状态图和类图展示了关键业务流程和数据结构设计。
【前端】Vue 3 课程选择组件开发实战：从设计到实现
质量是一次就把事情做对
07-26 828
本文介绍了一个基于Vue 3和Element Plus开发的课程选择组件。该组件采用卡片式布局展示课程信息，支持点击交互和键盘操作，具有良好的可访问性。核心功能包括动态样式计算、颜色处理工具函数实现主题色变换，以及响应式设计适配不同设备。组件通过CSS变量实现动态主题色，并添加了悬停和选中状态的交互效果。文章详细讲解了数据结构设计、样式计算逻辑、交互事件处理以及响应式布局的实现方法，展示了如何结合Vue 3的响应式特性和Element Plus的UI组件创建美观实用的课程选择界面。
一个人开发一个App(数据库)
Care iOS技术团队
07-29 130
后端我拆了两个独立进程，api + im. api负责接口， im负责聊天。我用MySQLWorkbench来设计表，go直接用gorm, 虽然可以完全用代码维护表结构，但是我还完全没有开始写代码，所以表结构先行。目前规划的功能有用户系统，主题系统，交互系统，任务系统，文件系统，iap内购，im。flutter端这次我选择的是ObjectBox，以前都是直接用的sqlite3，看对比ObjectBox效率比sqlite3高许多，这次前端为了用户体验，我需要缓存数据，断网也能用。下面是我设计的im表。
JMeter压测场景 jp@gc - stepping thread group 步长插件的使用
yuxuan6699的博客
07-25 322
本文介绍使用JMeter的Stepping Thread Group插件进行下单接口压力测试的案例。测试目标为200并发下响应时间1秒内、成功率100%。主要步骤包括：安装插件、配置线程组（从100并发起每60秒加压50并发直至200，维持5分钟后逐步释放）、添加HTTP请求和监听器。测试结果显示平均响应时间2.001秒，未达目标，但错误率为0。所需工具包括JMeter 5.6及相关插件JAR包。该案例演示了基础压力测试流程，重点关注并发控制策略和结果分析方法。
前端学习日记（十五）
2303_78962162的博客
07-29 166
【代码】前端学习日记（十五）
WebRTC（十四）：WebRTC源码编译与管理
最新发布
www_dong的博客
07-29 404
参数名说明示例值is_debug是否为 Debug 构建truefalse是否编译测试代码false（生产时建议关闭）启用 H264 支持true（需额外引入 openh264/ffmpeg）启用 protobuf 支持（部分 API 需要）true是否使用组件构建（生成多个动态库）false（一般推荐falseuse_rtti启用 RTTI（运行时类型识别）true（如你需要 C++ RTTI）使用自定义 libc++（通常用于 macOS/iOS）falsetarget_cpu架构目标。
Export useForm doesn‘t exist in target module
小妖666个人笔记
07-29 77
Export useForm doesn't exist in target module
"深入了解JavaScript的BOM与DOM
Javascript是一种广泛应用于web开发的脚本语言，它的实现包括三个部分：ECMAScript、文档对象模型（DOM）和浏览器对象模型（BOM）。ECMAScript是Javascript的核心，它描述了JS的语法和基本对象。DOM处理网页内容的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值