DOM和BOM

从 JS 基础知识到 JS Web API:
1. JS基础知识,规定语法(ECMA 262 标准)
2. JS Web API, 网页操作的API(W3C标准)
3.前者是后者的基础,两者结合才能真正实际
JS Web API
DOM:操作网页上的DOM元素怒
BOM:操作浏览器上的一些事情,导航,宽高等
事件绑定:绑定时间,监听点击之类
ajax:发送网络请求
存储:浏览器暂存数据
vue和react框架应用广泛,封装了DOM操作
题目:
DOM是哪种数据结构
DOM操作的常用API
attr和property的区别
一次性插入多个DOM结点,考虑性能
DOM 本质:
从 HTML 说起,先从XML说起,XML 是一种可扩展的标记性语言,描述的是一棵树,可以自定义标签,类似于 JSON,区别在于JSON的表现形式与这个不太一样,XML 历史比 JSON 早,JSON 这种结构天生跟 JS 的数据结构相吻合,后来发展的很快。
HTML 也是一种特定的 XML,规定了一些特定的名称。因此 DOM 本质是一棵树,首先 HTML本身是一个树形的结构,HTML 是文件或者是代码,DOM 是浏览器内存中初始化好的树。DOM 本质是从 HTML 语言中浏览器解析出来的一棵树
DOM 节点的操作:
DOM 结构操作:
DOM 性能:

attr和property的区别:

property 和 attribute
property:修改JS对象属性,不会体现到HTML结构中
attribute:修改HTML属性,会改变HTML 结构(标签结构)
两者都有可能引起DOM重新渲染

建议:尽量用 property 操作,因为property可能会在JS机制中,避免一些不必要的DOM渲染;但是attribute是修改HTML结构,一定会引起DOM结构的重新渲染,而DOM重新渲染是比较耗费性能的

DOM的性能优化:

DOM查询做缓存 将频繁操作改

 

BOM 浏览器对象模型:

1. 如何识别浏览器类型

面试题:描述事件冒泡的流程
基于DOM树形结构,时间会是顺着触发元素往上冒泡。
应用场景:事件代理

 

 

 

 

 

### DOM BOM 的定义 #### 文档对象模型 (DOM) 文档对象模型(Document Object Model,简称 DOM),是一种处理可扩展标记语言的标准编程接口[^3]。通过这种模型,程序脚本可以动态访问更新文档的内容、结构以及样式。DOM 将整个 HTML 或 XML 页面视为由节点组成的树形结构,其中每个节点代表页面上的一个组件。 - **标准制定者**:W3C 组织 - **适用范围**:专注于网页内容的操作与管理 ```javascript // 获取并修改HTML元素的例子 let element = document.getElementById('example'); element.innerHTML = 'This is modified content.'; ``` #### 浏览器对象模型 (BOM) 浏览器对象模型(Browser Object Model,简称 BOM),提供了独立于内容的、可以直接与浏览器窗口进行交互的对象集合[^1]。这些对象允许 JavaScript 脚本执行诸如打开新窗口、移动现有窗口、设置定时器等功能。尽管没有官方标准来规定 BOM 应该是什么样的,但是由于历史原因,现代 Web 浏览器都遵循着类似的实现方式。 - **顶级对象**:`window` - **主要功能**:控制浏览器行为及获取环境信息 - **特性说明**:各浏览器厂商自定义的部分较多,因此存在一定的不一致性 - **包含关系**:不仅涵盖了 DOM 功能,还包括其他用于管理操控浏览器特性的 API 接口 ```javascript // 使用location对象重定向到另一个URL window.location.href = "https://www.example.com"; ``` ### DOMBOM 的区别 两者虽然同属 JavaScript 编程环境中不可或缺的一部分,但在作用域上有明显差异: - **侧重点不同** - `DOM` 关注的是如何解析操纵 HTML/XML 文档内的具体内容; - `BOM` 则更多涉及到了浏览器本身的配置参数调整以及跨站点通信等方面的工作。 - **隶属关系** - 实际上,在很多情况下,`document` 同时作为 `DOM` 中的核心入口点也隶属于 `BOM` 下面的一个重要成员——即 `window.document` 形式的引用表明了这一点[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值