API学习
1web api基本认知
1.1作用和分类
作用：使用JS操作html和浏览器
分类：DOM与BOM
1.2DOM
定义：DOM（Document Object Model—— 文档对象模型）是用于呈现及交互任意 HTML 或 XML 文档的 API。
通俗解释：DOM 是浏览器提供的、专门用于操作网页内容的功能集合。
核心作用：支持开发网页内容特效、实现用户与网页的交互功能。
tips：
DOM 是前端开发的核心技术之一，它将 HTML/XML 文档解析为 “对象树”（节点结构），开发者可通过 JavaScript 操作这些节点（如修改内容、样式、结构），从而实现网页的动态效果与交互逻辑。
1.3DOM树
DOM 树的概念：将 HTML 文档的所有标签按照层级关系（父子、兄弟）组织成的树状结构，也称为文档树。
作用：直观地体现 HTML 标签之间的嵌套、包含等关系，是浏览器解析 HTML 文档的基础结构，便于开发者通过 DOM API 定位和操作特定标签。
1.4 DOM 对象（重要）
DOM 对象的定义：由浏览器根据 HTML 标签生成的 JavaScript 对象。
该对象包含对应 HTML 标签的所有属性，可直接通过对象访问标签属性。
修改 DOM 对象的属性会自动同步到对应的 HTML 标签上，实现网页内容的动态更新。
DOM 的核心思想：将网页内容抽象为对象进行操作，通过对象的属性 / 方法来控制网页元素。
document 对象：是 DOM 树的根节点对象，代表整个 HTML 文档，是访问 DOM 节点的入口。
2获取DOM元素
document.querySelector(`CSS选择器`)获取匹配的第一个元素，一个htmlelement对象
可以直接改变元素的值
如果没有匹配返回null
document.querySelectorAll(`CSS选择器`)选择相匹配的多个元素，返回值为与之匹配的对象集合，为一个伪数组（有长度有索引号，没有pop和push等方法）
不能直接改变元素的值，只能通过遍历的方式
3操作元素内容
DOM 对象都是根据标签生成的，所以操作标签，本质上就是操作 DOM 对象。
就是操作对象使用的点语法。
如果想要修改标签元素的里面的内容，则可以使用如下几种方式：
学习路径：
对象.innerText 属性 对象.innerHTML 属性3.1 innerText
将文本内容更新到任意标签的位置
显示纯文本，不解析标签
3.2 innerHTML
会解析标签，其他与innerText相同
one.innerHTML = personarr[num1] personarr.splice(num1,1)4操作元素样式属性
4.1. 通过 style 属性操作 CSS
语法：
对象.style.样式属性 = 值
举例说明
const box = document.querySelector('.box')修改元素样式
box.style.width = '200px' box.style.marginTop = '15px' box.style.backgroundColor = 'pink'注意
修改样式需通过style属性引出
若样式属性含-连接符，需转换为小驼峰命名法（例如margin-top对应marginTop）
赋值时，需根据需求添加 CSS 单位（如px）
document.querySelector(`body`) document.body.style.backgroundImage=`url(../)`4.2 操作类名 (className) 操作 CSS
适用场景：当需要修改的样式较多时，直接用style属性会比较繁琐，可借助 CSS 类名来批量修改样式。
语法：
active 是一个已定义的CSS类名
元素.className = 'active'注意：
因为class是 JavaScript 的关键字，所以用className来表示元素的类名属性。
className会用新值覆盖旧值（即替换原有类名），若要在原有类名基础上添加新类，需保留之前的类名（例如：元素.className = ‘原有类名 active’）。
如果想要保留原来的样式的同时添加新的样式，只需在新类名和旧类名之间打空格
4.3 通过 classList 操作类控制 CSS
解决的问题：className会覆盖原有类名，classList可实现类名的追加、删除、切换，更灵活。
// 追加一个类（原有类名保留）
元素.classList.add('类名')// 删除一个类
元素.classList.remove('类名')// 切换类：有则删除，无则添加
元素.classList.toggle('类名')4.4表单元素的属性操作
应用场景：表单常需修改属性（例如点击眼睛显示密码，本质是将type="password"的输入框转为type=“text”）。
操作逻辑：表单的属性（有取值的），和普通标签属性的操作方式一致。
获取属性值：DOM对象.属性名
设置属性值：DOM对象.属性名 = 新值
示例：
表单.value = '用户名' // 设置输入框的内容 表单.type = 'password' // 设置输入框为密码类型表单的布尔型属性操作
特性：这类表单属性 “添加即生效、移除即失效”，统一用布尔值（true/false）表示状态：
button.disabled=true禁用
true：代表添加该属性（属性生效）
false：代表移除该属性（属性失效）
常见属性示例：disabled（禁用）、checked（选中）、selected（下拉选项选中）
4.5 自定义属性
标准属性：标签天生自带的属性（如class、id、title，以及disabled、checked、selected等），可直接通过点语法操作。
自定义属性：
HTML5 中推出data-前缀的专用自定义属性；
标签中需以data-开头定义；
DOM 对象中通过dataset对象获取。
示例代码
<body><divclass="box"data-id="10">盒子</div><script>constbox=document.querySelector('.box')console.log(box.dataset.id)// 输出：10</script></body>5定时器函数
目标：能够使用定时器函数重复执行代码
定时器函数可实现定时器的开启与关闭
5.1. 开启定时器
setInterval(函数名, 间隔时间)作用：每隔指定的时间，重复调用传入的函数
间隔时间的单位为毫秒（例如1000代表 1 秒）
此处的括号内只写函数名不打括号，不然系统在程序执行时自动运行
定时器函数可以开启和关闭定时器
5.2. 关闭定时器
let 变量名 = setInterval(函数, 间隔时间) clearInterval(变量名)6事件监听
检测程序是否有事件产生，一旦有事件触发，就立刻调用一个函数做出响应，
元素对象.addEventListener(`事件类型`,要执行的函数)三要素
事件源：获取dom元素
事件类型：什么方式出发
事件调用的函数：要做什么
7事件类型
7.1鼠标触发
Clik点击 mouseenter鼠标经过 mouseleave鼠标离开
鼠标经过事件：
mouseover 和 mouseout 会有冒泡效果
mouseenter 和 mouseleave 没有冒泡效果 (推荐)
7.2焦点时间
Focus获得焦点 bluf失去焦点
7.3键盘事件
Keydown键盘按下触发
Keyup键盘抬起触发
7.4文本事件
Input 用户输入事件
7.5事件对象
语法：如何获取
在事件绑定的回调函数的第一个参数就是事件对象
一般命名为 event、ev、e
元素.addEventListener('click', function (e) {目标：能够使用常见事件对象属性
部分常用属性
type：
获取当前的事件类型
clientX/client：
获取光标相对于浏览器可见窗口左上角的位置
offsetX/offset：
获取光标相对于当前 DOM 元素左上角的位置
key：
用户按下的键盘键的值
现在不提倡使用 keycode
如
Input.addEventListener(`keyup`,function(e){}) console.log(e.key)8环境对象
目标：能够分析判断函数运行在不同环境中 this 所指代的对象环境对象：指的是函数内部特殊的变量 this，它代表着当前函数运行时所处的环境作用：弄清楚 this 的指向，可以让我们代码更简洁
函数的调用方式不同，this 指代的对象也不同
【谁调用，this 就是谁】是判断 this 指向的粗略规则
Console
9回调函数
把函数当做另外一个函数的参数传递，这个函数就叫回调函数
回调函数本质还是函数，只不过把它当成参数使用
使用匿名函数做为回调函数比较常见
10事件流、
10.1 事件流和两个阶段说明
目标：能够说出事件流经过的 2 个阶段
事件流指的是事件完整执行过程中的流动路径
（图示：层级结构为 Document → Element html → Element body → Element div，标注了阶段顺序）
说明：假设页面里有个 div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段
简单来说：捕获阶段是 从父到子 冒泡阶段是从子到父
10.2事件捕获概念：
从 DOM 的根元素开始去执行对应的事件（从外到里）
事件捕获需要写对应代码才能看到效果
DOM.addEventListener(事件类型, 事件处理函数, 是否使用捕获机制)说明：
addEventListener 第三个参数传入 true 代表是捕获阶段触发（很少使用）
false 代表冒泡阶段触发，为默认值
10.3事件冒泡
目标：能够说出事件冒泡的执行过程
事件冒泡概念：
当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡
简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的 同名事件
事件冒泡是默认存在的
L2 事件监听第三个参数是 false，或者默认都是冒泡
（代码片段示例）
const father = document.querySelector('.father') const son = document.querySelector('.son')10.4 阻止冒泡
目标：能够写出阻止冒泡的代码
问题：因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素
需求：若想把事件就限制在当前元素内，就需要阻止事件冒泡
前提：阻止事件冒泡需要拿到事件对象
事件对象.stopPropagation()10.5阻止默认行为
e.preventDefaulte11页面滚动
元素为scroll
DOM.addEventListener(`scrolll`, 事件处理函数) scrollLeft 和 scrollTop（属性）▶ 获取被卷去的大小
▶ 获取元素内容往左、往上滚出去看不到的距离
▶ 这两个值是数值型，不带单位，可读写的
11.1 页面滚动事件 - 滚动到指定的坐标
scrollTo () 方法可把内容滚动到指定的坐标
// 让页面滚动到 y 轴1000像素的位置 window.scrollTo(0, 1000)11.2获取宽高：
▶ 获取元素的自身宽高、包含元素自身设置的宽高、padding、border
▶ offsetWidth 和 offsetHeight
▶ 获取出来的是数值，方便计算
▶ 注意：获取的是可视宽高，如果盒子是隐藏的，获取的结果是 0
获取位置：
▶ 获取元素距离自己定位父级元素的左、上距离
▶ offsetLeft 和 offsetTop 注意是只读属性
12时间对象
12.1 实例化
目标：能够实例化日期对象
在代码中发现了 new 关键字时，一般将这个操作称为实例化
创建一个时间对象并获取时间
▶ 获得当前时间
const date = new Date()12.2使用
方法 作用 说明
getFullYear() 获得年份 获取四位年份
getMonth() 获得月份 取值为 0 ~ 11，得到的月份小一
getDate() 获取月份中的每一天 不同月份取值也不相同
getDay() 获取星期 取值为 0 ~ 6
getHours() 获取小时 取值为 0 ~ 23
getMinutes() 获取分钟 取值为 0 ~ 59
getSeconds() 获取秒 取值为 0 ~ 59
const data= new Date() let m=(data.getMonth)12.3时间戳
目标：能够获得当前时间戳
使用场景：如果计算倒计时效果，前面方法无法直接计算，需要借助于时间戳完成
什么是时间戳：
是指 1970 年 01 月 01 日 00 时 00 分 00 秒起至现在的毫秒数，它是一种特殊的计量时间的方式
算法：
将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数
剩余时间毫秒数 转换为 剩余时间的 年月日时分秒 就是 倒计时时间
比如 将来时间戳 2000ms - 现在时间戳 1000ms = 1000ms
1000ms 转换为就是 0 小时 0 分 1 秒
12.4得到时间戳
使用 getTime () 方法
const date = new Date() console.log(date.getTime())简写 +new Date ()
▶ 无需实例化
console.log(+new Date()) 使用 Date.now ()▶ 无需实例化
13节点操作
目标：能说出 DOM 节点的类型
DOM 节点
DOM 树里每一个内容都称之为节点
节点类型:
元素节点
所有的标签 比如 body、div
html 是根节点
属性节点
所有的属性 比如 href
文本节点
所有的文本
其他
.parentNode直接获取父节点
childNodes获得所有子节点、包括文本节点（空格、换行）、注释节点等
children 属性（重点）仅获得所有元素节点返回的还是一个伪数组父元素.children
下一个兄弟节点
nextElementSibling 属性
上一个兄弟节点
previousElementSibling 属性
13.1. 创建节点
即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点
创建元素节点方法：
// 创造一个新的元素节点 document.createElement('标签名')13.2. 追加节点
要想在界面看到，还得插入到某个父元素中
插入到父元素的最后一个子元素：
// 插入到这个父元素的最后 父元素.appendChild(要插入的元素)插入到父元素中某个子元素的前面
// 插入到某个子元素的前面 父元素.insertBefore(要插入的元素，在哪个元素前面)13.3 增加节点
特殊情况下，我们新增节点，按照如下操作：
复制一个原有的节点
把复制的节点放入到指定的元素内部
克隆节点
// 克隆一个已有的元素节点 元素.cloneNode(布尔值)cloneNode 会克隆出一个跟原标签一样的元素，括号内传入布尔值
若为 true，则代表克隆时会包含后代节点一起克隆
若为 false，则代表克隆时不包含后代节点
默认为 false
13.4 删除节点
目标：能够具备根据需求删除节点的能力
若一个节点在页面中已不需要时，可以删除它
在 JavaScript 原生 DOM 操作中，要删除元素必须通过父元素删除
父元素.removeChild(要删除的元素)注：
如不存在父子关系则删除不成功
删除节点和隐藏节点（display:none）有区别的：隐藏节点还是存在的，但是删除，则从 html 中删除节点
14 M端事件
目标：了解 M 端常见的事件移动端也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android 和 IOS 都有。
触屏事件 touch（也称触摸事件），Android 和 IOS 都有。
touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。
常见的触屏事件如下：
触屏 touch 事件 说明
touchstart 手指触摸到一个 DOM 元素时触发
touchmove 手指在一个 DOM 元素上滑动时触发
touchend 手指从一个 DOM 元素上移开时触发
15 插件
插件：就是别人写好的一些代码，我们只需要复制对应的代码，就可以直接实现对应的效果
学习插件的基本过程
熟悉官网，了解这个插件可以完成什么需求 https://www.swiper.com.cn/
看在线演示，找到符合自己需求的 demo https://www.swiper.com.cn/demo/index.html
查看基本使用流程 https://www.swiper.com.cn/usage/index.html
查看 APi 文档，去配置自己的插件 https://www.swiper.com.cn/api/index.html
注意：多个 swiper 同时使用的时候，类名需要注意区分
