Web APIs
一、web API 基本认知
1.作用和分类
①作用：使用JS去操作html和浏览器
②分类：DOM（文档对象模型）、BOM（浏览器对象模型）
2.什么是DOM：用来呈现以及与任意HTML或XML文档交互的API，dom是浏览器提供的一套专门用来 操作网页内容的功能，且可作为开发网页内容特效和实现用户交互 3.DOM树
①将html文档以树状结构直观的表现出来
②描述网页内容关系的名词
③作用：文档树直观的体现了标签和标签之间的关系
4.DOM对象
（1）DOM对象：浏览器根据html标签生成的对象
①所有标签的属性都可以在这个对象上面找到
②修改这个对象的属性会自动映射到标签身上
（2）把网页内容当做对象来处理（核心思想）
（3）document 对象
①是dom提供的一个对象
②它提供的属性和方法是用来访问和操作网页内容的
③网页所有内容都在document里面
二、获取DOM对象
1.目标：能查找/获取DOM对象
2.根据CSS选择器来获取DOM元素
（1）语法
document.querySelector('选择器')
//包含一个或多个有效的css选择器 字符串
//返回值：css选择器匹配的第一个元素，一个HTMLElement对象
let inputDom = document.querySelector("input"); // 找不到元素 输出 null
console.dir(inputDom);
（2）选择器匹配多个元素
document.querySelector('ul li')
// 空格 间隔
// 返回值 css选择器匹配的NodeList 对象集合
（3）获取dom小结
①想要获取页面的标签 可以通过 document.querySelector（选择器）
②querySelector 只能够获取第一个满足条件的标签
③如果选择器找不到元素 querySelector只会返回null
④如果我们想要输出和打印 dom 元素：不要再使用 console.log，改为 使用 console.dir
3.其他获取DOM元素方法
//根据id获取一个元素
document.getElementById('nav')
//根据 标签获取一类元素 获取页面 所有 div
document.getElementsByTagName('div')
//根据类名获取元素 获取页面 所有类名 w
document.getElementsByClassName('w')
<body>
<div id="nav">id选择器</div>
<p>这个是p标签</p>
<div class="container">也是div container</div>
<script>
// 根据id来获取 一个dom
// let nav = document.getElementById("nav");
// console.log(nav)
// 根据 标签名称 来获取dom元素 一组dom元素
// let ps=document.getElementsByTagName("p");
// console.log(ps);
// 根据 类名来获取元素 一组元素
// let divs = document.getElementsByClassName("container");
// console.log(divs);
//
// 常用和方便
// 获取一个
// document.querySelector("#nav")
// document.querySelector("p")
// document.querySelector(".container")
// 获取一组
// document.querySelectorAll
</script>
</body>
三、设置/修改DOM元素属性
1.目标：能够修改元素的文本更换内容
2.修改标签元素内容的方式：
①document.write() 方法
//永远都是追加的操作，只能在位置</body>前
<script>
document.write("hello world");
document.write("<h3>hello world</h3>");
</script>
②对象.innerText 属性
//innerText 将文本内容添加 更新到任意标签位置
let info =document.getElementById('info')
//intro.innerText='HI,我叫李雷' // 文本中包含的标签不会被解析
info.innerText = '<h4>HI,我叫李雷</h4>'
③对象.innerHTML 属性
// 将文本内容添加/更新到任意标签位置
//文本中包含的标签会被解析
box.innerHTML ='<h4>HI,我叫李雷</h4>'
3.案例
（1）案例---将输入的信息修改进标签内
<script>
/* 需求
1.获取输入的文字
2.填入标签中 */
let username = prompt("请输入名字");
let h2Dom = document.querySelector("h2");
// h2内文字 等于 username
// innerText 填写补充 标签内的内容
h2Dom.innerText = username;
</script>
（2）案例---随机选择并将选择结果修改至td标签内
<table border="1">
<tr>
<th>今天吃什么呢？</th>
</tr>
<tr>
<td></td>
</tr>
</table>
<script>
let food = ["喝粥", "煲仔饭", "叉烧饭", "烧鸭饭"];
function getNum(max, min) {
return Math.round(Math.random() * (max - min) + min);
}
let num = getNum(food.length - 1, 0);
tdDom = document.querySelector("td");
tdDom.innerText = food[num];
</script>
（3）案例-综合
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
// 以后就很少用了 document.write 功能弱 只能把标签写在 /body 标签上面
// document.write
document.querySelector("li:nth-child(2)").innerText =
"<button>随便修改</button> ";
document.querySelector("li:nth-child(3)").innerHTML =
"<button>随便修改</button> ";
/*
3 种实现在标签中写 动态设置文本
1 document.write 只能在body标签的中写 以后 很使用它
2 innerText 只能设置文本，不能解析 html字符串
3 innerHTML 可以设置文本 也可以解析html字符串
*/
</script>
</body>
4.设置/修改元素常用属性
（1）通过 JS 设置/修改标签元素属性，比如通过 src更换 图片，最常见的属性比如： href、title、src 等
（2）语法: 对象.属性 =属性值 对象.style.属性= 属性值
// 1.获取元素
let pic =document.querySelectpr('img')
// 2.操作元素
pic.title='这是一个图片';
pic.src='./images/1.jpg';
//元素样式修改
标签.style.color = '值'
标签.style.backgroundColor = '值' 小驼峰写法
（3）案例
// 属性修改
<body>
<img src="./images/1.png" alt="" />
<script>
let pic = ["1.png", "2.png", "3.png", "4.png", "5.png"];
let index = Math.round(Math.random() * 5);
let imgDom = document.querySelector("img");
imgDom.src = `./images/${pic[index]}`;
</script>
</body>
// 样式修改
<script>
p.style.fontSize = "26px";
p.style.color = "red";
p.style.backgrounColor = "skyblue";
/* 小结
1 标签.style.样式
2 js中不能写- 否则会判定为 减号 用小驼峰表示*/
</script>
（4）案例---背景色随机
知识点：颜色rgb(a,b,c)、函数、Math数学运算
<body>
<script>
function getBGColor(max, min) {
return Math.round(Math.random() * (max - min) + min);
}
let color1 = getBGColor(255, 0);
let color2 = getBGColor(255, 0);
let color3 = getBGColor(255, 0);
document.body.style.backgroundColor = `rgb(${color1},${color2},${color3})`;
</script>
</body>
5.操作类名className
①由于class是关键字, 所以使用className去代替
②className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名
③直接使用 className 赋值会覆盖以前的类名
<body>
<div></div>
<script>
/*
className
会先清空这个dom的元素 旧的所有的类 然后再单独添加上 新的类
如果想要同时设置多个 class 以空格做分割即可
*/
// js的方式来动态添加上这个class
let div = document.querySelector("div");
// 通过 className 来设置类名即可
// 同时设置两个类上去
div.className = "box redCls";
</script>
</body>
6.操作类名classList
①标签.classList.add（‘类名’） 追加一个类名
②标签.classList.remove（‘类名’） 删除一个类名
③标签.classList.toggle（‘类名’） 切换一个类名
<!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>
<style>
.box {
width: 100px;
height: 100px;
border: 1px solid #000;
text-align: center;
line-height: 100px;
}
.box2 {
background-color: red;
}
.box3 {
color: skyblue;
}
</style>
</head>
<body>
<div>123</div>
<script>
let div = document.querySelector("div");
// 添加一个类 add 添加多个 ''括起来，用 逗号 隔开
div.classList.add("box", "box2");
// 单独移除一个类remove
div.classList.remove("box");
// 切换类 如有 就算作移除 若 无 则 添加
div.classList.toggle("box3");
</script>
</body>
</html>
案例----背景转换(设置样式表---通过函数及Math运算，达成需求)
<!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>
<style>
.box1 {
background-image: url(./images/1.png);
}
.box2 {
background-image: url(./images/2.png);
}
.box3 {
background-image: url(./images/3.png);
}
.box4 {
background-image: url(./images/4.png);
}
.box5 {
background-image: url(./images/5.png);
}
</style>
</head>
<body>
<script>
let bgImages = ["box1", "box2", "box3", "box4", "box5"];
function getBox(max, min) {
return Math.round(Math.random() * (max - min) + min);
}
let Box = getBox(bgImages.length - 1, 0);
let body = document.querySelector("body");
body.classList.add(`${bgImages[Box]}`);
</script>
</body>
</html>
四、定时器---间歇函数
1.目标：能够说出定时器函数在开发中的使用场景，能够使用定时器函数重复执行代码
2.开启定时器
①作用：每隔一段时间调用这个函数
②间隔时间单位是毫秒
// setInterval(函数，间隔时间)
<script>
// 函数 复杂 定时执行的业务
// function repeat() {
// console.log('大数据库的骄傲')；
// }
//
// 每间隔一秒执行一次函数
// 时间单位 毫秒 1000毫秒 = 1秒
// setInterval(repeat,1000);
// 其他模样的写法
// setInterval(匿名函数,1000);
setInterval(function () {
console.log("大数据库的骄傲");
}, 1000);
</script>
3.关闭计时器
// let 变量名= setInterval(函数，间隔时间)；
// clearInterval(变量名)
<script>
// 开启了一个定时器 会返回 定时器id
// 不需要关心 这个定时器的id 等于多少， 有id
// let timeId = setInterval(function () {
// console.log('准备吃晚饭');
// }, 1000);
// // console.log(timeId);
// // 清除定时器 一般都是要根据某个条件来清除
// clearInterval(timeId);
// 追女孩子 追30次 不行 我就撤退！！
let index = 0;
// 创建定时器的同时 返回了定时器id
let timeId = setInterval(function () {
index++;
console.log("开始追了", index);
// 判断是否满足条件了
if (index === 30) {
// 放弃 没有缘分
clearInterval(timeId);
}
}, 100);
</script>
