JS-WebAPIs 学习笔记

Web APIs 学习笔记

一、变量声明

1. var / let / const 对比

关键字	特点	是否推荐
var	作用域混乱、变量提升、可重复声明	❌ 不推荐
let	块级作用域、可修改	✅
const	块级作用域、不可重新赋值	⭐⭐⭐ 推荐

2. 使用原则（非常重要）

优先使用 const，需要修改时再改成 let

js 复制代码

const name = 'Tom'
// name = 'Jack' ❌ 报错

const arr = [1, 2, 3]
arr.push(4) // ✅ 不报错

原因说明

对象 / 数组存的是地址
只要地址不变，就允许修改内容

3. 总结

数组 / 对象：优先 const
基本类型需要改变值：用 let
for 循环计数器：用 let

二、Web API 基本认知

1. Web API 是什么？

JS 操作网页和浏览器的能力

2. Web API 分类

复制代码

Web APIs
├── DOM（文档对象模型）
└── BOM（浏览器对象模型）

3. DOM 的作用

操作网页内容
实现交互效果(重点)
开发页面特效

三、DOM 树 & DOM 对象

1. DOM 树

HTML 文档的 树状结构表示
描述标签之间的层级关系

html
└─ body
├─ div
└─ p

2. DOM 对象（核心）

浏览器根据 HTML 标签生成的 JS 对象
标签的 所有属性都能通过对象访问
修改对象 = 修改页面

js 复制代码

document.title = '新标题'

核心思想

把网页内容，当作对象来操作

四、获取 DOM 元素

1. querySelector（获取单个）

js 复制代码

document.querySelector('.box')

返回：HTMLElement
未找到：null
可以直接操作

2. querySelectorAll（获取多个）

js 复制代码

document.querySelectorAll('li')

返回：NodeList（伪数组）
不能直接修改(有长度有索引号，但是没有pop(),push()等数组方法)
需要遍历才能获得里面的每一个对象

js 复制代码

list.forEach(item => {
  item.style.color = 'red'
})

3. 二者对比总结

方法	返回值	是否可直接操作
querySelector	单个元素	可以
querySelectorAll	伪数组	(需遍历）

五、操作元素内容

1. innerText

js 复制代码

box.innerText = '<b>你好</b>'

只显示文本
不解析 HTML 标签

2. innerHTML

js 复制代码

box.innerHTML = '<b>你好</b>'

解析 HTML
支持模板字符串

3. 对比总结

属性	是否解析标签
innerText	❌
innerHTML	✅

4. innerHTML 安全提醒

⚠ 不要直接插入用户输入内容: innerHTML 会解析并执行 HTML，如果内容来自用户或接口，可能被注入 script 或事件，从而产生 XSS(把恶意JS当成内容注入到页面里执行)。实际开发中优先使用 innerText / textContent，必要时配合 DOMPurify 做白名单过滤

六、操作元素属性

1. 常用属性操作

js 复制代码

img.src = '1.jpg'
a.href = 'https://example.com'

七、操作元素样式

1. style 方式（少量样式）

js 复制代码

box.style.backgroundColor = 'red'
box.style.paddingLeft = '20px' //padding-left

注意：

使用 小驼峰命名
数值记得加单位

2. className（会覆盖）

js 复制代码

box.className = 'active'

注意:会覆盖以前的类名

3. classList（强烈推荐）

js 复制代码

box.classList.add('active')
box.classList.remove('active')
box.classList.toggle('active')

方法	作用
add	在原有的基础上追加一个类
remove	删除类
toggle	切换(没有就添加,有就删除)

八、表单元素属性

1. 普通属性

js 复制代码

input.value = '123'  //用于获取用户输入/表单控件当前的输入值
bnt.innerHTML = `我已经阅读该协议`   //获取或设置元素内部的HTML内容(包含标签结构+文本)

2. 布尔属性

js 复制代码

btn.disabled = true
checkbox.checked = false

true → 添加
false → 移除

九、自定义属性（HTML5）

1. HTML

html 复制代码

<div data-id="10"></div>

2. JS 获取

js 复制代码

div.dataset.id // '10'

统一规则：

HTML：data-xxx
JS：dataset.xxx

十、定时器（setInterval）

1. 开启定时器

js 复制代码

const timer = setInterval(fn, 1000)

返回：定时器 id

2. 关闭定时器

js 复制代码

clearInterval(timer)

3. 劣势和推荐使用

劣势 :存在堆积问题：

js 复制代码

setInterval(() => {
  console.log('start');
  const start = Date.now();
  while (Date.now() - start < 2000) {} // 阻塞2秒
}, 1000);

回调执行时间 > interval,回调会在宏任务队列中堆积，导致执行间隔越来越乱，甚至连着执行

推荐：使用setTimeout模拟setInterval

js 复制代码

function loop() {
  setTimeout(() => {
    console.log('更安全的定时执行');
    loop();//
  }, 1000);
}
loop();

十一、事件监听（绑定）

1.什么是事件与事件监听

事件（Event）：在系统或用户操作过程中发生的动作，例如点击、输入、鼠标移动等。
事件监听：程序检测事件是否发生，一旦触发就执行对应的函数（也称为事件绑定 / 注册事件）。

常见场景：

点击按钮提交表单
鼠标经过显示下拉菜单
键盘回车发布内容

2.事件监听三要素

要素	说明
事件源	哪个 DOM 元素触发事件
事件类型	以什么方式触发，如 click、mouseover
事件处理函数	事件触发后要执行的操作

事件类型必须加引号，处理函数在事件触发时才执行。

3.事件监听的两种写法

DOM L0 ：element.onclick = function () {}（会被覆盖）
DOM L2（推荐） ：element.addEventListener('click', fn)（可多次绑定，拥有事件更多特性）

十二、事件类型

1.常见事件分类

（1）鼠标事件

click：鼠标点击
mouseenter：鼠标经过
mouseleave：鼠标离开

（2）焦点事件（表单相关）

focus：获得焦点
blur：失去焦点

（3）键盘事件

keydown：键盘按下触发
keyup：键盘抬起触发

（4）文本 / 表单事件

input：用户输入时触发

2.事件选择补充说明

监听输入内容变化 ：优先使用 input，而不是 keydown
悬停效果 ：优先使用 mouseenter / mouseleave，避免冒泡问题
键盘判断 ：使用 event.key，不再推荐 keyCode

十三、事件对象（Event Object）

1 .什么是事件对象

事件对象是一个 包含事件相关信息的对象
由浏览器在事件触发时自动创建

使用场景：

判断按下的是哪个键
判断鼠标点击的位置
判断当前触发事件的元素

2. 如何获取事件对象

事件处理函数的 第一个参数 就是事件对象
常见命名：event / e

3. 常用事件对象属性

属性	作用
`type`	当前事件类型
`clientX / clientY`	鼠标相对于浏览器窗口的位置
`offsetX / offsetY`	鼠标相对于当前元素的位置
`key`	键盘按下的键值

十四、回调函数

1 .什么是回调函数

把一个函数作为参数传给另一个函数
当条件满足时，由对方函数调用

2. 回调函数的特点

本质仍然是函数
常以匿名函数形式出现
广泛用于：
- 事件监听
- 定时器
- 数组方法（forEach、map 等）

十五.事件流

1.事件流

事件流指的是事件完整执行过程中的流动路径。

捕获阶段：从父到子。

冒泡阶段：从子到父。

实际工作都是使用事件冒泡为主

2.事件捕获

捕获阶段是从 DOM 根元素开始执行的事件（从外到内）。

通过 addEventListener 设置第三个参数为 true 代表捕获阶段触发。

默认情况下为false，代表冒泡阶段触发。

3.事件冒泡

事件冒泡是默认的事件流方式，事件触发后会向上传播到所有父级元素。也就是说，当一个元素触发事件后，会依次向上调用 所有父级元素的同名事件

实例：点击按钮，事件会冒泡到父元素。

4.阻止冒泡

当事件发生在某一元素上时，如果不希望冒泡，可以使用 event.stopPropagation() 来阻止冒泡。

使用场景：需要限制事件只作用于当前元素而不影响父级元素时使用。

注意： 此方法可以阻断事件流动传播，不光在冒泡阶段有效，++捕获阶段也有效++ .stopPropagation 阻止的是"事件继续传播"，不是"只阻止冒泡"

补充：我们在某些情况下需要阻止元素默认行为的发生，比如阻止链接的跳转，表单域的跳转：

e.preventDefault();

preventDefault 用来阻止浏览器的默认行为，stopPropagation 用来阻止事件传播，两者互不影响，是 DOM 事件系统中的两个独立机制

5.解绑事件

对于 on 事件，可以通过设置为 null 来解绑事件。

对于 addEventListener 绑定的事件，使用 removeEventListener 来解绑。

注意：匿名函数无法被解绑

十六.事件委托

事件委托是利用事件流的特性，避免对多个元素进行重复的事件绑定。(即注册一次事件实现同时给多个元素注册事件)

优点：减少事件绑定次数，提高性能。

实现：将事件绑定到父元素，当事件触发时，通过 event.target 找到真正触发事件的子元素。

js 复制代码

const ul = document.querySelector('ul');
ul.addEventListener('click',function(e) {
    //console.dir(e.target)
    if(e.target.tagName === 'LI') {
        e.target.style.color ='pink';
    }
})

十七.其他常见事件

1.页面加载事件

load 事件：监听页面所有资源加载完毕。监听整个页面资源给window加

DOMContentLoaded 事件：仅在 DOM 加载完毕时触发，不需要等待资源加载完成。给document加，无需等待样式表，图像等完全加载

js 复制代码

//监听页面所有资源加载完毕
window.addEventListener('load',function() {
    //执行的操作
})

2.页面滚动事件

scroll 事件：当页面或某个元素的滚动条发生滚动时触发。

获取滚动位置：通过 scrollTop 和 scrollLeft 来获取被卷去的距离。(两个值可读写)

补充：页面滚动事件-----滚动到指定的坐标

js 复制代码

//让页面滚动到y轴1000像素的位置
window.scrollTo(0,1000)

3.页面尺寸事件

resize 事件：在窗口尺寸改变时触发。

获取元素的宽高：使用 clientWidth 和 clientHeight 来获取元素的宽高。

4.元素尺寸与位置

获取元素的尺寸

offsetWidth 和 offsetHeight：获取元素的总宽高，包括 border 和 padding，但不包括 margin。

clientWidth 和 clientHeight：获取元素的可视区域宽高，不包括边框、滚动条、外边距。

获取元素的位置

offsetTop 和 offsetLeft：获取元素距离其定位父级元素的上和左距离。(offsetTop和offsetLeft 注意是只读属性)

offsetTop 和 offsetLeft 得到位置以带有定位的祖先元素 为准，如果都没有则以文档左上角为准

offsetParent 是距离当前元素最近的、position 不为 static 的祖先元素；如果不存在，则为 body；fixed 元素和 display:none 元素的 offsetParent 为 null。

fixed:相对于视口
display:none : 不存在offsetLeft和offsetTop
offsetTop / offsetLeft 本身就不用于 html

获取元素大小及相对于视口的位置

element.getBoundingClientRect()

方法返回元素的大小及其相对于视口的位置

十八、DOM 节点基础概念

18.1 什么是 DOM 节点

DOM（Document Object Model） ：浏览器把 HTML 文档解析成一棵树，树上的每一个内容都称为节点

DOM 树示意：

text 复制代码

html
 ├─ head
 └─ body
    ├─ div
    │  └─ span
    └─ p

18.2 DOM 节点的类型

节点类型	说明	示例
元素节点	HTML 标签	div、p、img
属性节点	标签上的属性	class、id、href
文本节点	标签中的文字	文本内容
注释节点	HTML 注释	`<!-- 注释 -->`

开发中最重要的是：元素节点

十九、DOM 节点查找（基于节点关系）

19.1 父节点查找

js 复制代码

element.parentNode

返回最近一级的父节点
找不到返回 null

常见场景：点击子元素，操作父容器

19.2 子节点查找

1️⃣ `childNodes`

js 复制代码

element.childNodes

包含：元素节点 + 文本节点(空格、换行)+ 注释节点

2️⃣ `children`（重点）

js 复制代码

element.children

只返回元素节点
返回伪数组（HTMLCollection）

推荐使用 children

19.3 兄弟节点查找

js 复制代码

element.nextElementSibling     // 下一个兄弟元素
element.previousElementSibling // 上一个兄弟元素

二十、DOM 节点的新增

20.1 创建节点

js 复制代码

const div = document.createElement('div')

仅仅创建，不会显示在页面中，一般先创建节点，然后插入节点

20.2 追加节点

1️⃣ 插入到父元素的最后一个子元素

js 复制代码

parent.appendChild(要插入的元素)

2️⃣ 插入到父元素中某个子元素的前面

js 复制代码

parent.insertBefore(要插入的元素，在哪个元素前面)

20.3 克隆节点

js 复制代码

//克隆一个已有的元素节点
const clone = node.cloneNode(布尔值)//参数是必须传入的（虽然有些老浏览器默认为 false，但规范要求显式指定）。

参数	含义
true	克隆自身 + 子孙后代节点
false	只克隆自身（默认）

克隆后的节点 不包含事件

二十一、DOM 节点的删除

21.1 删除节点的规则

必须通过父元素删除子元素

js 复制代码

parent.removeChild(child)

⚠️ 没有父子关系，删除失败
删除节点和隐藏节点（display:none）有区别的：隐藏节点还是存在的，但是删除，则从html中删除节点

删除 vs 隐藏:

操作	是否存在 DOM 中
display: none	✅ 存在
removeChild	❌ 不存在

二十二、移动端触摸事件（M 端事件）

22.1 常见触摸事件

事件	说明
touchstart	手指触碰屏幕
touchmove	手指在屏幕上移动
touchend	手指离开屏幕

22.2 touch 对象常用属性

js 复制代码

event.touches        // 当前屏幕上的触点
event.targetTouches  // 当前元素上的触点
event.changedTouches // 发生变化的触点

移动端滑动、拖拽的核心基础

二十三、回流（重排）与重绘

23.1 浏览器渲染流程

解析 HTML → DOM Tree
解析 CSS → Style Rules
生成 Render Tree
Layout（回流）
Painting（重绘）
Display

23.2 重排

影响元素布局、尺寸、位置

常见触发场景：

改变宽高、位置
添加 / 删除 DOM
修改字体大小
浏览器窗口变化

回流一定引起重绘

23.3 重绘

只影响外观，不影响布局

例如：

css 复制代码

color
background-color
outline

重绘不一定回流

二十四、BOM 与 Window 对象概述

24.1 什么是 BOM

BOM（Browser Object Model） ：浏览器对象模型

👉 用来操作 浏览器本身，而不是页面内容（DOM）

核心特点：

window 是 浏览器中的全局对象
所有 BOM 对象都挂载在 window 上
所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法

js 复制代码

window.alert()
window.document
window.location

实际开发中 window 通常可以省略

24.2 window 对象的地位

window 是 JS 在浏览器环境中的 顶级对象
document / console / alert 本质上都是 window 的属性

js 复制代码

alert === window.alert // true

补充说明：

let / const 声明的全局变量不会挂载到 window，只存在于全局语法环境。防止污染全局对象
Global Environment ├── Object Environment → window（var / function） └── Lexical Environment → let / const / class
var 声明的会（这是旧规范）

二十五、定时器（延时函数 & 间歇函数）

25.1 延时函数 setTimeout

作用：让代码延迟执行一次

js 复制代码

setTimeout(fn, delay)

示例：

js 复制代码

setTimeout(() => {
  console.log('3秒后执行')
}, 3000)

特点：

只执行一次
会返回一个 定时器 id

25.2 清除延时器

js 复制代码

const timer = setTimeout(fn, 3000)
clearTimeout(timer)

清除的是 还未执行的定时器

25.3 间歇函数 setInterval（补充）

js 复制代码

setInterval(fn, delay)

特点对比：

定时器	执行次数
setTimeout	执行一次
setInterval	无限执行（直到清除）

25.4 定时器注意事项

定时器是 异步任务
后面的同步代码会先执行
每调用一次，都会生成一个新的定时器

二十六、JavaScript 执行机制（事件循环）

26.1 JS 为什么是单线程？

JS 主要职责：操作 DOM
同一时间只能做一件事，避免 DOM 冲突

单线程 ≠ 执行慢
靠异步机制提升效率

26.2 同步与异步

同步任务

按顺序执行
会进入 执行栈

异步任务

不会立即执行
进入 任务队列（消息队列）

常见异步任务：

定时器（setTimeout / setInterval）
事件（click / scroll）
资源加载（load / error）

26.3 事件循环（Event Loop）

执行顺序规则：

执行执行栈中的 同步任务
同步任务清空后
读取任务队列中的异步任务
推入执行栈执行
循环往复

口诀：先同步 → 后异步

补充：完整事件循环：

① 执行一个宏任务（script / click / timeout）

② 清空所有微任务

③ 进行页面渲染（如有）

④ 执行下一个宏任务

常见宏任务包括：

DOM 事件（click / scroll / input）
setTimeout
setInterval
网络请求回调（XHR / fetch 的 then 前阶段）
UI 渲染

常见微任务包括：

优先级高于宏任务

Promise.then / catch / finally
MutationObserver
queueMicrotask

二十七、location 对象（地址栏操作）

27.1 location 对象简介

location 是一个对象，用于 操作 URL

js 复制代码

window.location

27.2 常用属性与方法

属性 / 方法	作用
href	获取 / 设置完整 URL
search	获取 `?` 后参数
hash	获取 `#` 后内容
reload()	刷新页面

27.3 常见用法示例

页面跳转

js 复制代码

location.href = 'https://www.baidu.com'

获取查询参数

js 复制代码

location.search // ?id=1&name=tom

hash 路由（SPA 基础）

js 复制代码

location.hash // #/home

Vue / React 路由的底层原理之一

二十八、navigator 对象（浏览器信息）

28.1 navigator 的作用

获取浏览器、系统、平台信息
常用于 设备判断

28.2 userAgent 判断设备

js 复制代码

navigator.userAgent

常见使用场景：

PC / 移动端跳转
浏览器兼容处理

实际项目中更推荐 CSS 媒体查询 或 特性检测

二十九、history 对象（历史记录）

29.1 history 简介

管理浏览器的历史记录
与前进 / 后退相关

js 复制代码

history.back()
history.forward()

📌 原生开发中使用较少

📌 SPA 框架中由路由系统封装使用

三十、本地存储概述（Local Storage）

30.1 为什么需要本地存储？

问题：页面一刷新，数据就没了 ❌

解决方案：HTML5 本地存储

特点：

数据存储在浏览器
页面刷新不丢失
容量约 5MB

三十一、localStorage（重点）

31.1 localStorage 特性

永久存储 在本地(用户的电脑)，除非手动删除，否则关闭页面也会存在
可以多窗口(页面)共享 (同一浏览器可以共享)
键值对形式存储
只能存 字符串

31.2 常用 API

js 复制代码

localStorage.setItem(key, value)
localStorage.getItem(key)
localStorage.removeItem(key)

三十二、sessionStorage（了解）

对比项	localStorage	sessionStorage
生命周期	永久	关闭窗口
是否共享	同源共享	同窗口
API	相同	相同

三十三、存储复杂数据类型

33.1 为什么不能直接存对象？

js 复制代码

localStorage.setItem('obj', {a:1}) // ❌

👉 本地存储只能存字符串！

33.2 正确做法：JSON

存储

js 复制代码

localStorage.setItem('list', JSON.stringify(arr))

取出

js 复制代码

const data = JSON.parse(localStorage.getItem('list'))

📌 JSON.stringify → 存

📌 JSON.parse → 取

三十三、正则表达式基础概念

33.1 什么是正则表达式

正则表达式（Regular Expression）：用于匹配、校验、提取、替换字符串中符合规则的内容。

常见应用场景：

表单校验（用户名、手机号、邮箱）
敏感词过滤
字符串提取 / 替换
登录、注册、搜索功能

33.2 正则的创建方式

字面量方式

js 复制代码

const reg = /abc/

构造函数方式

js 复制代码

const reg = new RegExp('abc')

区别补充：

字面量写法性能更好、语义更清晰
构造函数适合规则需要拼接变量的场景

33.3 正则的使用方法

test 方法

用来查看正则表达式与指定的字符串是否匹配

js 复制代码

reg.test(str)

返回 true / false
常用于 表单校验

js 复制代码

/abc/.test('abc123') // true

exec()方法

在一个指定字符串中执行一个搜索匹配

三十四、正则表达式中的普通字符

正则中，普通字符默认表示精确匹配

js 复制代码

/abc/.test('abc')   // true
/abc/.test('ab')    // false

匹配是 连续的，不是分散匹配

三十五、元字符（特殊含义字符）

元字符在正则中具有 特殊含义，用于描述规则。

35.1 边界符（位置限定）

边界符	含义
`^`	匹配字符串开始
`$`	匹配字符串结束

js 复制代码

/^abc$/.test('abc')   // true
/^abc$/.test('abc1')  // false

边界符决定"是否是完整匹配"

35.2 量词符（次数限定）

量词	含义
`*`	0 次或多次
`+`	1 次或多次
`?`	0 次或 1 次
`{n}`	恰好 n 次
`{n,}`	至少 n 次
`{n,m}`	n 到 m 次

js 复制代码

/a{3}/.test('aaa')     // true
/a{3}/.test('aa')      // false

35.3 字符类（中括号）

js 复制代码

/[abc]/   // 后面字符只要匹配到abc中任意一个字符都返回true
//使用连字符 - 表示一个范围
/[a-z]/   // a-z任意小写字母
/[0-9]/   // 0-9任意数字
/[a-zA-Z]/ //表示大小写都可以

35.4 取反字符类

js 复制代码

/[^a-z]/

含义：

匹配 非 a-z 的任意字符

35.5 .

. 匹配除了换行符之外的任何单个字符

35.6 预定义字符类

预定义	含义
`\d`	数字 `[0-9]`
`\D`	非数字
`\w`	字母、数字、下划线
`\W`	非字母数字下划线
`\s`	空白字符
`\S`	非空白字符

js 复制代码

/\d{6}/.test('123456') // true

字符串中要注意转义 ：\\d

三十六、修饰符（flags）

修饰符	含义
`i`	正则匹配时字母不区分大小写
`g`	匹配所有满足正则表达式的结果
`m`	多行匹配（了解）

js 复制代码

const reg = /pink/gi

三十八、replace 替换方法

js 复制代码

str.replace(reg, newStr)

示例：

js 复制代码

const str = 'pink老师上课很pink'
str.replace(/pink/g, '**')

📌 不加 g 只替换第一个

JS-WebAPIs 学习笔记

Web APIs 学习笔记

一、变量声明

1. var / let / const 对比

2. 使用原则（非常重要）

3. 总结

二、Web API 基本认知

1. Web API 是什么？

2. Web API 分类

3. DOM 的作用

三、DOM 树 & DOM 对象

1. DOM 树

2. DOM 对象（核心）

四、获取 DOM 元素

1. querySelector（获取单个）

2. querySelectorAll（获取多个）

3. 二者对比总结

五、操作元素内容

1. innerText

2. innerHTML

3. 对比总结

4. innerHTML 安全提醒

六、操作元素属性

1. 常用属性操作

七、操作元素样式

1. style 方式（少量样式）

2. className（会覆盖）

3. classList（强烈推荐）

八、表单元素属性

1. 普通属性

2. 布尔属性

九、自定义属性（HTML5）

1. HTML

2. JS 获取

十、定时器（setInterval）

1. 开启定时器

2. 关闭定时器

3. 劣势和推荐使用

十一、事件监听（绑定）

1.什么是事件与事件监听

2.事件监听三要素

3.事件监听的两种写法

十二、事件类型

1.常见事件分类

（1）鼠标事件

（2）焦点事件（表单相关）

（3）键盘事件

（4）文本 / 表单事件

2.事件选择补充说明

十三、事件对象（Event Object）

1 .什么是事件对象

2. 如何获取事件对象

3. 常用事件对象属性

十四、回调函数

1 .什么是回调函数

2. 回调函数的特点

十五.事件流

1.事件流

2.事件捕获

3.事件冒泡

4.阻止冒泡

5.解绑事件

十六.事件委托

十七.其他常见事件

1.页面加载事件

2.页面滚动事件

3.页面尺寸事件

4.元素尺寸与位置

获取元素的尺寸

获取元素的位置

获取元素大小及相对于视口的位置

十八、DOM 节点基础概念

18.1 什么是 DOM 节点

18.2 DOM 节点的类型

十九、DOM 节点查找（基于节点关系）

19.1 父节点查找

19.2 子节点查找

1️⃣ childNodes

2️⃣ children（重点）

19.3 兄弟节点查找

1️⃣ `childNodes`

2️⃣ `children`（重点）