(一) 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 不影响以前的类名,只是在原来的基础上新增/删除。