Web API - day01
JS - DOM-获取DOM元素、修改属性
1. Web API 基本认知
- .能获取DOM元素并修改元素属性
- .具备利用定时器间歇函数制作焦点图切换的能力
①. 作用和分类
- 作用: 就是使用 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 里面
2.获取DOM 对象
- 查找元素DOM元素就是选择页面中标签元素
- 想要操作某个标签：首先选中这个标签，跟 CSS选择器类似，选中标签才能操作
①. 根据CSS选择器来获取DOM元素 (重点)
（1）选择匹配第一个元素
语法：
<script>
let divDom = document.querySelector('css 选择器')
</script>
复制代码
参数: 包含一个或多个有效的CSS选择器 字符串
返回值： CSS选择器匹配的 第一个元素 ,一个 HTMLElement对象。如果没有匹配到，则返回null。
（2）选择匹配多个元素
语法：
<script>
let divDom = document.querySelectorAll('css 选择器')
</script>
复制代码
参数：包含一个或多个有效的CSS选择器 字符串
**返回值：**CSS选择器匹配的 NodeList 对象集合
例如：
<script>
let divDom = document.querySelectorAll('li')
</script>
复制代码
(3) 补充
- 得到的是一个 伪数组：
》有长度有索引号的数组
》但是没有 pop() push() 等数组方法
- 想要得到里面的每一个对象，则需要遍历（如 for）的方式获得。
- 注意事项：*哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个*伪数组，里面只有一个元素而已
②.其他获取DOM元素方法（了解）
③. 小结：
（1）获取页面中的标签我们最终常用那两种方式？
》querySelectorAll()
》querySelector()
（2）他们两者的区别是什么？
》querySelector() 只能选择一个元素， 可以直接操作
》querySelectorAll() 可以选择多个元素，得到的是伪数组，需要遍历得到每一个元素
（3）他们两者小括号里面的参数有神马注意事项？
》里面写css选择器
》必须是字符串，也就是必须加引号
3.设置 / 修改DOM
①. 修改DOM内容
-
DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象。就是操作对象使用的点语法。
-
想要修改标签元素的里面的内容，则可以使用如下几种方式：
document.write() 方法
- 只能将文本内容追加到 前面的位置
- 文本中包含的标签会被解析
语法：
<script> // 永远都只是追加操作，且只能位置</body>前 document.write('Hello World!') document.write('<h3>你好，世界！</h3>') </script> 复制代码2. 对象.innerText 属性
- 将文本内容添加/更新到任意标签位置
- 文本中包含的标签不会被解析
语法：
3. 对象.innerHTML 属性
- 将文本内容添加/更新到任意标签位置
- 文本中包含的标签会被解析
②. 修改DOM样式属性
语法：
<script>
let divDom = document.querySelector('div')
divDom.style.fontSize = '100px'
divDom.style.height = '300px'
divDom.style.width = '300px'
divDom.style.marginTop = '100px'
divDom.style.margin = 'auto'
divDom.style.backgroundColor = 'aliceblue'
</script>
复制代码
操作类名(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>
.box {
width: 100px;
height: 100px;
background-color: aqua;
margin: 100px auto;
}
.redCls {
border-radius: 50%;
height: 400px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
<script>
let div = document.querySelector('div')
// 这样就可以给div 添加新的类名了 ( box redCls )
div.className = 'box redCls'
/* 注意：
由于class是关键字, 所以使用className去代替
className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名 */
</script>
</body>
</html>
复制代码
③. 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>
d1 {
background-color: aqua;
}
d2 {
height: 300px;
}
d3 {
width: 400px;
}
d4 {
border-radius: 50%;
}
</style>
</head>
<body>
<div class="d1">13321</div>
<script>
let div = document.querySelector('div');
// div.classList.add 添加一个类
div.classList.add('d2','d3','d4')
// 单独来指定移除一个class
div.classList.remove('d2','d3')
// 切换 （如果本来有，那me就移除 ， 如果本来就没有，那我就添加）
div.classList.toggle('d4')
</script>
</body>
</html>
复制代码
4.定时器间歇函数
简介
定时器函数的基本使用
<script>
// 函数 负责 定时执行的业务
// function repeat() {
// console.log('前端程序员，头发多');
// }
// 每隔一秒执行一次函数
// 时间单位 毫秒 1000毫秒=1秒
// setInterval(repeat, 1000);
// 其他模样的写法
// setInterval(匿名函数,1000);
setInterval(function(){
console.log("头发没有啦");
},1000);
</script>
复制代码
关闭定时器：
<script>
// 开启了一个定时器 会返回 定时器id
// 不需要关心 这个定时器的id 等于多少， 有id
// let timeId = setInterval(function () {
// console.log('准备吃晚饭');
// }, 1000);
// // console.log(timeId);
// // 清除定时器 一般都是要根据某个条件来清除
// clearInterval(timeId);
// 追女孩子 追30次 不行 我就撤退！！
let index = 0;
// 创建定时器的同时 返回了定时器id
let timeId = setInterval(function () {
index++;
console.log('开始追了', index);
// 判断是否满足条件了
if (index === 30) {
// 放弃 没有缘分
clearInterval(timeId);
}
}, 100);
</script>
<body>
<button></button>
<script>
/*
需求：
1 有一个标签里面的文本内容
60 59 0 60 59 0
2 技术
1 定时器
2 数字--
3 当我们数字减少到 0 的时候 重新设置 times=60
*/
// 定义一个时间
let times = 60;
// 获取一下btn对象
let btn = document.querySelector('button');
setInterval(function () {
// console.log(times); // 打印 1
btn.innerText = times;
times--; // 0
// 当times===0 重新设置为60
if (times === -1) {
times = 60;
}
}, 100);
</script>
综合案例
<body>
<img src="" alt="" />
<script>
/*
需求分析
每间隔一秒 就切换显示一张图片
新案例 一定要找和旧案例之间的联系
1 倒计时案例 60 59 0 .. 60 59 0
轮播图案例 1 2 3 9 ... 1 2 3 ..9
2 布局上的设计！
*/
let index = 1;
let img = document.querySelector('img');
setInterval(function () {
// console.log("当前图片要用",index);
// 设置图片地址
img.src = `./images/b0${index}.jpg`;
index++;
if (index === 10) {
index = 1;
}
}, 1000);
</script>
