DOM获取元素
Web-API基本认知
const优先使用
原因：
- 语义化更好
- 不会被更改
作用和分类
作用：就是使用JS去操作html和浏览器
分类：DOM（文档对象模型）、BOM（浏览器对象模型）
什么是DOM
- DOM(document Object MOdel)是用来呈现以及与任意HTML或XML文档交互的API
- 白话文：DOM是浏览器提供的一套专门用来操作网页内容的功能
- 作用：开发网页内容特效和实现用户交互
DOM树
- 将HTML文档以树状结构直观表现出来
- 描述网页内容关系的名词
- 作用：文档树直观体现出标签与标签之间的关系
DOM对象
- DOM对象：浏览器根据html标签生成的JS对象
- 所有的标签属性都可以在这个对象上面找到
- 修改这个对象的属性会自动映射到标签上
- DOM的核心思想：把网页内容当成对象处理
- document.write对象
- 是DOM里提供的一个对象
- 用来访问和操作网页内容
- 网页所有内容都在document内容里
拓展
console.log()：直接显示内容
console.dir():展示对象的完整结构、属性、原型链
获取DOM对象
- 根据CSS选择器方式获取
- 获取一个
获取匹配的第一个元素
js
document.querySelector()- 获取多个
js
document.querySelectorAll()得到一个伪数组：没有数组方法
如须获得里面的每个对象，需使用for循环
- 其他方式
操作元素内容
方式：
- 对象.innerText属性:不解析标签
- 对象.innerHTML属性:解析标签
操作元素属性
修改元素常用属性
href、title、src等
语法：对象.属性 = 值
修改元素样式属性
- 通过style属性操作CSS
语法：
js
box.style.属性 = ''- 通过类名修改样式
- 语法：
js
元素.className = 'active'- 注意：className是用新值换旧值，如果需要添加一个类，需要保持之前的类名
- 通过classList修改样式
为了解决className容易覆盖以前的类名，可以通过classList方式追加和删除类名
语法：
元素.classList.add('类名')
元素.classList.remove('类名')
元素.classList.toggle('类名') 切换
- className 和 classList的q区别：
修改大量样式的时候方便
修改不多样式的时候方便
classLiat是追加和删除不影响以前的类名
操作表单元素属性
- 获取：DOM对象.属性名
- 设置：DOM对象.属性名 = 新值
- 表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示，如果为true代表添加该属性，否则为移除
- disabled、checked、selscted
H5自定义属性
- 标准属性：标签天生自带的属性，可以直接使用点语法操作
- 自定义属性：
- 在html5中堆出来了专门的data-自定义属性
- 在DOM对象上一律以dataset对象方式获取
- 一律以data-开头
定时器-间歇函数
- 每隔一段时间需要自动执行一段代码，无需手动触发
- 定时器函数有两种：间歇函数，
开启定时器：setInterval(函数，间隔时间)
关闭定时器：clearInterval(变量名)
事件监听
事件：事件是在编程时系统内发生的动作或者发生的事情
事件监听：有事件触发，则立即调用一个函数做出响应，也称绑定事件或注册事件
- 语法：元素对象.addEventListener('事件类型',执行函数)
- 三要素：
- 事件源
- 事件类型
- 事件调用的函数
事件监听版本
事件类型
- 鼠标事件 **right.click()**自动调用点击事件
- click 鼠标点击
- mouseenter 鼠标经过
- mouseleave 鼠标离开
- 焦点事件
- focus 获取光标
- blur 失去焦点
- 键盘事件
- keydown 键盘按下触发
- keyup 键盘抬起触发
- 文本事件
- input 用户输入
事件对象
获取事件对象
语法：如何获取
在事件绑定的函数的第一个参数就是
常见事件对象属性
环境对象
指的是函数内部特殊的变量this，代表所处的环境
谁调用，this就是谁
回调函数
- 如果将函数A作为参数传递给函数B，我们称A为回调函数
如：定时器、绑定事件 - 使用匿名函数作为回调函数比较常见
DOM事件进阶
事件流
事件流值的是时间完整执行过程的流动路径
两个阶段：捕获阶段、冒泡阶段
事件捕获
从大到小、从外到内
- 事件捕获概念：从DOM的根元素开始去执行对应事件
- 事件捕获需要写对应代码才能看到效果
- 代码：
js
DOM.addEventListener(事件类型,事件处理函数,是否使用捕获机制)- 说明：
- addEventListener第三个参数传入true代表捕获阶段触发
- 若传入false代表冒泡阶段触发
- 若使用L0监听，只有冒泡阶段
事件冒泡
从小到大、从里到外
- 当一个元素触发事件后，会依次向上调用所有父级元素的同名事件
- 事件冒泡是默认存在的
阻止冒泡
导致事件影响到父级元素
前提：拿到事件对象
语法：
js
事件对象.stopPropagation()阻止流动传播
解绑事件
on事件方式，直接使用null覆盖就可以实现事件解绑
匿名函数无法被解绑
L0语法：
js
btn.onclick = function() {
alert('')
}
btn.onclick = nullL2语法：
js
const btn = document.querySelector('button')
function fn() {
alert('点击了')
}
btn.addEventListener('click', fn)
btn.removeEventListener('click', fn)鼠标经过事件的区别
mouseover、mouseenter、mouseleave、mouseout
- mouseover、mouseout会有事件冒泡
- mouseenter、mouseleave没有
事件委托
利用事件流的特征解决一些开发需求的知识技巧
优点：减少在注册次数，提高程序性能
原理：利用事件冒泡
- 给父元素注册事件，当触发子元素，会冒泡到父元素
- 找到真正出发的元素：e.target.tagName = ''
阻止默认行为
如：链接跳转、表单域跳转
事件对象.preventDefault()
html
<body>
<form action="">
<input type="text" value="免费注册">
</form>
<script>
const form = document.querySelector('form')
form.addEventListener('submit', function (e) {
e.preventDefault()
})
</script>
</body>其它事件
页面加载事件
- 加载外部资源加载完毕时触发的事件
- 原因：
- 需要等页面资源全部处理完了做一些事情
- 老代码喜欢吧script写在head中，这是直接找dom元素找不到
- 事件名：load
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.addEventListener('load', function () {
const btn = document.querySelector('button')
btn.addEventListener('click', function () {
alert(11)
})
})
</script>
</head>
<body>
<button>点击</button>
</body>
</html>- 不仅可以监视整个页面，也可而已针对某个资源绑定
- DOMContentLoaded 给document添加，运行更快
元素滚动事件
- 滚动条在滚动的时候持续触发
- 应用场景： 固定导航栏、返回顶部
- 事件名：scroll
- 监听整个页面滚动：
js
window.addEventListener('scroll', function () {
console.log(我滚了);
})-
获取位置
scrollLeft和scrollTop
-
拓展-获取html的写法 document.documentElement
-
scrollTo()
页面尺寸事件
- 会在窗口改变时触发
- 事件名： resize
- 获取元素宽高：client家族
元素尺寸与位置
尺寸
- 获取宽高
- 获取元素的自身宽高、包含元素自身设置的宽高、padding、border
- offsetWidth、offsetHeight
- 获取出来的是数值
- 获取的是可视宽高、若隐藏则为0
- 获取位置
距离最近得有定位元素的父盒子的位置
- offsetLeft、offsetTop
- element.getBoundingClientRect() 返回元素的大小及其相对于视口的位置
总结
日期对象
用来表示时间的对象
作用：可以获得当前系统时间
实例化
使用new关键字都称为实例化
js
const date = new Date()
console.log(date);时间对象方法
date.toLocalString() 直接返回时间
时间戳
- 使用场景：计算倒计时效果，无法直接计算，需要借助时间戳
- 定义：是指时间的毫秒数，是一种特殊的计算时间的方法
- 算法：
- 将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数
- 剩余时间毫秒数 转换为剩余时间 的年月日时分秒就是倒计时时间
获取时间戳的三种方法
- getTime()
实例化，可以返回当前时间
js
const date = new Date()
console.log(date.getTime());- +new Date()
无需实例化，可以返回当前时间
js
console.log(+new Date());- Date.now()
无需实例化，不能返回当前时间
js
console.log(Date.now());节点操作
DOM节点
- 定义：DOM树里每一个内容都称之为节点
- 节点类型：
- 元素节点：所有的标签、html是根节点
- 属性节点：所有的属性
- 文本节点：所有的文本
- 其他：
查找结点
节点关系：针对的找亲戚返回的都是对象
- 父节点：parentNode属性 最近一级的父盒子
- 子节点: childern属性 选择最近一级的子元素
- 兄弟节点：
下一个兄弟节点：nextElementSibling属性
上一个兄弟节点：previousElementSibling属性
增加节点
- 一般我们新增节点，有如下操作：
- 创建新节点
- 把新节点放入指定元素内部
-
创建节点
方法：'document.creatElement()'
-
追加节点
-
插入到父元素的最后一个子元素
'父元素.appendChild(要插入的元素)'
-
插入到父元素中某个子元素的前面
'父元素.insertBefore(要插入的元素，在那个元素前面)'
- 克隆节点
复制一个原有的节点，并放入指定元素内部
元素.cloneNode(布尔值)
- 布尔值为true，则会包含后代节点一起克隆
- 若为false，则不包含后代节点
- 默认为false
浅克隆：只克隆标签
删除节点
- 要删除节点必须通过父元素
- 父元素.removeChild(要删除的元素)
- 如果不存在父子关系则删除不成功
- 删除节点与隐藏节点有区别：隐藏节点仍存在，但删除节点则从html中删除
M端事件
触屏事件：touch
JS插件
swiper插件
BOM
Window对象
浏览对象模型-BOM
BoM在整个浏览器，BOM包含DOM
定时器-延时函数
-
延迟函数：setTimeout(回调函数，时间)
-
仅执行一次
-
清除延迟函数：clearTimeout()
-
间歇函数与延时函数区别：
延时函数执行一次
间歇函数多次执行
JS执行机制
-
JS的一大特点为单线程，同一时间只能做一件事，如果JS执行过程太长，回造成页面渲染不连贯，导致页面加载阻塞
-
为解决这一问题，JS出现同步和异步
-
同步：程序执行顺序与任务排列顺序一致
-
异步：同时执行其他人物
-
同步任务与异步人物
-
先执行执行栈中的同步任务，异步任务放入任务队列，一旦同步任务执行完毕，系统会依次读取异步任务，称为事件循环（event loop）
location对象
- 拆分并保存URL地址
- href属性 location.href可以跳转页面
- search属性 获取地址中携带的参数，符号？后面部分
- reload方法 刷新当前页面 true强制刷新
- hash属性 获取地址中的啥希值，符号# 后面部分
navigator对象
- 记录了浏览器自身的相关信息
- userAgent记录浏览器的版本以及平台
history对象
- 主要管理历史记录，如前进、后退、历史记录
- 常见属性和方法：
本地存储
本地存储介绍
- 数据存储在用户浏览器中
- 设置、读取方便，页面刷新也不会丢失数据
- 容量大
- 只能存储字符串数据类型
本地存储分类-localStorage
- 作用：将数据永久存储在本地，除非手动删除
- 语法：
- 存储数据：localStorage.setUtem(key,value)
- 获取数据：localStorage.getItem(key)
- 删除数据：localStorage.removeItem(key)
- 修改数据：localStorage.setItem(key1,key2)
本地存储分类-sessionStorage
- 特征：
- 生命周期为关闭浏览器窗口
- 以键值对的方式存储
- 在同一个窗口下数据可以共享
- 用法跟localStorage基本相同
存储复杂数据类型
- 将复杂数据类型转换为字符串
- JSON.stringify(复杂数据类型) / 深拷贝方法
html
<script>
const obj = {
uname: 'pink老师',
age: 18,
gender: '女'
}
localStorage.setItem('obj', JSON.stringify(obj))
</script>- 将JSON字符串转换为对象
- JSON.parse()
html
<script>
const str = localStorage.getItem('obj')
console.log(JSON.parse(str))
</script>map和join方法 字符串拼接方法
map方法
- 使用场景：遍历数组处理数据，返回新数组
- 语法：
js
const arr = ['red', 'green', 'blue']
const newArr = arr.map(function (ele, index) {
return ele + '颜色'
})
console.log(newArr)join方法
- 作用：用于把数组中的所有元素转换为一个字符串
- 语法：
js
console.log(newArr.join()) //有逗号分隔
console.log(newArr.join(''))//无分隔符正则表达式 字面量：//
介绍
- 正则表达式用于匹配字符串中字符组合的模式，正则表达式也是对象
- 许多语言都具有正则表达式
- 应用场景：
- 例如验证表单：用户名表单只能输入英文字母、数字或者下划线，昵称输入框可以输入中文
- 可以过滤掉页面内容中的敏感词，或从字符串中获取特定部分
语法
- 定义规则
const 变量名 = /表达式/
返回的是true/false
- 根据规则查找
- test() 方法
html
<script>
const str = '我们一起学前端'
const reg = /前端/
console.log(reg.test(str));
</script>- exec() 方法
返回的是一个数组，否则为null
元字符
一些具有特殊含义的字符，可以极大提高灵活性和匹配功能
如：26个英文字母 [a-z]
- 分类：
- 边界符（表示位置，开头和结尾，用什么开头，用什么结尾）
^ 以什么开头
& 以什么结尾
js
console.log(/哈/.test('哈哈'))
console.log(/^哈/.test('哈哈'))
console.log(/^哈/.test('二哈'))
console.log(/哈$/.test('哈哈'))
console.log(/^哈$/.test('哈哈'))//这种为false
console.log(/^哈$/.test('哈')) //这种情况为true- 量词(表示重复次数)
*类似 >=0
+类似 >=1
? 0或1
{n} 写几就必须出现几次
{n,} >= n
{n,m} 大于等于n小于等于m
- 字符类(比如/d或 0~9)
\] 匹配字符集合 只能选一个 \[\]里加上-连字符 使用连字符-表示一个范围 ```js console.log(/[a-z]/.test('c')) console.log(/^[1-9][0-9]{4,}/.test('917754904')) ``` \[\]里加\^取反符号 预定义：常见模式的简写方式  ### 修饰符 约束正则执行的某些细节行为，如区分大小写、是否支持多行匹配 /表达式/修饰符 1. i忽略大小写 2. g匹配所有正则表达式，全局查找 3. replace 替换 ```html ``` ## 案例展示 ### 年会抽奖 ```html
一等奖：
二等奖：
三等奖：
新增成员
就业榜
| 学号 | 姓名 | 年龄 | 性别 | 薪资 | 就业城市 | 操作 |
|---|
新增成员
学生就业信息表
| ID | 姓名 | 年龄 | 性别 | 薪资 | 就业城市 | 录入时间 | 操作 |
|---|