DOM/BOM、setTimeout/setInterval、localStorage/sessionStorage、className/classList 有什么区别？

（一） DOM和 BOM

1. DOM：文档对象模型，主要呈现的是标签结构和标签之间的关系，里面最大的结构是document。

document下属HTML标签，

HTML标签又分为head标签和body标签，

head标签又可以分为title标签，meta标签，style标签等等；body标签也可以分为div标签，ul标签，li标签，a标签等等。

整体来看，就是一个标签文档树结构，所以DOM树也称为文档树。

注：网页的所有内容（结构）都在这里，其中每一个标签都可以看做是一个DOM对象，后续要调整页面，都要先获取其对应的DOM对象（标签结构），再对DOM对象进行操作。

2. BOM：浏览器对象模型，用于处理与浏览器窗口的交互。

它提供了一系列相关的对象，允许开发者执行如页面跳转、弹窗、获取设备信息、控制浏览器历史记录等操作，从而增强用户体验。

其中核心对象（顶级对象）是window对象。

window对象包含了navigator、location、document（即DOM）、history、screen等对象。其中，

1）navigator 对象：提供浏览器的相关信息，如浏览器名称、版本等。

2）location对象：用于获取或设置当前页面的URL。

3）document对象：提供整个页面的结构和内容，包含HTML和CSS。

4）history对象：用于记录浏览器的访问历史记录，实现网页的前进与后退功能。

使用场景：一般在实际开发中比较少用，但会在一些OA 办公系统中见到。

5）screen对象：提供与屏幕相关的信息，如屏幕大小、屏幕分辨率等。

注！！BOM包含DOM，DOM只是BOM的一部分。

（二）setTimeout 和 setInterval

两者都是定时器，使用语法也一样，但是

setTimeout：延时函数，只执行一次。

setInterval：间歇函数，多次反复执行（每隔一段时间执行一次），除非手动清除。

注！！setTimeout 和 setInterval定时器里面的回调函数，调用时不写小括号！！只写函数名就行。

注！！setTimeout 和 setInterval 都是异步函数。

除此外，常见的异步函数还有axios、DOM事件（例如监听事件addEventListener）。

（三）localStorage 和 sessionStorage

1. 释义

1）相同点

localStorage 和 sessionStorage 都是以键值对的形式存储JSON字符串，实现数据持久化。

存储大小都是约为5MB。

2）不同点

localStorage：生命周期是永久的，因为存储在本地电脑硬盘中，除非手动删除，否则关闭页面和浏览器窗口也会存在。

数据可以在同一域的所有页面中共享。

sessionStorage：生命周期是临时的，数据存储在内存中，当浏览器窗口或标签页关闭时，数据就会被清空。

数据仅在当前窗口或标签页中共享，不同窗口或标签页之间无法共享。‌

2. 语法

3. 使用示例（以localStorage为例，sessionStorage同理）

简单数据类型（字符串），直接存储就行：

复杂数据类型（对象 / 数组对象），需要先转化为JSON字符串，再存储：

复杂数据类型，从本地存储取出来用时，也要先把取出来的JSON字符串转化成对象，再使用：

注！！浏览器查看本地存储路径：Application——>Local Storage

拿取时，担心本地存储没有数据，可以采取逻辑中断原则，后面加一个空数组

const obj = JSON.parse（localStorage.getItem（'goods'））|| [ ]

（四）className 和 classList 

注！！不管是修改DOM元素的什么，都需要先获取该DOM元素，再进行操作！

1. 修改DOM元素的内容

元素.innerText ：只识别文本，不能解析标签

元素.innerHTML ：能识别文本，也能解析标签

2. 修改DOM元素的标签属性

对象.属性 = 值

3. 修改DOM元素的样式

1）修改某个类的某个属性：对象.style.样式属性 = 值

注：如果样式属性有 '—' 连接符，需要转换为小驼峰命名，如 background-color 要写成box.style.backgroundColor

2）修改某个类的所有属性：对象.className = 'css类名'

注：className 会覆盖以前的类名。

3）为某个元素增加类：元素.classList.add（'css类名'）

为某个元素删除类：元素.classList.remove（'css类名'）

为某个元素切换类：元素.classList.toggle（'css类名'）

注：classList 不影响以前的类名，只是在原来的基础上新增/删除。