Web API 基本认知
作用和分类
- 作用：就是使用 JS 去操作 html 和 浏览器
- 分类：DOM ( 文档对象模型 )、BOM ( 浏览器对象模型 )
DOM 是什么
- DOM ( Document Object Model —— 文档对象模型 )
- 它是用来呈现以及与任意 HTML 或 XML 文档交互的 API
- 通俗的说，DOM 是浏览器提供的一套专门用来"操作网页内容"的功能
DOM 树
-
什么是 DOM 树：将HTML文档以树状结构直观表现出来，我们称之为文档树或DOM树
-
作用：文档树直观的体现了标签与标签之间的关系
DOM 对象
Dom 的思想核心：把网页内容当作对象来处理
- 浏览器根据 html 标签生成的 JS 对象
- 所有的标签属性都可以在这个对象上面找到
- 修改这个对象的属性会自动映射到标签身上
document 对象
- 是 DOM 里面提供的一个对象
- 用来访问和操作网页内容
- 网页所有内容都在 document 里面
获取 DOM 对象
- 方式一：根据 CSS 选择器来获取 DOM 元素（重点）
- 方式二：其他获取 DOM 元素方法（了解）
方式一
具体内容
- 成功匹配的所有元素中，取第一个元素
语法：
document.querySelector('CSS选择器')
返回值：CSS选择器匹配成功的所有元素中的第一个元素，是一个HTMLElement对象
- 成功匹配的所有元素中，取所有元素
语法：
document.querySelectorAll('CSS选择器')
返回值：CSS选择器匹配成功的所有元素，是一个装有HTMLElement对象的数组
演示部分
<body>
<div>111</div>
<div>222</div>
<div class="box">aaa</div>
<div class="box">bbb</div>
<div class="box">ccc</div>
<div id="d1">ddd</div>
<ul>
<li>li-1</li>
<li>li-2</li>
<li>li-3</li>
</ul>
<script>
const a = document.querySelector('.box')
console.log(a);
const d = document.querySelector('#d1')
console.log(d);
const li = document.querySelector('li')
console.log(li);
const lis = document.querySelectorAll('ul li')
console.log(lis);
</script>
</body>
方式二
<script>
// 根据id获取一个元素
document.getElementById('nav')
// 根据'标签名'获取一类元素
document.getElementsByTagName('div')
// 根据'类名'获取对应元素
document.getElementsByClassName('box')
</script>
操作元素内容
innerText
<body>
<div>欢迎光临</div>
<div class="box">我是Peter</div>
<div class="top">搜索框</div>
<script>
// 1. 获取元素对象
const box = document.querySelector('.box')
// 2. 修改文字内容
console.log(box.innerText); // 输出内容:我是Peter
box.innerText = '我是Jack' // 注意：innerText 只显示纯文本，不解析标签
// 例如：box.innerText = '<strong>我是Jack</strong>' 是解析不了标签的
</script>
</body>
innerHTML
<body>
<div>欢迎光临</div>
<div class="box">我是Peter</div>
<div class="top">搜索框</div>
<script>
// 1. 获取元素对象
const box = document.querySelector('.box')
// 2. 修改文字内容
box.innerHTML = '<strong>我是Jack</strong>'
</script>
</body>
操作元素属性
操作元素的常用属性
<body>
<img src="./images/img2.png" alt="">
<script>
// 1. 获取图片对象
const img = document.querySelector('img')
// 2. 修改图片对象的属性值
img.src = './images/img3.png'
</script>
</body>
操作元素的样式属性
方式一
- 通过 style 属性操作 CSS
<body>
<div class="box"></div>
<script>
// 1. 获取对象
const box = document.querySelector('.box')
// 2. 修改对象的样式的属性值
box.style.width = '300px'
box.style.backgroundColor = 'green'
</script>
</body>
方式二
- 操作类名 ( className ) 操作 CSS
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
}
.active {
margin: 0 auto;
width: 300px;
height: 300px;
background-color: bisque;
}
.radius {
border-radius: 50%;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
// 1. 获取对象
const box = document.querySelector('.box')
// 2. 通过改'类名'的方式，去修改对象的样式
box.className = 'active radius'
</script>
</body>
方式三（重点）
-
通过 classList 操作类控制 CSS
作用：为了解决 className 容易覆盖以前的类名，我们可以通过 classList方式追加和删除类名
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
}
.active {
margin: 0 auto;
width: 300px;
height: 300px;
background-color: bisque;
}
.radius {
border-radius: 50%;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
// 1. 获取对象
const box = document.querySelector('.box')
// 追加一个类
box.classList.add('active')
// 删除一个类
box.classList.remove('active')
// 切换一个类
// 判断这个类有没有，有就删掉，没有就加上，即：类似'取反'的效果
box.classList.toggle('radius')
</script>
</body>
操作表单元素属性
标准属性
- 标签天生自带的属性，比如 class、id、title 等，可以直接使用点语法操作，比如：disabled、checked、selected
<body>
<input type="text" value="电脑">
<script>
const ipt = document.querySelector('input')
ipt.value = '书包'
</script>
</body>
<body>
<input type="checkbox" name="" id="" checked>
<script>
const ipt = document.querySelector('input')
ipt.checked = false
</script>
</body>
<body>
<button disabled>点击</button>
<script>
const btn = document.querySelector('button')
btn.disabled = false
</script>
</body>
自定义属性（重点）
- 在 html 5 中推出来了专门的 data-自定义属性
- 在标签上一律以 data- 开头
- 在 DOM 对象上一律以 dataset 对象方式获取
<body>
<div data-id="haha" data-spm="run">第1个</div>
<div>第2个</div>
<div>第3个</div>
<script>
const one = document.querySelector('div')
console.log(one.dataset.id); // haha
console.log(one.dataset.spm); // run
</script>
</body>
定时器
间歇函数
使用场景
网页中经常会需要有一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发
例如：网页中的倒计时
定时器函数可以开启和关闭定时器
开启定时器
语法：
setInterval(函数, 间隔时间)
作用：
每隔一段时间调用这个函数（间隔时间单位：毫秒）
<script>
// 开启定时器的方式一：
setInterval(function () {
document.write('匹配成功 <br>')
}, 1000)
// 开启定时器的方式二：
function add() {
document.write('任务完成 <br>')
}
setInterval(add, 2000) // 开启
</script>
关闭定时器
语法：
let 变量名 = setInterval(函数, 间隔时间)
clearInterval(变量名)
作用：
当满足某些条件时，关闭定时器
<script>
let n = setInterval(function () {
document.write('匹配成功 <br>')
}, 1000)
console.log(n) // 变量里面存的是独一无二的定时器序号，这个序号是为了避免多个定时器互相干涉
// 关闭定时器
clearInterval(n)
</script>
具体案例
<body>
<textarea name="" id="" cols="30" rows="10">
《用户注册协议》
您确认所有服务条款并完成注册程序时
本协议在您与本网站间成立并发生法律效力
同时您成为本网站正式用户
</textarea>
<br>
<button class="btn" disabled>我已经阅读用户协议 (5s)</button>
<script>
const btn = document.querySelector('.btn')
let second = 5 // 倒计时秒数
let n = setInterval(function () {
second--
btn.innerHTML = `我已经阅读用户协议 (${second}s)`
if (second === 0) {
clearInterval(n)
btn.innerHTML = `我同意该协议`
btn.disabled = false
}
}, 1000)
</script>
</body>
