DOM(Ci)
变量声明
优先考量const
引用数据类型用const 声明，可增删改（存储方式决定）
基本认知
使用js去操作HTML和浏览器
分类
DOM（把网页内容当成对象来处理）
DOM树
DOM对象
document对象
BOM
伪数组
有长度
有索引
不能增删改
获取DOM对象
方法
根据css选择器获取
语法（找不到返回null）
document.querySelector('css选择器')返回选择匹配的第一个元素document.querySelectorAll('css选择器')返回所有匹配的元素（伪数组）//只有一个元素也是伪数组document.documentElement//获取HTML元素
操作元素内容
操作元素属性
标准属性
常用属性：语法
对象.属性=值样式属性：
语法1（生成行类样式表，权重较高）
对象.style.属性名=值css属性名中含-,用小驼峰命名法eg:backgroundColor
语法2
对象.className = '类名1 类名2'让该对象属于赋值的类
会覆盖掉原来所属的类
语法3：
对象.classList.add('类名')//追加一个类对象.classList.remove('类名')删除一个类对象.classList.toggle('类名')切换一个类（有就删，没有就加）
表单元素属性（只能添加，不能移除）
获取值
表单元素.value例子
表单元元素.checked = ture//选中表单元元素.disable = ture//禁用
自定义属性（data-属性名="***"//HTML定义）
语法
e.target.dataset.属性名//js调用（返回值为“***”）dataset:自定义属性的集合
事件监听（绑定）
概念
事·件：编程时系统内发生的动作或者事情
事件监听：让程序检测是否有事件发生，一旦有事件发生，就立即调用一个函数做出响应
语法
元素对象.addEventListener('事件类型'，要执行的函数)//不会覆盖要素
事件源
事件类型
调用函数
解绑事件
语法
对象.removeEventListener(事件类型，回调函数)//匿名函数无法解绑
事件类型
鼠标事件
click鼠标点击
mouseenter鼠标经过（没有冒泡）
mouseleave鼠标离开（没有冒泡）
焦点事件
focus获取焦点
blur失去焦点
键盘事件
Keydown键盘按下触发
Keyup键盘抬起触发
文本事件
input用户输入事件
表单事件
change值发生变化的表单元素
页面加载事件
load页面所有资源都加载完毕再执行回调函数
例
对象：window//可以把写在前面的js最后完成
对象：图像//可以先执行下面的代码，最后加载图片
作用
改变代码执行顺序
避免网页无反应
DOMContentLoaded//HYML文档加载完毕加载完毕再执行回调函数
例
对象：document//可以把写在前面的js最后完成
页面滚动事件
scroll整个页面滚动
例
对象：window//监听整个页面滚动
对象：其他内容//监听该内容内部滚动
页面尺寸事件
resize窗口大小发生改变时触发
事件对象
概念
在事件绑定的回调函数的第一个参数
一般命名为e
属性
type//获取当前事类型
clientX/clientY//获取光标相对于浏览器可见窗口左上角的位置
offsetX/offsetY//获取光标相对于当前DOM元素左上角的位置
Key//用户按下键盘的值
环境对象
概念：函数内部特殊的变量this，指向函数的调用者
间歇函数
开启定时器
setInterval(函数名，间隔时间（毫秒）//返回序号（第几个定时器）注意：
每过个这段时间，就调用函数
函数名后面不要加（）
关闭定时器
let 变量名=setInterval(函数，间隔时间)
clearInterval(变量名)
回调函数
一个函数作为参数传递给另一个函数时，这个函数叫回调函数（例如：定时器，事件监听）
箭头函数
语法
（参数）=>{函数体}参数括号：
只有一个参数可不用括号
没有/多个参数需要使用括号
大括号：
省略大括号箭头后面就只能有一行代码
省略大括号会隐式返回这行代码的值
let sum1 = (a, b) => a + b; *// 相当于 return a + b;省略大括号不能写return。
this:箭头函数没有this，箭头函数的this是继承父执行上下文里面的this//向上找到的第一个有this的父
事件流
概念：事件完整执行的流动路径、
事件捕获
代码
DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制)//第三个参数默认false>>冒泡
事件冒泡（当监听一个元素，触发事件后，会依次向上调用所有父级元素的同名事件）
阻止冒泡
事件对象.stopPropagation()//阻止冒泡和捕获（阻止流动传播）
事件委托
原理：利用冒泡
给父元素绑定事件,每一个子元素发生事件时，父元素的事件执行
语法
父元素.addEventListener('事件类型'，function(e){ if（e.target.tagName === "标签名（大写）"）//区别不同标签 { e.target.操作元素=需求 } })
阻止默认行为
语法
e.preventDefault()例如：阻止链接跳转
元素尺寸与位置
对象方法
去除字符串两侧的空格
str.trim()让页面滚动到
window.scrollTo(x,y)对象.target.getBoundingClientRect()//返回元素大小及其相对于视口的位置对象方法里的this指向这个对象
对象属性
日期对象
作用：得到当前系统时间
实例化
用new关键字时，一般将这个操作称为实例化
const date = new Date()//获取当前时间const date = new Date('2024-20-23 08:30:00')//获取指定时间
方法
date.toLocaleString()// 2022/4/1 09:41:21date.toLocaleDateString()//2022/4/1date.toLocaleTimeString()// 09/41/21
时间戳
定义：是指1970年01月01日00时00分00秒起至现在的毫秒数。它是一种特殊的计量时间的方式
作用：获取当前时间戳
使用场景: 如果计算倒计时效果，前面方法无法直接计算，需要借助于时间戳完成
算法:
将来的时间戳 -现在的时间戳=剩余时间毫秒数
剩余时间毫秒数 转换为 剩余时间的 年月日时分秒 就是 倒计时时间
语法
getTime()//需要实例化+new Date()(重点)Date.now()//只能得到当前时间戳，上面两种可以得到指定时间戳
节点操作
DOM 节点：DOM树里每一个内容都称之为节点
类型
元素节点
所有的标签 比如 body、 div
html是根节点
属性节点
所有的属性 比如 href
文本节点
所有的文本
其他
查找节点
作用：根据节点关系查找目标节点
节点关系：针对的找亲戚//返回对象
父节点查找:
子元素.parentNode返回最近一级的父节点,找不到返回为null
子节点查找:
语法1
父元素.childNodes获得所有子节点、包括文本节点(空格、换行)、注释节点等
语法2
父元素.children(重点)仅获得所有元素节点
返回的是一个伪数组，选择的是亲儿子
兄弟节点查找：
语法1：
nextElementSibling//下一个兄弟节点语法2：
previousElementSibling//上一个兄弟节点
增加节点
创造节点
document.createrElement('标签名')追加节点
1.
父元素.appendChild(要插入的元素)//插入到父元素的最后面2.
父元素.insertBefore(要插入的元素，在哪个元素前面)//插入到父元素某个元素前面
eg:
const ul=document.querySelector('ul')
//创建节点
const li=document.createElement('li')
//追加节点
ul.appendChild(li)//插入到父元素的最后面
ul.insertBefore(li,ul.children[0])//放到父元素的最前面
克隆节点
复制一个原有节点
元素.cloneNode(布尔值)//布尔值默认为false(不包含后代节点和标签里面的内容)//true（包含该元素的所有）把复制的节点放入到指定元素的内部
删除节点
父元素.removeChild(要删除的元素)如果不存在父子关系则删除不成功
删除节点和隐藏节点（displayy:none）有区别的：隐藏节点还是存在的，但是删除，则从HTML中删除节点
M端事件
JS插件
熟悉官网,了解这个插件可以完成什么需求https://www.swiper.com.cn/
看在线演示,找到符合自己需求的demo https://www.swiper.com.cn/demo/index.html
查看APi文档,去配置自己的插件https://www.swiper.com.cn/api/index.html
注意:多个swiper同时使用的时候,类名需要注意区分////////////////124ing
异步编程
回调函数
事件监听
Promise
状态：
pending（进行中）
fulfilled（已成功）
rejected（已失败）
用法
实例方法
then()
then(参数1，参数2) //参数1：promise状态成功时执行的回调函数 //参数2：promise状态失败时执行的回调函数（可以不写，一般用catch方法捕获promise状态为失败的异常信息）catch()
catch(参数1) //参数1：promise状态为失败的异常信息finally()//成功与否都会执行(尚且不是正式标准)
promise的对象方法(p1,p2,p3为promise的实例对象)
Promise.all()并发处理多个异步任务，所有任务都执行完成才能得到结果
Promise.all( [p1,p2,p3] ) .then ( (result) => { console.log (result) } )Promise.race()并发处理多个异步任务，只要有一个任务完成就能得到结果
Promise.race ( [p1,p2,p3] ).then ( (result)=> { console. log (result) } )
构造函数：
let promise = new Promise( //构造函数 (resolve, reject)=> { if (/* 操作成功 */) { resolve(value); // 操作成功时调用 } else { reject(error); // 操作失败时调用 } } ) //参数1：resolve函数：设置promise状态为成功 //参数2：reject函数：设置promise状态为失败