web API
作用：就是使用js去操作html和浏览器
分类：DOM（文档对象模型），BOM（浏览器对象模型）
什么是DOM？
浏览器提供的一套专门用来操作网页内容的功能，开发网页内容特效和实现用户交互
DOM对象：浏览器根据html标签生成的 JS对象，所有的标签属性都可以在这个对象上面找到，修改这个对象的属性会自动映射到标签身上
获取DOM对象
查找元素DOM就是利用js选择页面标签元素
根据css选择器来获取DOM元素（获取一个）
语法：
<div>123</div>
<script>
const div = document.querySelector('div')
// 打印对象，在HTML中是一个标签，但是通过js中获取过来，就是一个对象
console.dir(div) // dom 对象，console.log获取到的是<div>123</div>
</script>
参数：包含一个或多个有效的CSS选择器 字符串
返回值：CSS选择器匹配的第一个元素,一个 HTMLElement对象。如果没有匹配到，则返回null。
注意：小括号里必须是字符串，也就是必须加引号
根据css选择器来获取DOM元素（获取多个）
语法：
<ul class="nav">
<li>测试1</li>
<li>测试2</li>
<li>测试3</li>
</ul>
<script>
// 1.获取元素,获得伪数组
const lis = document.querySelectorAll('.nav li')
for (let i = 0; i < lis.length; i++) {
console.dir(lis[i]) // 每一个小li对象
}
返回值:对象集合，是一个伪数组
操作元素内容
DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象。
元素innerText属性
将文本内容添加/更新到任意标签位置，显示纯文本，不解析标签
<div class="box">我是文字的内容</div>
<script>
//1，获取元素
const box = document.querySelector('.box')
//2,修改文字内容 对象.innerText属性
box.innerText = '我是一个盒子'
</script>
box.innerText = '<strong>我是一个盒子</strong>' // 不解析标签
元素innerHTML属性
将文本内容添加/更新到任意标签位置，会解析标签，多标签建议使用模板字符
<div class="box">我是文字的内容</div>
<script>
//1，获取元素
const box = document.querySelector('.box')
//2,修改文字内容 对象.innerHTML属性
box.innerHTML = '我要变换'
</script>
box.innerHTML = '<strong>我要更换</strong>'//解析标签
操作元素常用属性
还可以通过 JS 设置/修改标签元素属性，比如通过 src更换 图片，最常见的属性比如： href、title、src 等。
语法
<img src="./images/1.webp" alt="">
<script>
// 1. 获取图片元素
const img = document.querySelector('img')
// 2. 修改图片对象的属性 对象.属性 = 值
img.src = './images/2.webp'
img.title = '艺术照'
</script>
补充：随机数生成
// 取到 N ~ M 的随机整数
function getRandom(N, M) {
return Math.floor(Math.random() * (M - N + 1)) + N
}
操作元素样式属性
1，通过style属性操作css
语法：
对象.style.样式属性 = 值
实例
<div class="box"></div>
<script>
// 1. 获取元素
const box = document.querySelector('.box')
//2. 修改样式属性 对象.style.样式属性 = '值' 别忘了跟单位
box.style.width = '300px'
// 如果属性有-连接符，需要转换小驼峰命名法
box.style.backgroundColor = 'hotpink'
box.style.border = '2px solid blue'
box.style.borderTop = '2px solid red'
2, 通过类名（className）操作css
如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。
语法：
元素.className = '类名'
注意：
由于class是关键字, 所以使用className去代替，’ '里面的类名也不用加 .
className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名
实例
<div class="nav">123</div>
<script>
// 1. 获取元素
const div = document.querySelector('div')
// 2.添加类名 class 是个关键字 我们用 className 会覆盖旧值，新值覆久值
div.className = 'nav box'//加上以前的类名，就不会覆盖以前类名给予的css属性
</script>
3,通过classList操作类控制css
为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
语法
//追加一个类
元素.classList.add('类名')
//删除一个类
元素.classList.remove('类名')
//切换一个类
元素.classList.toggle('类名')
实例
<style>
.box {
width: 200px;
height: 200px;
color: #333;
background-color: blue;
}
.active {
color: red;
background-color: pink;
}
</style>
</head>
<body>
<div class="box active">文字</div>
<script>
// 通过classList添加
// 1. 获取元素
const box = document.querySelector('div')
// 2. 修改样式
// 2.1 追加类 add() 类名不加点，并且是字符串
// box.classList.add('active')
// 2.2 删除类 remove() 类名不加点，并且是字符串
// box.classList.remove('box')
// 2.3 切换类 toggle() 有还是没有啊， 有就删掉，没有就加上
box.classList.toggle('active')//只生效.box类样式
</script>
操作表单元素属性
表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框
实例1
<input type="text" value="电脑">
<script>
// 1 获取元素
const uname = document.querySelector('input')
// 2. 获取值 获取表单里面的值 用的 表单.value
console.log(uname.value) // 电脑 innertHTML 得不到表单的内容
// 3. 设置表单的值
uname.value = '我要买电脑'
console.log(uname.type) //输出text
uname.type = 'password'// 是text里的值隐藏
实例2
<input type="checkbox" name="" id="">
// 1. 获取
const ipt = document.querySelector('input')
console.log(ipt.checked) // false 只接受布尔值
//2.修改
ipt.checked = true
// ipt.checked = 'true' // 会选中，不提倡 有隐式转换 只有空字符是false
实例3
<button>点击</button>
// 1.获取
const button = document.querySelector('button')
// console.log(button.disabled) // 默认false 不禁用
button.disabled = true // 禁用按钮
自定义属性
在html5中推出来了专门的data-自定义属性
在标签上一律以data-开头
在DOM对象上一律以dataset对象方式获取
<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>
const one = document.querySelector('div')
console.log(one.dataset.id) // 1
console.log(one.dataset.spm) // 不知道
</script>
定时器-间歇函数
网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发，例如“已阅读用户协议”
开启定时器
setInterval(函数, 间隔时间ms) //意思是每隔间隔时间调用一下函数
关闭定时器
let 变量名 = setInterval(函数, 间隔时间)
clearInterval(变量名)
实例
function fn() {
console.log('一秒执行一次')
}
// setInterval(函数名, 间隔时间) 函数名不要加小括号
let n = setInterval(fn, 1000)//用let，定时器返回的是一个唯一且随机的id数字
// setInterval('fn()', 1000)//不建议使用
console.log(n)
// 关闭定时器
clearInterval(n)
案例-用户注册倒计时
<body>
<textarea name="" id="" cols="30" rows="10">
用户注册协议
欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。
【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看
</textarea>
<br>
<button class="btn" disabled>我已经阅读用户协议(60)</button>
<script>
// 1. 获取元素
const btn = document.querySelector('.btn')
// console.log(btn.innerHTML) butto按钮特殊用innerHTML
// 2. 倒计时
let i = 60
// 2.1 开启定时器
let n = setInterval(function () {
i--
btn.innerHTML = `我已经阅读用户协议(${i})`
if (i === 0) {
clearInterval(n) // 关闭定时器
// 定时器停了，我就可以开按钮
btn.disabled = false
btn.innerHTML = '同意'
btn.style.color = 'red'
}
}, 1000)
</script>
2290
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
