一、Web APIs
1.Web APIs：使用 JavaScript 去操作页面文档和浏览器
2.分类：
（1）DOM : 文档对象模型；使用 JavaScript 去操作页面文档
（2）BOM：浏览器对象模型；使用 JavaScript 去操作浏览器
3.API: 应用程序接口（Application Programming Interface）
接口：无需关心内部如何实现，程序员只需要调用就可以很方便实现某些功能
作用
：开发人员
使用
JavaScript提供的
接口
来
操作网页元素和浏览器
二、DOM
1.DOM（Document Object Model——
文档对象模型
）
2.作用：
DOM用来
操作网页文档，
开发网页特效和实现用户交互
3.DOM
的核心思想就是
把网页内容当做对象
来处理，
通过对象
的属性和方法对网页内容
操作
4.document 对象是 DOM 里提供的一个对象，是DOM顶级对象 。作为网页内容的入口 ，所以它提供的属性和方法都是用来访问和操作网页内容的，网页的所有内容都在 document 里面 ；例：document.write()
三、获取DOM元素
想要操作页面元素，那我们需要先利用DOM方式来获取（选择）这个元素
根据CSS选择器来获取DOM元素
1.选择匹配的第一个元素
（1）参数: 包含一个或多个有效的CSS选择器 字符串。（可以直接修改样式）
（2）返回值： CSS选择器匹配的
第一个元素
对象 ，
如果没有匹配到，则返回
null2.
2.选择匹配的多个元素对象
（1）参数: 包含一个或多个有效的CSS选择器
字符串。（只能通过遍历来修改样式）
（2）返回值： CSS选择器匹配的
NodeList 伪数组
3.伪数组
（1）伪数组：是一个有长度有索引号
的数组 ；但是
没有 pop() push()
等数组方法 ；想要得到里面的每一个对象，则需要遍历（for）的方式获得
（2）哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个
伪数组
，里面只有一个元素而已
<!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>获取DOM元素</title>
</head>
<body>
<div class="box">123</div>
<div class="box">abc</div>
<p id="nav">导航栏</p>
<ul class="nav">
<li>测试1</li>
<li>测试2</li>
<li>测试3</li>
</ul>
<script>
// 获取匹配的第一个元素
// const box = document.querySelector ('div')
// 用类名选择
// const box = document.querySelector ('.box')
// console.log(box)
// 获取p标签
// const nav1 = document.querySelector('#nav')
// 修改标签属性
// nav1.style.color = 'pink'
// console.log(nav1)
// 获取第一个li标签
// const li = document.querySelector('ul li:first-child')
// console.log(li)
// 获取所有的li标签
// const lis = document.querySelectorAll('ul li')
// console.log(lis)
// 得到每一个li
const lis = document.querySelectorAll('.nav li')
for(let i = 0 ; i < lis.length ; i++) {
console.log(lis[i]) // 每一个小 li 对象
}
// 修改多个的样式，如果只有一个，可以使用数组的属性
const p = document.querySelectorAll('#nav')
p[0].style.color = 'red'
</script>
</body>
</html>
效果展示：
四、操作DOM元素内容
1.DOM对象可以操作页面标签，所以
本质上就是
操作DOM对象（增删改查）
2.如果想要操作标签元素的
内容
，则可以使用如下2种方式：
（1）对象.
innerText
属性
"
渲染
"文本内容到标签里面 ；显示纯文本，
不解析标签
<!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>操作DOM元素-innerText</title>
</head>
<body>
<div class="box">我是文字内容</div>
<script>
// 1.获取元素
const box = document.querySelector('.box')
// 2.修改文字内容 对象 .innerText 属性
console.log(box.innerText) // 获取文字内容
box.innerText = '<strong>我是一个盒子</strong>' // 修改文字内容 ,文本未加粗，不解析标签
</script>
</body>
</html>效果展示：
（2）对象.
innerHTML
属性
"
渲染
"文本内容到标签里面 ；
会解析标签，多标签建议使用模版字符
<!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>操作DOM元素-innerHTML</title>
</head>
<body>
<div class="box">我是文字的内容</div>
<script>
// 获取文字内容
const box = document.querySelector('.box')
console.log(box.innerHTML)
// innerHTML 能自己解析标签
box.innerHTML = '<strong>我加粗了吗</strong>'
</script>
</body>
</html>效果展示：
五、操作DOM元素属性
5.1 操作元素常用属性 ：
可以通过DOM操作元素属性，比如通过
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>页面刷新，图片随机更换</title>
<!-- 需求：当我们刷新页面，页面中的图片随机显示不同的图片
分析：
①：利用随机数抽取数组中的一个图片地址
②：修改图片元素的src地址（把图片地址赋值给src属性） -->
</head>
<body>
<img src="./images/1.png" alt="">
<script>
function getRandom(M , N) {
return Math.floor(Math.random() *(N - M + 1)) + M
}
// 1.获取元素
const img = document.querySelector('img')
// 2.随机得到字号
const random = getRandom(1 , 6)
// 3.更换路径
img.src = `./images/${random}.png`
</script>
</body>
</html>5.2 操作元素样式属性
1.通过 style 属性操作元素样式
可以通过 DOM对象修改标签元素的样式属性 ；比如通过 轮播图小圆点自动更换颜色样式 ；点击按钮可以滚动图片，这是移动的的位置 translateX 等等；
注意：
（1）修改样式通过
style
属性引出
（2）
如果属性有
-
连接符，需要转换为
小驼峰
命名法
（3）赋值的时候，需要的时候不要忘记加
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>通过 style 属性操作元素样式</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
const box = document.querySelector('.box')
box.style.width = '400px'
// 小驼峰命名法
box.style.backgroundColor = 'aqua'
box.style.borderTop = '5px solid pink'
</script>
</body>
</html>效果展示：
2. 通过类名(className) 操作元素样式
如果修改的
样式比较多
，直接通过style属性修改比较繁琐，我们可以通过借助于
css类名
的形式
核心：把多个样式放到css一个类中，然后把这个类添加到这个元素身上
注意：
（1）
由于class是关键字, 所以使用
className
去代替
（2）className是使用新值
换
旧值, 如果需要添加一个类,需要保留之前的类名
<!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>通过类名(className) 操作元素样式</title>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
color:blueviolet;
}
.box{
width: 400px;
height: 400px;
background-color: aqua;
margin: 100px auto;
padding: 10px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="nav">123</div>
<script>
// 1.获取元素
const div = document.querySelector('div')
// 2.添加类名 class是关键字，所以使用className，但是解析标签的时候还是class
div.className = 'nav box'
// className新值换旧值，会覆盖前面的内容,想要保全两个属性，就保留之前的类名
</script>
</body>
</html>效果展示：
3. 通过 classList 操作元素样式（推荐）
为了
解决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>通过classList 修改样式</title>
<style>
.box{
width: 200px;
height: 200px;
color:#333;
}
.active {
color:skyblue;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">你猜我变色没？</div>
<script>
// 通过classList修改样式
// (1)获取元素
const box = document.querySelector('.box')
// (2)修改样式
// 1.追加类 add() 类名不加点，并且是字符串
// box.classList.add('active')
// 2.删除类 remove() 类名不加点，并且是字符串
// box.classList.remove('box')
// 3.切换类 toggle() 有就删掉，没有就加上
box.classList.toggle('active')
</script>
</body>
</html>效果展示：
5.3 操作 表单元素 属性
1.修改表单属性---单选框
表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本
正常的有属性有取值的 跟其他的标签属性没有任何区别
获取
: 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>操作表单元素属性-单选框</title>
</head>
<body>
<!-- 特殊样式---input -->
<input type="text" value="请输入内容">
<script>
// 1.获取元素
const uname = document.querySelector('input')
// 2.获取值 获取表单里面的值用的是 .value
// innerHTML得不到表单的内容,想获取表单内容只能用 .value
// consol?e.log(uname.value)
// 3.更改内容 设置表单的值
// uname.value = '我忘记密码了'
// 4.密码看不见
// uname.type = 'password'
</script>
</body>
</html>2.修改表单属性---复选框
表单属性中添加就有效果，移除就没有效果，一律使用
布尔值
表示
比如实现禁用按钮，勾选按钮等
如果为
true
代表添加了该属性
如果是
false
代表移除了该属性
比如：
disabled
、
checked
、
selected
<!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>修改表单属性-复选框</title>
</head>
<body>
<input type="checkbox" name="" id="">
<!-- disable : 禁用 -->
<button disabled>点击</button>
<script>
// 表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代表移除了该属性
// 1.获取复选框
const input = document.querySelector('input')
console.log(input.checked) // input里面没写checked 这里就会返回false
input.checked = true //true
// 1.获取按钮
const button = document.querySelector('button')
// 默认false 不禁用
console.log(button.disabled)
// disabled:禁用吗？ true : 是的
button.disabled = true
</script>
</body>
</html>5.4 自定义属性
标准属性:
标签天生自带的属性 比如class、id、title等, 可以直接使用点语法操作比如：
对象.title
自定义属性： 在html5中推出来了专门的
data-
自定义属性
使用场景：通过自定义属性可以
存储数据
，后期可以
使用
这个数据
在标签上一律以
data-
开头
在DOM对象上一律以
dataset
对象方式获取
<!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>自定义属性</title>
</head>
<body>
<div data-id="1" data-spm="不知道">1</div>
<div data-id="2">2</div>
<div data-id="3">3</div>
<div data-id="4">4</div>
<div data-id="5">5</div>
<script>
// 自定义属性 data- 开头
const one = document.querySelector('div')
// set : 集合
console.log(one.dataset)
// 想获得“不知道”
console.log(one.dataset.spm)
</script>
</body>
</html>效果展示：
5.5 应该怎么选择使用 style、 className 和classList ？
1.
修改样式很
少
的时候，使用
style
2.
修改大量样式的可以选择类：className / classList
3.classList
是追加和删除不影响以前类名，
更提倡
156
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
