一、Web API的认识
1、作用和分类
1、作用:使用JS去操作html和浏览器
2、分类:
- DOM:文档对象模型
- BOM:浏览器对象模型
2、什么是DOM
1、DOM:Document Object Model,即文档对象模型,用来呈现以及与任意html或xml文档交互的API,DOM是浏览器提供的一套专门用来操作网页内容的功能。
2、DOM作用:开发网页内容特效、实现用户交互。
3、DOM树
1、DOM树:将HTML文档以树状结构直观的表现出来,称之为文档树或者DOM树。
2、作用:文档树直观的体现了标签与标签之间的关系。
4、DOM对象
1、DOM对象:浏览器根据html标签生成的JS对象
- 所有的标签属性都可以在这个对象上面找到
- 修改这个对象的属性会自动映射到标签上
2、DOM的核心思想:把网页内容当做对象来处理
3、document对象:
- 是DOM里面提供的一个对象
- 它提供的属性和方法都是用来访问和操作网页内容的
- 网页的所有内容都在document里面
二、获取DOM对象
1、根据CSS选择器来获取DOM元素
1、选择匹配的第一个元素
1、语法:document.querySelector(‘css选择器’)
2、参数:包含一个或多个有效的CSS选择器字符串
3、返回值:CSS选择器匹配的第一个元素,一个HTMLElement对象,如果没有匹配到,则返回null。
4、参考文档:https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector
5、示例代码:
<!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>
<div>111</div>
<div>222</div>
<div class="three">333</div>
<script>
var dom1 = document.querySelector('div');//<div>111</div>
console.log(dom1);
var dom2 = document.querySelector('.three');//<div class="three">333</div>
console.log(dom2);
</script>
</body>
</html>
2、选择匹配多个元素
1、语法:document.querySelectorAll(‘css选择器’)
2、参数:一个或多个有效的CSS选择器字符串
3、返回值:CSS选择器匹配的NodeList对象集合,是一个伪数组,有length属性,可以通过下标索引获取元素,但是没有pop()、push()等数组的方法。就算只有一个元素,获取到的也是一个伪数组,里面只有一个元素而已。
4、示例代码:
<!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>
<div>111</div>
<div>222</div>
<div class="three">333</div>
<script>
// 获取多个元素,得到的是一个伪数组
var doms = document.querySelectorAll('div');
for(let i = 0;i < doms.length;i++) {
console.log(doms[i]);
}
</script>
</body>
</html>
3、其他获取DOM元素的方法
1、其他方法
方法 | 说明 |
---|---|
document.getElementById(‘btn’) | 通过元素id值获取元素 |
document.getElementsByTagName(‘div’) | 通过标签名获取页面中所有div元素 |
document.getElementsByClassName(‘box’) | 通过类名获取所有类名为box的元素 |
三、设置/修改DOM元素
1、document.write()
1、只能将文本内容追加到前面的位置
2、文本包含的标签会被解析
3、代码示例:
<!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>
<script>
// 追加文本内容
document.write('好好学习,天天向上');
// 里面的标签会被解析
document.write('<h2>学习令人兴奋</h2>');
</script>
</body>
</html>
2、元素的innerText属性
1、将文本内容添加或者更新到任意标签的位置
2、文本包含的标签不会被解析
3、示例代码:
<!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>
<div id="box1"></div>
<div id="box2">这里的值会更新</div>
<div id="box3">这里的标签不会被解析</div>
<script>
// 为id为box1的div添加内容
var box1 = document.getElementById('box1');
box1.innerText = '这是添加到div1的文字';
// 为id为box2的div更新内容
var box2 = document.getElementById('box2');
box2.innerText = '这是更新到div2的文字';
// 里面的标签不会被解析
var box3 = document.getElementById('box3');
box3.innerText = '<h1>不会被解析的标签</h1>';
</script>
</body>
</html>
3、元素的innerHTML属性
1、将文本内容添加/更新到任意标签位置
2、文本包含的标签会被解析
3、示例代码:
<!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>
<div id="box1"></div>
<div id="box2">这里的值会更新</div>
<div id="box3">这里的标签会被解析</div>
<script>
// 为id为box1的div添加内容
var box1 = document.getElementById('box1');
box1.innerHTML = '这是添加到div1的文字';
// 为id为box2的div更新内容
var box2 = document.getElementById('box2');
box2.innerHTML = '这是更新到div2的文字';
// 里面的标签不会被解析
var box3 = document.getElementById('box3');
box3.innerHTML = '<h1>不会被解析的标签</h1>';
</script>
</body>
</html>
4、案例
<!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>
div {
display: inline-block;
width: 150px;
height: 30px;
border: 1px solid pink;
vertical-align: middle;
text-align: center;
line-height: 30px;
}
</style>
</head>
<body>
抽中的选手:<div></div>
<script>
// 获取元素
var box = document.querySelector('div');
// 得到随机名字
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
// 声明一个数组
let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操'];
// 生成一个随机数,作为数组索引号
let random = getRandom(0, arr.length - 1);
// 写入标签内部
box.innerHTML = arr[random];
// 删除这个人名,arr.splice(从哪里开始删, 删几个)
arr.splice(random, 1);
</script>
</body>
</html>
四、设置/修改DOM元素属性
1、设置修改元素常用属性
1、可以通过JS设置和修改标签元素的属性
2、常见属性:href、title、src
3、语法:对象.属性 = 值
4、示例代码:
<!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>
<img src="./img/a.png" alt="测试图片" />
<script>
// 获取图片元素
let imgs = document.querySelector('img');
//修改元素的src属性
imgs.src = './img/b.png';
imgs.title = '我是风景图片';
</script>
</body>
</html>
2、设置修改元素的样式属性
1、通过style属性操作CSS
1、可以通过JS设置修改元素的样式属性
2、比如轮播图小圆点自动更换颜色样式
3、点击按钮可以滚动图片,是通过移动图片的位置left实现的
4、语法:对象.style.样式属性 = 值
5、示例代码:
<!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>
<div></div>
<script>
// 获取元素
let box = document.querySelector('div');
//设置样式属性
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = 'pink'
</script>
</body>
</html>
2、通过className操作CSS
1、 操作类名(className) 操作CSS:如果修改的样式比较多,直接通过style属性修改比较繁琐,我们可以通过借助于css类名的形式。
2、语法:元素.className = ‘类名’
3、注意点:
- 由于class是关键字,所以使用className去代替
- className是使用新值换旧值,如果需要添加一个类,需要保留之前的类名
4、示例代码:
<!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>
div {
width: 100px;
height: 100px;
background-color: pink;
}
.new {
width: 300px;
height: 300px;
background-color: skyblue;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="one"></div>
<script>
// 获取元素
let box = document.querySelector('.one');
// 设置样式,保留之前的类名
box.className = 'one new';
</script>
</body>
</html>
3、通过classList操作CSS
1、为了解决className容易覆盖以前的类名,我们可以通过classList方式追加和删除类名
2、语法:
语法 | 说明 |
---|---|
元素.classList.add(‘类名’) | 追加一个类 |
元素.classList.remove(‘类名’) | 删除一个类 |
元素.classList.toggle(‘类名’) | 切换一个类 |
3、示例代码:
<!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>
.one {
width: 100px;
height: 100px;
background-color: pink;
}
.new {
width: 300px;
height: 300px;
background-color: skyblue;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="one"></div>
<script>
// 获取元素
let box = document.querySelector('.one');
// 追加一个类
box.classList.add('new');
// 删除一个类
box.classList.remove('one');
// 切换一个类
box.classList.toggle('one');
</script>
</body>
</html>
3、设置修改表单元素属性
1、表单在很多情况下,也需要修改属性,比如点击眼睛可以看到密码,本质就是把表单类型转换为文本框。
2、获取表单属性:DOM对象.属性名
3、设置表单属性:DOM对象.属性名 = 新值
4、表单属性中添加就有效果,移出就没有效果,一律使用布尔值表示,如果为true代表添加了该属性,如果为false代表移出了该属性,比如:disabled、checked、selected
5、示例代码:
<!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 type="text" placeholder="请输入" />
<button disabled>按钮</button>
<input type="checkbox" class="box" />
<script>
// 获取元素
let input = document.querySelector('input');
// 取值
console.log(input.value);
// 设置值
input.value = '这是设置的值';
input.type = 'password';
// 启用按钮
let btn = document.querySelector('button');
btn.disabled = false;
// 勾选复选框
let checkbox1 = document.querySelector('.box');
checkbox1.checked = true;
</script>
</body>
</html>
五、定时器-间歇函数
1、开启定时器
1、开启定时器:setInterval(函数,间隔时间)
2、作用:每隔一段时间调用这个函数,间隔时间单位是毫秒
2、关闭定时器
1、语法:
let 变量名 = setInterval(函数,间隔时间)
clearInterval(变量名)
2、注意:函数名不需要加括号,定时器返回的是一个id数字
3、示例代码:
<!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>
<script>
function show() {
console.log('好好学习,每天坚持');
}
// 设置定时器,每隔1秒就调用一次show函数,show函数不需要加括号
let timer = setInterval(show, 1000);
// 清除定时器
clearInterval(timer);
</script>
</body>
</html>