Web API 基本认知
作用: 就是使用 JS 去操作 html 和浏览器
分类：DOM (文档对象模型)、BOM（浏览器对象模型）
DOM
DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API。
白话文：DOM是浏览器提供的一套专门用来 操作网页内容 的功能
DOM作用： 开发网页内容特效和实现用户交互。
DOM树
-
将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树
-
描述网页内容关系的名词
-
作用：文档树直观的体现了标签与标签之间的关系
DOM对象
DOM对象：浏览器根据html标签生成的 JS对象
-
所有的标签属性都可以在这个对象上面找到
-
修改这个对象的属性会自动映射到标签身上
DOM的核心思想：把网页内容当做对象来处理
document 对象：
-
是 DOM 里提供的一个对象
-
所以它提供的属性和方法都是用来访问和操作网页内容的
例：document.write()
-
网页所有内容都在document里面
获取dom对象
根据CSS选择器来获取DOM元素
选择匹配的第一个元素
语法：
document.querySelecto('css选择器')
参数：
包含一个或多个有效的CSS选择器 字符串
返回值：
css选择器匹配的第一个元素，一个HTMLElement对象
如果没有匹配到，则返回null.
选择匹配的多个元素
语法：
document.querySelectorAll('css选择器')
参数：
包含一个或多个有效的css选择器 字符串
返回值：
css选择器匹配的NodeList 对象集合
例如：
document.querySelectorAll('ul li')
得到的是一个伪数组
- 有长度有索引号的数组
- 但是没有 pop() push()等数组方法
想要得到里面的每一个对象，则需要遍历（如for）的方式获得
其他获取DOM元素方法
修改DOM元素内容
DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象。就是操作对象使用的语法。
document.write()
只能将文本内容追加到 前面的位置 文本中包含的标签会被解析
元素.innerText 属性
将文本内容添加/更新到任意标签位置 文本中包含的标签不会被解析
元素.innerHTML 属性
将文本内容添加/更新到任意标签位置 文本中包含的标签会被解析
修改元素属性
修改元素常用属性
- 还可以通过 JS 设置/修改标签元素属性，比如通过 src更换 图片
- 最常见的属性比如： href、title、src 等
语法：
举例：
页面刷新，图片随机更换案例
<!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>
<h2> <img src="./images/1.jpg" alt=""></h2>
<script>
let name = ['./images/1.jpg', './images/2.jpg', './images/3.jpg', './images/4.png'],
world = document.querySelector('img');
let a = Math.round(Math.random() * (name.length - 1) + 0);
world.src = name[a];
</script>
</body>
</html>
修改元素样式属性
还可以通过 JS 设置/修改标签元素的样式属性。
- 比如通过 轮播图小圆点自动更换颜色样式
- 点击按钮可以滚动图片，这是移动的图片的位置 left 等等
1.通过 style 属性操作CSS
语法：
let a = document.querySelector('div');
a.style.backgroundColor = 'red';
a.style.height = '100px';
a.style.width = '100px';
a.style.fontSize = '30px';
a.style.textAlign = 'center';
a.style.lineHeight = '100px'
注意：
- 修改样式通过style属性引出
- 如果属性有-连接符，需要转换为小驼峰命名法
- 赋值的时候，需要的时候不要忘记加css单位
2.操作类名(className) 操作CSS
如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于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>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.color {
height: 200px;
width: 200px;
background-color: #4A00E0;
margin: 100px auto;
}
.fz {
font-size: 28px;
color: red;
text-align: center;
line-height: 200px;
border-radius: 50%;
}
</style>
</head>
<body>
<div>123</div>
<script>
let a = document.querySelector('div');
//增加类名，改变样式，会覆盖div原有样式
a.className = 'color fz'
</script>
</body>
</html>
注意：
- 由于class是关键字, 所以使用className去代替
- className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名
3.通过 classList 操作类控制CSS
为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
<!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>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.d1 {
width: 300px;
background-color: blue;
}
.d2 {
height: 300px;
background-color: skyblue;
}
.d3 {
border-radius: 50px;
background-color: red;
}
.d4 {
margin: 100px auto;
text-align: center;
}
</style>
</head>
<body>
<div>456</div>
<script>
let a = document.querySelector('div');
//增加类名
a.classList.add('d1', 'd2', 'd3', 'd4');
//删除类名
a.classList.remove('d1');
//切换类名
a.classList.toggle('d1')
</script>
</body>
</html>
修改 表单元素 属性
表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框
正常的有属性有取值的 跟其他的标签属性没有任何区别
- 获取: DOM对象.属性名
- 设置: 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>
input表单：<input type="text" class="input"> 复选框：<input type="checkbox" class="check">
<button>选中</button>
<select>
<option>北京</option>
<option>广州</option>
<option>重庆</option>
<option class="option">上海</option>
</select>
<script>
let ip = document.querySelector('.input');
//修改表单的值
ip.value = 'ok';
let checkbox = document.querySelector('.check');
//复选框的选中为 对象.属性=true,取消选中 对象.属性=false
checkbox.checked = true;
let btn = document.querySelector('button');
//按钮禁用：对象.属性=true，启用：对象.属性=false
btn.disabled = false;
let option = document.querySelector('.option');
//下拉菜单启用：对象.selected=true,禁用：对象.selected=false
option.selected = true;
</script>
</body>
</html>
定时器
开启定时器
作用：每隔一段时间调用这个函数
间隔时间单位是毫秒
setInterval(function name(params) {
console.log('hello');
}, 1000);
关闭定时器
注意：
函数名字不需要加括号
定时器返回的是一个id数字
60秒倒计时案例
let i = 60;
let timeId = setInterval(function() {
document.body.innerHTML = `${i}`
i--
if (i === -1) {
i = 60
}
}, 1000)
