01-JS-web API-dom对象-修改dom元素-定时器
1 web API基本认知
1 web API 概念
是一套可以我们直接操作页面元素的代码-功能
1.Web APIs 是 W3C 组织的标准
2.API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。
3.简单理解： API 是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。
比如手机充电的接口：我们要实现充电这个功能：
1.我们不关心手机内部变压器，内部怎么存储电等
2.我们不关心这个充电线怎么制作的
4.我们只知道，我们拿着充电线插进充电接口就可以充电
5.这个充电接口就是一个 API
4.Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。
5.MDN 详细 API : developer.mozilla.org/zh-CN/docs/…
6.因为 Web API 很多，所以我们将这个阶段称为 Web APIs
作用: 就是使用 JS 去操作 html 和浏览器
分类：DOM (文档对象模型)、BOM（浏览器对象模型）
2 什么是 Dom ?
1 DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API
2 白话文：DOM是浏览器提供的一套专门用来 操作网页内容 的功能
3 作用: 开发网页内容特效和实现用户交互
3什么是 Dom 树?
1 将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树
2 描述网页内容关系的名词
3 作用：文档树直观的体现了标签与标签之间的关系
4 Dom对象
DOM对象：浏览器根据html标签生成的 JS对象
dom对象 是浏览器自动帮我们创建好了
1 所有的标签属性都可以在这个对象上面找到
2 修改这个对象的属性会自动映射到标签身上
DOM的核心思想 : 把网页内容当做对象来处理
2 获取Dom对象(元素)
我们想要操作某个标签首先做什么？
肯定首先选中这个标签，跟 CSS选择器类似，选中标签才能操作
查找元素DOM元素就是选择页面中标签元素
1 单个标签接收语法:(document.querySelector)
CSS选择器匹配的第一个元素,一个 HTMLElement对象。
如果没有匹配到，则返回null。
document.querySelector('CSS选择器')
声明一个变量接收
let divDom = document.querySelector('div');
2 数组接收语法:(document.querySelectorAll)
document.querySelectorAll ('CSS选择器')
1 得到的是一个伪数组：
2 有长度有索引号的数组
3 但是没有 pop() push() 等数组方法
如果没有匹配到,则返回 空 数组
注意:
哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个伪数组，哪怕里面只有一个元素而已
声明一个变量接收 接收的是 数组
let lis = document.querySelectorAll('li');
// // 数组就可以和循环搭配
for (let index = 0; index < lis.length; index++) {
// lis[index] dom元素
// 文本
lis[index].innerText = `这个是li标签 ` + index;
}
3 了解-不常用(获取DOM元素)
1 根据ID 来获取 一个dom元素
// 根据ID 来获取 一个dom元素
let nav=document.getElementById('nav')
console.log(nav);
2 根据 标签名称 来获取dom元素 一组dom元素
//获取多个P,组成数组,再遍历输出
let ps=document.getElementsByTagName('p')
console.log(ps);
3 根据 类名 来获取元素 一组元素
//获取多个 container 类名的元素 成数组,再遍历输出
let divs=document.getElementsByClassName('container')
console.log(divs);
3 动态修改DOM 文本-CSS样式
DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象。
如果想要修改标签元素的里面的内容，则可以使用如下几种方式：
3 种实现在标签中写 动态设置文本
1 document.write 只能在body标签的中写 以后 很少使用它
2 innerText 只能设置文本，不能解析 html字符串
3 innerHTML 可以设置文本 也可以解析html字符串
<script>
// 以后很少用了 ,功能弱,只能把标签写在</body>标签上面
document.write('<h1>我是h1标签</h1>')
// 常用 能修改标签内的 文字 但是不能解析 HTML 字符串
document.querySelector('li:nth-child(2)').innerText='<h2>我是h2</h2>'
// 常用 可以设置文本内容 也可以 解析 HTML 字符串
document.querySelector('li:nth-child(4)').innerHTML='<h2>我也是h2</h2>'
</script>
-
document.write() 方法
只能将文本内容追加到 前面的位置
文本中包含的标签会被解析
//追加的标签只能在</body>前,其他标签后面 document.write('<h2>你好</h2>') -
对象.innerText 属性
将文本内容添加/更新到任意标签位置
文本中包含的标签不会被解
document.write('<h2>你好</h2>')//标签不生效,当文字显示出来 -
对象.innerHTML 属性
将文本内容添加/更新到任意标签位置
文本中包含的标签会被解析
box.innerHTML=`<h3>我头发多啊</h3>`
设置元素的样式
1 通过 style 属性操作CSS
div.style. 属性名 = '属性值 ' 注意属性值要用冒号包裹 数字后面要加单位
1 修改样式通过style属性引出
2 如果属性有-连接符，需要转换为小驼峰命名法
3 赋值的时候，需要的时候不要忘记加css单位
<div>我是div</div>
<script>
let div=document.querySelector('div')
div.style.fontSize='100px'
div.style.color='red'
div.style.backgroundColor='yellow'
div.style.height='300px'
div.style.width='600px'
div.style.textAlign='center'
div.style.marginTop='100px'
</script>
2 操作类名(className) 操作CSS
如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。
1 由于class是关键字, 所以使用className去代替
2 . className会先清空这个dom的元素 旧的所有的类 然后再单独添加上 新的类
3 可以增加多个样式, 如果想要同时设置多个 class 以空格做分割即可
注意: 直接使用 className 赋值会覆盖以前的类名
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
width: 100px;
height: 100px;
background-color: aqua;
margin: 100px auto;
}
.redCls{
border-radius: 50%;
height: 400px;
background-color: red;
}
</style>
</head>
<body>
<div ></div>
<script>
/*
className
会先清空这个dom的元素 旧的所有的类 然后再单独添加上 新的类
如果想要同时设置多个 class 以空格做分割即可
*/
// js的方式来动态添加上这个class
let div = document.querySelector('div');
// 通过 className 来设置类名即可
// 同时设置两个类上去
div.className = 'box redCls';
</script
3 通过 classList 操作类控制CSS
为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
1 增加 类
变量名 .classList.add ( ) ;
想要增加几个类名,就加几个类, 注意类名要用冒号包裹,间隔要用逗号
// 添加一个class
let div = document.querySelector('div');
// 添加多个类
div.classList.add("d2","d3","d4");
// 添加一个类
// div.classList.add("d2");
// div.classList.add('d3');
2 移除类
变量名 .classList.remove ( ) ;
想要移除那个 样式(类) ,就把标签放进去,也可以移除多个
// 单独来指定移除一个class
div.classList.remove("d2")
// 移除多个class
div.classList.remove("d2","d3")
3 切换 (如果本来有，那我就移除 ， 如果本来没有，那我就添加)
变量名 .classList.toggle ( ) ;
div.classList.toggle("d4")
如果没有 d4 这个类 ,那么就将往div里添加这个类的样式
如果有这个类,那么将移除这个类的样式
<!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>17-classList操作类.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.d1 {
background-color: aqua;
}
.d2 {
height: 300px;
}
.d3 {
width: 400px;
}
.d4 {
border-radius: 50%;
}
</style>
</head>
<body>
<div class="d1 d4">123</div>
<script>
// 添加一个class
let div = document.querySelector('div');
// 添加多个类
div.classList.add("d2","d3","d4");
// 添加一个类
// div.classList.add("d2");
// div.classList.add('d3');
// 单独来指定移除一个class
div.classList.remove("d2")
// 移除多个class
div.classList.remove("d2","d3")
// 切换 （如果本来有，那我就移除 ， 如果本来没有，那我就添加）
div.classList.toggle("d4")
</script>
</body>
</html>
4 定时器-开始与清除
网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发
要实现这种需求，需要定时器函数
定时器函数有两种，今天我先讲间歇函数
定时器函数可以开启和关闭定时器
1 开启定时器
setInterval (函数,间隔时间)
要想开始定时器,必须要给上 函数 以及 间隔时间
作用：每隔一段时间调用这个函数
间隔时间单位是毫秒 1000毫秒= 1秒
// 函数 负责 定时执行的业务
// function arr(){
// console.log('打印我出来');
// }
// 每间隔 一秒 执行一次函数
// 间隔 1000毫米 等于 1秒
// setInterval(arr,1000)
// 其他写法 匿名函数
setInterval (function(){
console.log('我是匿名函数打印出来的');
},1000)
</script>
注意：
1 函数名字不需要加括号
2 定时器返回的是一个id数字
2 关闭-(清除)定时器
一般不会刚创建就停止，而是满足一定条件再停止
clearInterval(timeId); ( ) 里面的值就是开始定时器返回的值,直接用那个变量即可
<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>
5-总结
1. 三种动态创建元素区别
1.document.write 只能在body标签中写内容以后很少用!!
2.innerHTML 设置标签的文本内容 还可以设置设置标签
3.innerText 设置标签的文本内容
2.DOM-各种属性
1.创建
1.document.write
2.innerHTML
3.innerText
2.增加
增加类名样式
1.元素.classList.add
2.元素.classList.toggle 切换 （如果本来有，那我就移除 ， 如果本来没有，那我就添加）
3.div.className = 'box style' className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名
3.删
删除类名样式
1.元素.classList.remove 单独来指定移除一个class
2.元素.classList.toggle 切换 （如果本来有，那我就移除 ， 如果本来没有，那我就添加）
4.改
修改类名样式
1.修改元素属性： src、href、title等
2.修改普通元素内容： innerHTML 、innerText
3.修改表单元素： value、type、disabled等
4.修改元素样式： style、className 元素.classList.toggle
5.查
查询单个标签,多个标签(数组)
1.querySelector
2.querySelectorAll
3.document.getElementById 根据id来获取一个
4.document.getElementsByName 根据标签名称来获取 一组元素
5.document.getElementsByClassName 根据类名来获取元素 一组元素
6 案例示范
1 定时器-倒时器-60~0重复
/*
需求：
1 有一个标签里面的文本内容
60 59 0 60 59 0
2 技术
1 定时器
2 数字--
3 当我们数字减少到 0 的时候 重新设置 times=60
*/
// 定义一个时间
let times = 60;
// 获取一下btn对象
let btn = document.querySelector('button');
setInterval(function () {
// console.log(times); // 打印 1
btn.innerText = times;
times--; // 0
// 当times===0 重新设置为60
if (times === -1) {
times = 60;
}
}, 100);
2 定时器-轮播图
/*
需求分析
每间隔一秒 就切换显示一张图片
新案例 一定要找和旧案例之间的联系
1 倒计时案例 60 59 0 .. 60 59 0
轮播图案例 1 2 3 9 ... 1 2 3 ..9
2 布局上的设计！
*/
let index = 1;
let img = document.querySelector('img');
setInterval(function () {
// console.log("当前图片要用",index);
// 设置图片地址
img.src = `./images/b0${index}.jpg`;
console.log(index);
index++;
if (index === 10) {
index = 1;
}
}, 1000);
3-背景图片随机刷新
<!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>13-随机显示图片</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.d1{
background-image: url(http://md.zbztb.cn/uploads/43893351562/course01.png);
}
.d2 {
background-image: url(http://md.zbztb.cn/uploads/43893351562/course03.png);
}
.d3 {
background-image: url(http://md.zbztb.cn/uploads/43893351562/course02.png);
}
.d4 {
background-image: url(http://md.zbztb.cn/uploads/43893351562/course04.png);
}
.d5 {
background-image: url(http://md.zbztb.cn/uploads/43893351562/course07.png);
}
.d6 {
background-image: url(http://md.zbztb.cn/uploads/43893351562/course06.png);
}
</style>
</head>
<body>
<script>
// 方法一
// let arr1=['d1','d2','d3','d4','d5','d6']
// let index=Math.round(Math.random() *arr1.length-1)
// document.body.classList.add(arr1[index])
// 方法二
let arr1 = ['./images/course01.png','./images/course02.png','./images/course03.png','./images/course04.png','./images/course05.png','./images/course06.png',];
let index=Math.round(Math.random() *arr1.length-1)
document.body.style.backgroundImage=`url(${arr1[index]})`
</script>
</body>
</html>
