web APIs
一、Web API 基本认知
作用和分类
作用：就是用JS去操作HTML结构和浏览器
分类：有DOM（文档对象模型） 和BOM （浏览器对象模型）
什么是DOM？
本质：全称是Document Object Model - 文档对象类型 ； 用来呈现任意HTML或者XML文件交互的API
作用：开发网页内容特效和实现用户交互
DOM树
本质：可以简单理解为将HTML结构以树状图的形式展现 也叫文档树
作用：
1.描述网页内容关系的名词
2.直观体现了标签之间的关系
DOM对象
本质：
1.简单来说就是根据HTML标签生成的JS对象，可以理解DOM和HTML一个是中文一个是英文，相同的东西语音却不同
2.所有标签属性都可以在对象上找到
3.修改对象属性，HTML标签也会修改（会自动映射到标签上）
核心思想：把网页内容当做对象看就行
document对象：
1.是DOM里提供的一个对象
2.它提供的属性和方法都是用来访问和操作网页内容的！！
3.网页所有内容都在document里
二、获取DOM对象
思考：我们想要操作某个标签首先要做什么？
先选中这个标签，和在CSS中逻辑相同，选中标签操作样式
解决：查找DOM元素就是选则页面中标签元素
1.根据CSS选则器来获取DOM元素（重点）
语法：docuemnt.querySelector("css选择器（你想获取的标签）")
<script>
/* dom 对象 是浏览器自动帮我们创建好了 */
// 如何获取到dom对象？
/* document.querySelector(`你要获取哪个dom元素？`) 写css选择器*/
let divDom=document.querySelector(`div`)
// 有两个相同div 获取的是第一个
console.log(divDom); //用 log就生成了标签结构 对象没显示 换写法
console.dir(divDom)
// 获取input
let inpDom = document.querySelector(`input`)
console.dir(inpDom)
</script>
小结:
1.获取页面中标签 dom对象 用ocument.querySelector(你要获取哪个dom元素？)
2.只能获取第一个
3.找不到元素 返回null
4.输出打印 不用log 用dir
获取DOM补充：
<script>
let user = prompt(`请输入名字`)
let h2Dom = document.querySelector(`h2`)
// 把输入的值 给 获取的h2Dom
h2Dom.innerText = user
</script>
获取多个DOM元素
语法：docuemnt.querySelectorALL("css选择器")
<script>
// 一、如果要获取第一个LI标签dom元素
let liDom = document.querySelector(`li`)
console.dir(liDom)
// 二、如果要获取所有li标签 会返回一个数组
let lis = document.querySelectorAll(`li`)
// 数组和循环搭配
for (let index = 0; index < lis.length; index++) {
lis[index].innerText=`这是li元素`+index
}
// 三、区分点
let liss=document.querySelector(`input`)
console.log(liss) // null
// document.querySelector
// 如果用获取一个标签 找得到返回 DOM元素，找不到返回null
let lisss = document.querySelectorAll(`button`)
console.log(lisss) // 空数组
// document.querySelectorAll
// 如果用获取多个标签 不管选择器写对或者写错 没有元素的话也会返回一个数组
</script>
注意点：
1.获取多个元素，返回的是数组
2.如果没有这个元素，返回空数组
其他获取DOM元素方法（旧方法 了解即可）
三、设置 / 修改DOM元素内容
作用：能用某种方式修改元素的文本 更换内容
本质：DOM对象是根据标签生成的，所以操作标签就是在操作DOM对象。
语法：
1.document.write()方法
2.对象.innerText 属性
3.对象.innerHTML 属性
<script>
document.write(`<h1>我好弱啊我都是H1了</h1>`)
document.querySelector(`li:nth-child(2)`).innerText=`<button>我是文本修改</button>?`
document.querySelector(`li:nth-child(4)`).innerHTML=`<button>我是文本和HTML修改</button>`
</script>
三种中方式 在标签中 动态设置文本 1.d.w 只能在 上写 太弱了 2.innertext 只能设置文本 不能解析HTML 3.innerHTML 可以设置文本 也能解析HTML 牛牛绝绝子
四、设置 / 修改DOM元素属性
1.设置/修改元素常用属性
概念：首先明确知道属性是什么 ，如IMG中的src 等号左边的就叫属性
语法：对象.属性 = 值
操作步骤：
1.获取元素
2.操作元素 （语法使用）
刷新随机图片案例
<script>
/* 标签上的 herf src alt 都是属性 =号
获取 标签属性操作
先获取DOM元素
调用属性 DOM.属性名*/
let arr = [`./image/wallhaven-3z32j3.jpg`,`./image/wallhaven-rdwjj7.jpg`,`./image/1097550856777bf536d359b7566fb9b5.jpg`]
let index = Math.round( Math.random()*(arr.length-1) )
console.log(arr[index])
let imgDom = document.querySelector(`img`)
imgDom.src = arr[index]
</script>
2.设置 / 修改样式属性
概念：道理都是相通的，这里也就是用JS设置修改样式（CSS）中的属性
作用：通过DOM元素动态操作CSS
语法：对象.style.样式属性 = 值
注意点：
1.修改样式 必须要有 style 引出
2.如果CSS中属性有连接符，如font-size 必须用小驼峰命名法！！！
随机修改BODY背景色案例
第一种写法
缺点：固定值 太死板
<script>
let arr = [`pink`,`red`,`yellow`,`gray`,`black`,`orange`]
let index = Math.round( Math.random()*(arr.length-1) )
console.log(arr[index])
let bodyDom = document.querySelector(`body`)
bodyDom.style.backgroundColor = arr[index]
</script>
第二种写法
思考：背景色是有一个RBG(0-255,0-255,0-522),可以随机这三个数字
<script>
// 第二种写法
// 因为多个用 封装一个函数 装随机值
function geirandom(min,max) {
return Math.round( Math.random()*(max-min)+min )
}
//给三个值用上随机数
let num1 = geirandom(0,255)
let num2 = geirandom(0,255)
let num3 = geirandom(0,255)
// BODY获取元素可以直接写 比较特殊
// document.body.style.backgroundColor `rgb(${num1},${num2},${num3})`
let bodyDom = document.querySelector(`body`)
bodyDom.style.backgroundColor =`rgb(${num1},${num2},${num3})`
</script>
通过操作类名操作CSS（第一种）
作用：如果修改样式比较多，可以通过操作类名 操作CSS样式 瞬间让某个元素拥有多样元素
语法：元素.className = ”css类名“
<style>
.box {
width: 300px;
height: 200px;
background-color: #333;
}
.box2 {
width: 800px;
height: 300px;
background-color: red;
font-size: 88px;
}
</style>
</head>
<body>
<div>123</div>
<script>
let div = document.querySelector(`div`)
div.className = `box box2`
</script>
注意点：
1.classNmae 会清空这个DOM元素旧的所有类，再添加新的类
2.同时设置多个class 直接用空格 添加即可
3.注意有层叠 后面叠前面
通过操作类名操作CSS（第二种）
作用：一样，不过相比较第一种使用更加灵活多样，很好操控
<style>
.di {
width: 100px;
}
.dt {
height: 300px;
}
.dl {
font-size: 88px;
}
.db {
background-color: pink;
}
</style>
</head>
<body>
<div>123</div>
<script>
let div = document.querySelector(`div`)
div.classList.add(`di`,`dt`,`dl`,`db`) //添加类
div.classList.remove(`db`) //指定删除
div.classList.toggle(`dl`) // 切换，如果本来就 移除，本来没有就 添加
</script>
注意点：
1.可以连写 用 “”，“”，“”，分隔
2.对于切换而言，如果写的本身有，就是移除。没有则添加
随机背景图案例
<script>
// 通过数组放图
let arr = [`./image/1097550856777bf536d359b7566fb9b5.jpg`,`./image/wallhaven-3z32j3.jpg`,`./image/wallhaven-rdwjj7.jpg`]
let index = Math.round( Math.random()*(arr.length-1) )
document.body.style.backgroundImage = `url(${arr[index]})`
// 通过数组放类名
let arr = [`d1`,`d2`,`d3`]
let index = Math.round( Math.random()*(arr.length-1) )
/* let body = document.querySelector(`body`)
body.classList.add(arr[index]) */
document.body.classList.add(arr[index])
</script>
3.设置 / 修改 表单元素 属性
作用：表单也有需要修改属性的场景，如点击眼睛，显示密码等
语法：与其他标签属性没有区别
<script>
// innerText innerHTML 设置双标签
let inp = document.querySelector(`.inp`)
let inp2 = document.querySelector(`.inp2`)
let btn = document.querySelector(`button`)
let sel = document.querySelector(`option:nth-child(4)`)
inp.value = `我的用户名`
inp2.checked = true
btn.disabled = false
sel.selected = true
</script>
总结：
1.设置输入框 .value = ``
2.按钮禁用 .disabled = true 禁用
3.设置单选复选框 .checked=true 选中
4.设置下拉 .selected=true 选中
补充-文本域标签
<script>
// innerText innerHTML 设置双标签
let ta = document.querySelector(`textarea`)
console.log(ta.value); //打印输出 这个value 获取 <h1></h1>
console.log(ta.innerText); //打印输出 这个value 获取不了
console.log(ta.innerHTML); //打印输出 这个value 获取 <h1>你好</h1> 会把标签转移解析;
// 如果要设置 都能设置
// ta.value = `<h1>改</h1>`
// ta.innerText = `<h1>改</h1>`
ta.innerHTML = `<h1>改</h1>`
//最后输出 在文本域中原样输出`<h1>改</h1>`
</script>
五、定时器-间歇函数(重要)
作用：每隔一段时间需要自动执行一段代码，不需要我们手动出发
例如：倒计时等，需要用到定时器函数
定时器函数-间歇函数
1.开启定时器
语法：setInterval(函数,间隔时间)
作用：每隔一段时间调用这个函数（单位是毫秒 1000毫秒=1秒）
2.关闭定时器
语法：
