一.webApi基本认知
使用js去操作html和浏览器
分类：BOM（浏览器对象模型）和DOM(文档对象模型)
DOM：操作网页内容做交互效果的开发网页特效的
Dom树（文档树）作用：文档数直观的体现了标签和标签之间的关系
DOM对象：通过js拿过来就是用对象的形式来存储的（所有它提供的属性和方法都是用来访问和操作网页的）
二.获取DOM元素 -根据css选择器获取DOM元素（字符串记得加引号）
1.document.querySelector('div')
只能得到一个元素。可以直接操作
2.document.querySelectorAll('ul li')
选择匹配的多个元素 querySelectorAll不能直接修改，用遍历的方式一次给里面的元素修改 （想要得到里面的每一个对象，需要遍历（for）获得里面的DOM对象） 哪怕一个元素用 querySelectorAll得到的都是伪数组
三.修改DOM元素内容
-能够修改元素的文本更换内容
1.获取标签
let div= document.querySelector('div')
2.修改标签(等号赋值)
div.innerText = '帅哥'
元素.innerText=' '只识别标签 不能解析便签 元素.innerText=' '能够解析标签
-能够修改元素的属性
1.获取
let div= document.querySelector('div')
2.修改元素常用属性src
pic.src=' 链接 '
pic.title=' 修改的内容'
-修改样式属性 --.通过style控制样式属性操作
对象.style.样式属性=值
（有连接符自动改成小驼峰写法 赋值的时候不要忘记加单位 ）
2.样式多
通过类名进行操作
元素.ClassName=' 类名'
等号是赋值（不想覆盖的是时候）
元素.ClassName=' 以前的类名 现在想添加的类名'
追加一个类
元素.ClassList.add('类名')
删除一个类
元素.ClassList.remove('类名')
切换一个类
元素.ClassList.toggle('类名')
修改元素的表单属性
（表单很多情况需要修改属性，比如点击眼睛可以看见密码 本质是把表单类型转换为文本框）
表单.value='用户名'
表单.type='password'
1.获取元素 2.取值或者设置值
控制禁用或者启用(ture or false)
btn.disabled=false
勾选复选框
checkbox.checked=false
随机点名小案例
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/reset.css">
<style>
div {
display: inline-block;
border: 1px solid #333;
width: 100px;
height: 50px;
line-height: 50px;
}
</style>
</head>
<body>
抽中的选手
<div></div>
</body>
<script>
// 随机数
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min
}
// 声明一个数组
let arr = ['欧文', '库里', '克莱', '威少', '詹姆斯', '乔治', '伦纳德', '莫兰特', '利拉德', '浓眉哥']
// 生成随机数作为数组的索引号
let random = getRandom(0, arr.length - 1)
// 写入标签内部
// document.write(arr[random])
document.getElementsByTagName('div')[0].innerHTML = arr[random]
// div.innerHTML = arr[random]
// 之后删除这个人的名字
// arr.splice从哪里开始删 删几个
arr.splice(random, 1)
// console.log(arr)
</script>
</html>
```
随机图片小案例（修改图片属性）
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>api</title>
<style>
div {
width: 500px;
margin: 100 auto;
background-color: pink;
border: 1px solid #333;
height: 500px;
}
img {
margin: 150px 100px;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<img class="pic" src="../img/kyrie5.png" alt="">
<script>
// 获取图片元素
let pic = document.querySelector('img')
// 修改元素属性
// 随机得到图片序号
// 完成src 属性赋值
// 随机数
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min
}
let num = getRandom(5, 10)
pic.src = `../img/kyrie${num}.png`
</script>
</body>
</html>
三.定时器-间歇函数
作用：根据时间自动重复执行某些代码
定时器函数可以开启和关闭定时器
setInterval（函数，间隔时间）
作用每隔多少时间调用这个函数
另外一种写法
function show(){
方法
}
let timer= setInterval（show，1000）
返回非0的数值
关闭定时器（清除定时器）
clearInterval(变量名)
例如：
clearInterval(timer)
阅读协议倒计时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>按钮60秒后才可以使用</title>
</head>
<body>
<textarea name="" id="" cols="30" rows="10">
尊敬的客户，欢迎您注册成为本网站用户。在注册前请您仔细阅读如下服务条款：
本服务协议双方为本网站与本网站客户，本服务协议具有合同效力。您确认本服务协议后，本服务协议即在您和本网站之间产生法律效力。请您务必在注册之前认真阅读全部服务协议内容，如有任何疑问，可向本网站咨询。 无论您事实上是否在注册之前认真阅读了本服务协议，只要您点击协议正本下方的"注册"按钮并按照本网站注册程序成功注册为用户，您的行为仍然表示您同意并签署了本服务协议。
协议细则
1、本网站服务条款的确认和接纳
本网站各项服务的所有权和运作权归本网站拥有。
2、用户必须：
(1)自行配备上网的所需设备， 包括个人电脑、调制解调器或其他必备上网装置。
(2)自行负担个人上网所支付的与此服务有关的电话费用、 网络费用。
3、用户在本网站平台上不得发布下列违法信息：
(1)反对宪法所确定的基本原则的；
(2)危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的；
(3)损害国家荣誉和利益的；
(4)煽动民族仇恨、民族歧视，破坏民族团结的；
(5)破坏国家宗教政策，宣扬邪教和封建迷信的；
(6)散布谣言，扰乱社会秩序，破坏社会稳定的；
(7)散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的；
(8)侮辱或者诽谤他人，侵害他人合法权益的；
(9)含有法律、行政法规禁止的其他内容的。
</textarea>
<br>
<button class="btn" disabled>
我已经阅读用户协议（6）
</button>
</body>
<script>
// 获取元素
let btn = document.querySelector('.btn')
// 计算逻辑
// 需要一个变量计数
let i = 6
// 开启定时器，间歇函数
let timer = setInterval(function() {
i--
btn.innerHTML = `我已经阅读用户协议(${i})`
if (i === 0) {
// 清除定时器
clearInterval(timer)
// 开启按钮
btn.disabled = false
btn.innerHTML = '我同意该协议'
}
}, 1000)
</script>
</html>
