Web APIs 第一天
DOM-获取DOM元素、修改属性
基本认知：
- 能获取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里面。
例如： document.write()
一、获取DOM元素
查找元素DOM元素就是选择页面中标签元素
根据CSS选择器来获取DOM元素
选择匹配的第一个元素
语法：document.querySelector('css选择器')
参数：包含一个或多个有效的CSS选择器 字符串
返回值：CSS选择器匹配的第一个元素,一个 HTMLElement对象。
如果没有匹配到，则返回null。
选择匹配的多个元素
语法：document.querySelectorAll('css选择器')
参数：包含一个或多个有效的CSS选择器 字符串
返回值：CSS选择器匹配的NodeList 对象集合
例如：document.querySelectorAll('ul li')
小思考
-
获取一个DOM元素使用的是：querySelector( )
-
获取多个DOM元素使用的是：querySelectorAll( )
-
querySelector( ) 方法获取到的元素可以直接操作修改
-
querySelectorAll() 方法获取到的元素不可以直接修改，只能通过遍历的方式。依次给里面的元素做修改。
二、获取DOM对象
根据CSS选择器来获取DOM元素 (重点)
<button>冠希哥</button>
<script>
let btn = document.querySelectorAll('button');
console.log(btn);
</script>
得到的是一个伪数组：
有长度有索引号的数组，但是没有 pop() push() 等数组方法。
想要得到里面的每一个对象，则需要遍历（如 for）的方式获得。
！！！注意事项！！！
哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个伪数组，里面只有一个元素而已。
-
其他获取DOM元素方法（了解）
小思考
- 获取页面中的标签我们最终常用那两种方式？
querySelectorAll( )
querySelector( )
- 他们两者的区别是什么？
querySelector( ) 只能选择一个元素， 可以直接操作
querySelectorAll( ) 可以选择多个元素，得到的是伪数组，需要遍历得到每一个元素
- 他们两者小括号里面的参数有什么注意事项？
里面写css选择器；必须是字符串，也就是必须加引号
三、设置/修改DOM元素内容 ：
能够修改元素的文本更换内容 ；
DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象。
就是操作对象使用的点语法。
如果想要修改标签元素的里面的内容，则可以使用如下几种方式：
学习路径：
1.document.write() 方法
2.对象.innerText 属性
3.对象.innerHTML 属性
1.document.write( )
只能将文本内容追加到 前面的位置
文本中包含的标签会被解析
<script>
// 永远都只是追加操作，且只能位置</body>前
document.write('Hello World!');
document.write('<h3>我是陈冠希</h3>');
</script>
2. 元素 innerText 属性
将文本内容添加/更新到任意标签位置
文本中包含的标签不会被解析
<script>
// innerText 将文本内容添加 / 更新到任意标签位置
let info = document.getElementById('info')
// intro.innertext = '陈冠希'
info.innerText = '<h4>陈冠希</h4>'
</script>
3. 元素 innerHTML 属性
将文本内容添加/更新到任意标签位置
文本中包含的标签会被解析
<script>
//innerHTML属性
box.innerHTML = '<h3>我叫陈冠希<br>大点声我听不见</h3>'
</script>
小思考
- 设置/修改DOM元素内容有哪3钟方式？
document.write() 方法
元素.innerText 属性
元素.innerHTML 属性
- 三者的区别是什么？
document.write() 方法 只能追加到body中
元素.innerText 属性 只识别内容，不能解析标签
元素.innerHTML 属性 能够解析标签
innerHTML（个人推荐）
<body>
<h1>人生三件大事吃饭抽烟喝酒</h1>
<h2>xxx</h2>
<script>
// 1. 获取 输入框输入的同学的名称
// 2. 把名字 显示到 h2标签中
/* 获取h2标签对应的dom元素
使用代码修改文本内容
dom元素.innerText = "修改的内容"
*/
let userName = prompt('请输入你要和谁一起吃饭')
let h2Dom = document.querySelector('h2');
// h2标签中的文字 就等于 userName
h2Dom.innerText = userName;
</script>
</body>
四、设置/修改DOM元素属性
1.设置/修改元素常用属性
还可以通过 JS 设置/修改标签元素属性，比如通过src更换 图片.
最常用的属性，例如：href、title、src等.
语法：对象 . 属性 = 值
<script>
// 1.获取元素
let pic = document.querySelector('img')
// 2.操作元素
pic.src = './images/b02.jpg'
pic.title = '这是一个图片'
</script>
<body>
<img src="" alt="">
<script>
let userName = [
'./d06d3772270007ccaeb914285a641c6.png',
'./dbe7adef623fd22c059a16addacffbf.png',
'./f6ff5a8427ecc5fe8a6d60413ce08c3.png',
'./fd3e2f2407024e6d18014b36841dfb1.png',
];
let index = Math.round(Math.random() * 3);
let img = document.querySelector('img');
img.src = userName[index];
</script>
</body>
案例--随机显示网页背景显示颜色：
<body>
<script>
// 实现方法1 不灵活
// let userName = [
// 'red',
// 'orange',
// 'yellow',
// 'green',
// 'skyblue',
// 'blue',
// 'black',
// ];
// let index = Math.round(Math.random() * 5);
// let body = document.querySelector('body');
// document.body.style.backgroundColor = userName[index];
// 方法2 背景颜色 rgb（0-255，0-255，0-255）
function getR(min, max) {
return Math.round(Math.random() * (max - min) + min);
}
// 设置变量
let color1 = getR(0, 255);
let color2 = getR(0, 255);
let color3 = getR(0, 255);
document.body.style.backgroundColor = `rgb(${color1},${color2},${color3})`;
/*
新案例的时候 回顾旧的案例
每一次刷新页面的时候 body标签 随机显示颜色
实现方式1 颜色只有 n种 无法做到更加灵活
*/
// let colors = ['red', 'black', 'pink', 'yellow'];
// let index = Math.round(Math.random() * (colors.length - 1));
// // index 0 3
// // document.querySelector("body")
// document.body.style.backgroundColor = colors[index];
// 2 方式方式2 背景颜色 rgb(0-255,0-255,0-255)
// function getRandomColor(min, max) {
// return Math.round(Math.random() * (max - min) + min);
// }
// // 随机数1 0-255
// let color1 = getRandomColor(0, 255);
// // 随机数2 0-255
// let color2 = getRandomColor(0, 255);
// // 随机数3 0-255
// let color3 = getRandomColor(0, 255);
// // document.body.style.backgroundColor = `rgb(${color1},${color2},${color3})`;
// // 先写上 `rgb(100,200,150)`; 来验证 格式没有写错
// document.body.style.backgroundColor = `rgb(${color1},${color2},${color3})`;
</script>
</body>
2. 设置/修改元素样式属性
还可以通过 JS 设置/修改标签元素的样式属性。
比如通过 轮播图小圆点自动更换颜色样式。
点击按钮可以滚动图片，这是移动的图片的位置 left 等等。
1.通过 style 属性操作CSS
语法：对象.style.样式属性 = 值
<script>
let box = document.querySelector('.box')
// 修改背景颜色
box.style.backgroundColor = 'red'
box.style.width = '200px'
box.style.marginTop = '50px'
</script>
！！！注意！！！
-
修改样式通过style属性引出。
-
如果属性有 - 连接符，需要转换为小驼峰命名法。
-
赋值的时候，需要的时候不要忘记加css单位。
小思考
-
设置/修改元素样式属性通过________属性引出来？style
-
如果需要修改一个div盒子的样式，比如 padding-left, 如何写？
element.style.paddingLeft = ‘300px’ ； 小驼峰命名法
- 因为我们是样式属性，一定别忘记，大部分数字后面都需要加单位
2.操作类名(className) 操作CSS
如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。
语法：元素.className = 'active'( active 是一个css类名 )
注意：
1.由于class是关键字, 所以使用className去代替
2.className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名
3.className可以同时修改多个样式；直接使用calssName赋值会覆盖以前的类名
3.通过 classList 操作类控制CSS
为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
使用className 和classList的区别？
修改大量样式的更方便；
修改不多样式的时候方便；
classList 是追加和删除不影响以前类名
3.设置/修改 表单元素 属性
表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框
正常的有属性有取值的 跟其他的标签属性没有任何区别
获取: DOM对象.属性名
设置: DOM对象.属性名 = 新值
表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代表移除了该属性
比如： disabled、checked、selected
定时器 - 间歇函数（！重点 ！）
定时器函数介绍：
- 网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发
- 例如：网页中的倒计时
- 要实现这种需求，需要定时器函数
- 定时器函数有两种，今天我先讲间歇函数
定时器函数基本使用：
定时器函数可以开启和关闭定时器。
1.开启定时器
setInterval ( 函数，间隔时间 )
- 作用：每隔一段时间调用这个函数
- 间隔时间单位是毫秒
2.关闭定时器
一般不会刚创建就停止，而是满足一定条件再停止
小思考
1.定时器函数有什么作用？可以根据时间自动重复执行某些代码
2.定时器函数如何开启？setInterval(函数名, 时间)
<body>
<script>
// 函数 负责 定时执行的业务
// function repeat() {
// console.log('前端程序员，头发多');
// }
// 每隔一秒执行一次函数
// 时间单位 毫秒 1000毫秒=1秒
// setInterval(repeat, 1000);
// 其他模样的写法
// setInterval(匿名函数,1000);
setInterval(function(){
console.log("头发没有啦");
},1000);
</script>
</body>
综合案例：倒计时+轮播图
倒计时:
<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>
轮播图：
<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>
</body>
