API--DOM的各种功能演示加案例 加定时器的简单应用加案例
API：一套让我们可以直接控制页面元素的代码-功能
1.DOM的获取
就是在js里面获取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>Document</title>
</head>
<body>
<div>你大爷</div>
<!-- dom对象 是浏览器自动帮我们创建好了
1 div标签也会被 浏览器自动生成一个dom对象
2 input 标签 也会被 浏览器 自动生成一个dom对象
3 获取下 dom对象
*/
// document.querySelector("你要获取哪个dom元素呀，这个dom元素的选择器告诉我")
// document.querySelector("选择器就是指学习过css选择器")
// let divDom = document.querySelector('div');
// dom对象 应该也是 {属性名:属性值}
// console.log(divDom); // <div>div元素</div>
// console.log 如果输出的是一个 dom对象，就把标签的模样显示出来
// 我们在输出打印 dom对象的时候 不再使用 console.log , console.dir()
// console.dir(divDom); // <div>div元素</div>
// 我想要获取一下 input标签的 dom对象
let inputDom = document.querySelector('div');// 找不到元素 输出 null
console.dir(inputDom);
/*
小结
1 想要获取页面的标签 可以通过 document.querySelector(选择器)
2 querySelector 只能够获取第一个满足条件的标签
3 如果选择器找不到元素 querySelector 只会返回 null
4 如果我们想要输出和打印 dom元素
不要再使用 console.log
改为 使用 console.dir -->
<script>
let divDom = document.querySelector('div') //如果找不到该标签会显示null就是空的意思
console.dir(divDom)
</script>
</body>
</html>
2.动态获取DOM元素内容
就是在js里面灵活修改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>Document</title>
</head>
<body>
<h1>天气不错去散步</h1>
<h2>xxx</h2>
<script>
/* 1 获取 输入框输入的同学的名称
2 把名字 显示到 h2标签中
1 先获取h2标签对应的dom元素
2 使用代码修改文本内容
dom元素.innerText = "修改的内容 " */
let name = prompt('你想和谁去呢')
let nameDom = document.querySelector('h2')
// h2标签中的文字 就等于 userName
nameDom.innerText = name
</script>
</body>
</html>
3.获取多个元素内容
<!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>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<script>
/* querySelectorAll 不管你的选择器写对与否，返回值都是数组
querySelector
1 能找到 返回 dom元素 dom对象
2 找不到了 返回null
*/
// querySelector 只能获取第一个符合要求的li标签
// let li = document.querySelector('li');
// 获取所有的li标签 返回一个数组
// let lis = document.querySelectorAll('li');
// // 数组就可以和循环搭配
// for (let index = 0; index < lis.length; index++) {
// // lis[index] dom元素
// // 文本
// lis[index].innerText = `这个是li标签 ` + index;
// }
// let divs = document.querySelectorAll('div');
// console.log(divs); // 输出什么 ？ 空数组！！
// console.log(divs); // 输出什么 [ div dom元素 ] 1个元素 */
let lis = document.querySelectorAll('li') //获取所有li标签，返回一个数组
for (let index = 0; index < lis.length; index++) {
lis[index] //dom 元素
lis[index].innerText = '这是什么' + index //修改li标签内容
}
</script>
</body>
</html>
4.其他获取元素内容方式
以前那种有的固定死板，不太灵活，新的DOM灵活简单
<!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>
</head>
<body>
<div id="nav">2</div>
<div class="box">2</div>
<p>5</p>
<script>
/* <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
*/
let nav = document.getElementById('#nav')
let box = document.getElementsByClassName('.box')
let p = document.getElementsByName('p')
console.log(nav);
</script>
</body>
</html>
5.三种设置文本内容的方式
<!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>
li:nth-child()
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<script>
/* 以后就很少用了 document.write 功能弱 只能把标签写在 / body 标签上面 */
document.write() /* 第一种 */
document.querySelector('li:nth-child(2)').innerText = '<button>55</button>' /* 第二种 */
document.querySelector('li:nth-child(3)').innerHTML = '<button>55</button>' /* 第三种 */
/* 3 种实现在标签中写 动态设置文本
1 document.write 只能在body标签的中写 以后 很使用它
2 innerText 只能设置文本，不能解析 html字符串
3 innerHTML 可以设置文本 也可以解析html字符串 */
</script>
</body>
</html>
6.DOM-元素属性修改
就是通过dom获得元素属性进行修改，写法如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>12-dom元素-属性.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">跳转到</a>
<img src="./images/1.jpg" title="有惊喜" alt="" />
<p id="nav"></p>
<input type="text" />
<button type="button"></button>
<h1 class="dfdf"></h1>
<script>
/*
a 标签身上的 href 图片 src alt id type class 属性
1 获取标签对应的dom元素
2 dom.属性名=属性值
*/
// let aDom = document.querySelector('a');
// 修改a标签的属性
// aDom.href = 'https://www.processon.com/mindmap/623c471107912906f5184873';
let imgDom = document.querySelector("img");
// 修改图片的src
imgDom.src = "./images/2.jpg";
// 动态修改 title属性
imgDom.title = "你妈妈叫你回去吃饭";
</script>
</body>
</html>
6-1修改表单属性
属性单词还是HTML那些，不过现在就通过js来限制修改
<select><option></option></select>:两个配合做出下拉菜单，在你想要的行内加上selected为默认选定
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>04-表单属性设置.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<input type="text" class="username" />
是否同意协定
<input type="checkbox" class="isarg" checked />
<button class="code" disabled>发送验证码</button>
<select class="sel">
<option>去泰国</option>
<option>去非洲</option>
<option>去印度</option>
<option>去啊富汗</option>
</select>
<script>
/*
innerText innerHTML 主要是用来设置 双标签的文本内容的
*/
// 获取一下表单 dom元素
let username = document.querySelector('.username');
// 复选框
let isarg = document.querySelector('.isarg');
// 按钮
let code = document.querySelector('.code');
// 设置文本内容
// username.innerText = '我的用户名';
// 设置输入框的文本内容
username.value = '我的用户名';
// 设置勾选上
// isarg.checked = true;
// 不勾选
// isarg.checked = false;
// 设置按钮 可以启用 可以点击
// disabled 禁用
// code.disabled = true;// 禁用
code.disabled = false; // 启用
// select 选中
let option = document.querySelector('option:nth-child(4)');
// option.select = true; // 错误的单词
option.selected = true; // 正确的单词
// checked disabled selected
/*
表单属性的总结
1 设置普通的输入框 input.value ="表单的值"
2 设置 按钮的禁用
button.disabled=true 禁用
button.disabled=false 启用
3 设置单选框或者复选框
radio.checked=true 选中
checkbox.checked=false 取消选中
4 设置下拉列表 select
option.selected=true 选中
5 文本域标签 有点点特殊 ！ 下一节课再来讲解
*/
</script>
</body>
</html>
6-2文本域的介绍和用法
<!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>
</head>
<body>
<textarea>
<h1>55</h1>
</textarea>
<script>
/* // 获取 文本域标签
// 属于表单元素 又是双标签
let textarea = document.querySelector('textarea');
// 在html想要设置 文本域的内容 直接在标签内写即可
// <textarea> 你好 </textarea>
// 获取文本域中的值
// console.log(textarea.value); // 获取 OK <h1>你好</h1>
// console.log(textarea.innerText); // 获取 不OK
// console.log(textarea.innerHTML); // 获取 OK <h1>你好</h1>
// value 有区别 innerHTML
// 设置 textarea 里面文本的内容的时候
// 可以选择 在标签内写文本即可
// 想要获取 内容
// .value 原样获取内容
// .innerHTML 获取的内容如果包含html 会转移
// 通过js的方式来设置内容
// textarea.value=`<h1>标题</h1>`; // ok
// textarea.innerText=`<h1>标题</h1>`; // ok
// textarea.innerHTML=`<h1>标题</h1>`; // ok */
let textarea = document.querySelector('textarea')
// textarea.value = '你好'
// textarea.innerHTML = '你好'
// textarea.innerText = '你好'
console.log(textarea.value);
</script>
</body>
</html>
7.DOM修改样式
可以理解为修改css那种样式，差不多，写法如下
<!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>
</head>
<body>
<div>看什么</div>
<script>
//dom修改样式的写法
let dic = document.querySelector('div')
dic.style.width = '500px'
dic.style.height = '500px'
dic.style.backgroundColor = 'red'
dic.style.fontSize = '50px'
dic.style.margin = '100px auto'
</script>
</body>
</html>
8.DOM-className
会先清空这个dom的元素 旧的所有的类 然后再单独添加上 新的类
<!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: 500px;
height: 500px;
background-color: skyblue;
margin: 100px auto;
}
.red {
width: 500px;
height: 500px;
background-color: red;
margin: 100px auto;
}
</style>
</head>
<body>
<!-- <script>
/*
className
会先清空这个dom的元素 旧的所有的类 然后再单独添加上 新的类
如果想要同时设置多个 class 以空格做分割即可
*/
// js的方式来动态添加上这个class
let div = document.querySelector('div');
// 通过 className 来设置类名即可
// 同时设置两个类上去
div.className = 'box redCls';
</script> -->
<div class="red"></div>
<script>
let div = document.querySelector('div')
div.className = 'box ' // 同时设置两个类上去,空格隔开即可
div.classList
</script>
</body>
</html>
9.DOM-classList
(1)classList.add:增加一个或者几个类名，逗号隔开
（2）classList.remove：删除一个或者删除几个类名，逗号隔开
（3）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>
.d1 {
width: 200px;
height: 200px;
margin: 0 auto;
background-color: skyblue;
}
.d2 {
width: 200px;
height: 200px;
background-color: red;
}
.d3 {
width: 200px;
height: 200px;
background-color: red;
}
.d4 {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="d4"></div>
<script>
/* 添加一个class
let div = document.querySelector('div');
// div.className="d2";
// classList 添加一个类
div.classList.add("d2","d3","d4");
// div.classList.add("d2");
// div.classList.add('d3');
// 单独来指定移除一个class
div.classList.remove("d2","d3")
// 切换 （如果本来有，那我就移除 ， 如果本来没有，那我就添加）
div.classList.toggle("d4") */
let div = document.querySelector('div')
//增加一个或者几个，逗号隔开
div.classList.add('d1');
//删除一个或者删除几个，逗号隔开
div.classList.remove('d1')
// 覆盖一个或者增加一个，有就覆盖，没有就增加
div.classList.toggle('d3')
</script>
</body>
</html>
定时器
1.定时器的基本使用
setInterval：定时器的两大要素，函数加时间（函数里面不用加括号），时间单位是毫秒（1000毫秒等于1秒）
<!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>
</head>
<body>
<script>
// 定时器的两大要素，函数加时间（函数里面不用加括号），时间单位是毫秒（1000毫秒等于1秒）
// function fun() {
// document.write('你好帅')
// document.write('<br>')
// }
// setInterval(fun, 1000)
// 匿名函数加秒数写法
setInterval(function () {
document.write('你好帅')
document.write('<br>')
}, 1000)
</script>
</body>
</html>
2.清除定时器
clearInterval:清除定时器 一般都是要根据某个条件来清除,例如 if 判断那些，条件达到就会清除掉计时器，让它不再计时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>20-清除定时器.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<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>
</body>
</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>Document</title>
</head>
<body>
<script>
let y = 60
let x = setInterval(function () {
document.write(`真的好帅呀${y}`)
document.write('<br>')
y--
if (y === 0) {
// clearInterval(x)
y = 60
}
}, 100)
</script>
</body>
</html>
案例-轮播图
就是简单的定时器加DOM属性修改，还不算真的轮播图
<!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>
</head>
<body>
<img src="./img/b01.jpg" alt="">
<script>
let y = 1
let x = setInterval(function () {
//思路就是将计时器和修改属性结合一起，生成一秒变一次的效果
let imgs = document.querySelector('img')
imgs.src = `./img/b0${y}.jpg`
y++
if (y === 10) {
y = 0
}
}, 1000)
</script>
</body>
</html>
案例-定时器可以点击加快的bug优化
<!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>
</head>
<body>
<h1></h1>
<button class="btn1">开始随机点名</button>
<button class="btn2">结束点名</button>
<script>
/*
优化
1 把数组的定义 提取到外面
2 如果定时器中业务比较繁琐 也可以提取出去到单独函数中 不是必须
3 bug 点击多次 开始抽奖 ，后面无法停止定时器
在我们行业中 有专业的术语 节流！！
让我们的顺序 一一个的执行 一次一次的执行 不要同时执行多个
在一个定时器没有执行结束的时候 不让开启另外一个定时器
一个班级的人 都想去上厕所 ！！
你想要去上厕所的时候
1 先看一下里面有没有人
2 有人了 我就不去
3 没有人 我进去了 会把门关上
4 解决完毕了 出去同时把门打开
4 如何解决 点击多次按钮 后面停止定时器的bug n种解法
1 在开启定时器的时候 我直接禁用了button 不让它再次点击
在清除定时器 重新启用按钮即可
2 在每一次开启定时器的之前，都停止一次定时器
5 同学思考
是否可以理解 老师说 你的案例写不够多的时候 不可能一写就写出来 简洁的代码
1 给时间你去练习 先自己写一写 感受一下 （写出来 写不出来 无所谓 ）
2 到老师开始讲解案例
1 吸收老师写案例的 思路、代码编写顺序、习惯、 业务逻辑
2 当场就理解老师的案例 （不够清晰、不够熟练）
3 晚自习或者休息天 时候 继续 巩固使用 熟悉它
*/
let btn1 = document.querySelector('.btn1');
let btn2 = document.querySelector('.btn2');
let h1 = document.querySelector('h1');
let arr = ['张飞', '赵云', '刘备', '吕布', '刘婵'];
let timeId;
// 定时器要执行的业务逻辑
function intervalDo() {
let index = Math.round(Math.random() * (arr.length - 1));
h1.innerText = arr[index];
// return undefined
}
btn1.addEventListener('click', function () {
// 先停止定时器 第一次清除 定时器的时候 timeId 是undefined
// if (timeId) {
if (timeId !== undefined) {
// timeId = 是 undefined => bool 是false
// 当timeId = undefined =false 不满足条件 不会执行 清除了
//解决可以点击开始按钮一直加快的第一种方法，就是将每个按钮添加 DOM名字.disabled = true禁止 DOM名 字.disabled = false 不禁止
//解决可以点击开始按钮一直加快的第二种方法，就是把清除计时器的代码复制一份到开始上面，让它先接受点击的值
clearInterval(timeId);
}
// 禁用按钮 不让再次点击
// btn1.disabled = true;
timeId = setInterval(intervalDo, 100);
console.log('开启定时器', timeId);
});
btn2.addEventListener('click', function () {
// 重新启用 开始按钮
// btn1.disabled = false;
clearInterval(timeId);
});
</script>
</body>
</html>
