Web API 基本认知
作用: 就是使用 JS 去操作 html 和浏览器
分类：DOM (文档对象模型)、BOM（浏览器对象模型）
DOM（Document Object Model——文档对象模型）
是用来呈现以及与任意 HTML 或 XML文档交互的API
白话文：DOM是浏览器提供的一套专门用来 操作网页内容 的功能
DOM作用 ： 开发网页内容特效和实现用户交互
DOM树
将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树 描述网页内容关系的名词 作用：文档树直观的体现了标签与标签之间的关系
DOM对象：浏览器根据html标签生成的 JS对象
所有的标签属性都可以在这个对象上面找到
修改这个对象的属性会自动映射到标签身上
DOM的核心思想
把网页内容当做对象来处理
document 对象
是 DOM 里提供的一个对象
所以它提供的属性和方法都是用来访问和操作网页内容的
例：document.write()
网页所有内容都在document里面
获取DOM元素
根据CSS选择器来获取DOM元素 (重点)
我们想要操作某个标签首先做什么？
肯定首先选中这个标签，跟 CSS选择器类似，选中标签才能操作
查找元素DOM元素就是选择页面中标签元素
学习路径： 根据CSS选择器来获取DOM元素 重点 其他获取DOM元素方法（了解）
- 根据CSS选择器来获取DOM元素 (重点)
选择匹配的第一个元素
语法：
document.querySelector('css选择器')
参数:
包含一个或多个有效的CSS选择器 字符串
返回值：
CSS选择器匹配的第一个元素,一个 HTMLElement对象。
如果没有匹配到，则返回null。
多参看文档：developer.mozilla.org/zh-CN/docs/…
<div>div元素</div>
<input type="text"Iclass="iinn" />
<script>
// dom对象 是浏览器自动帮我们创建好了
// 1 div标签也会被 浏览器自动生成一个dom对象
// 2 input 标签 也会被 浏览器 自动生成一个dom对象
// 3 获取下 dom对象*/
document.querySelector("要获取哪个dom元素，这个dom元素的选择器告诉我")// document.querySelector("选择器就是指学习过css选择器")
// let divDom = document.querySelector('div');// dom对象 应该也是{属性名:属性值}
// console.log(divDom);// <div>div元素</div>
// console.log 如果输出的是一个 dom对象，就把标签的模样显示出来
//我们在输出打印 dom对象的时候 不再使用 console.log, console.dir()
// console.dir(divDom);
// <div>div元素</div>
// 我想要获取一下input标签的dom对象
let inputDom = document.querySelector('div');// 找不到元素 输出 null
console.dir(inputDom);
/*小结
1想要获取页面的标签 可以通过document.querySelector(选择器)
2 querySelector 只能够获取第一个满足条件的标签
3 如果选择器找不到元素 querySelector 只会返回 null
4 如果我们想要输出和打印 dom元素
不要再使用 console.log
改为 使用 console.dir
*/
</script>
2 选择匹配的多个元素
语法：
document.querySelectorAll('css选择器')
参数:
包含一个或多个有效的CSS选择器 字符串
返回值：
CSS选择器匹配的NodeList 对象集合
例如：
document.querySelectorAll('div')
得到的是一个伪数组：
有长度有索引号的数组
但是没有 pop() push() 等数组方法
想要得到里面的每一个对象，则需要遍历（如 for）的方式获得。
注意事项
哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个伪数组，里面只有一个元素而已
演示
<body>
<!-- <ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div>123</div> -->
<div id="nav">id选择器</div>
<p>这是p标签</p>
<div class="container">也是div</div>
<script>
// document.querySelector 只能获取第一个复合要求的li标签
// let lis = document.querySelector('li')
// 获取所有li标签 返回一个数组标签
// let lis = document.querySelectorAll('li')
// // 数组可以和循环搭配
// for (let index = 0; index < lis.length; index++) {
// // 文本： lis[index].innerText
// lis[index].innerText = '这厮li标签' + index;
// }
// let divs = document.querySelectorAll('div')
// console.log(divs);// 输出什么 空数组
// 了解
// 以前的写法 根据id来获取 一个dom元素
let nav = document.getElementById("nav")
console.log(nav);
// 根据标签名称 来获取dom元素 一组dom元素
// let ps = document.getElementsByTagName("p")
// console.log(ps);
// 根据 类名来获取元素
let divs = document.getElementsByClassName("container")
console.log(divs);
// 以上做为了解
// 常用方便
// 获取一个
// document.querySelector("#nav")
// document.querySelector("p")
// document.querySelector(".container")
// 获取一组
// document.querySelectorAll
</script>
其他获取DOM元素方法**（了解）**
<body>
<!-- <ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div>123</div> -->
<div id="nav">id选择器</div>
<p>这是p标签</p>
<div class="container">也是div</div>
<script>
// 了解
// 以前的写法 根据id来获取 一个dom元素
let nav = document.getElementById("nav")
console.log(nav);
// 根据标签名称 来获取dom元素 一组dom元素
let ps = document.getElementsByTagName("p")
console.log(ps);
// 根据 类名来获取元素
let divs = document.getElementsByClassName("container")
console.log(divs);
// 以上做为了解
// 常用方便
// 获取一个
// document.querySelector("#nav")
// document.querySelector("p")
// document.querySelector(".container")
// 获取一组
// document.querySelectorAll
</script>
设置/修改DOM元素内容
DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象。
就是操作对象使用的点语法。
如果想要修改标签元素的里面的内容，则可以使用如下几种方式：
学习路径：
document.write( ) 方法
对象.innerText 属性
对象.innerHTML 属性
-
document.write()
只能将文本内容追加到 /body 前面的位置
文本中包含的标签会被解析
-
元素innerText 属性
将文本内容添加/更新到任意标签位置
文本中包含的标签不会被解析
-
元素.innerHTML 属性
将文本内容添加/更新到任意标签位置
文本中包含的标签会被解析
演示
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
// 以后就很少用 document.write 功能弱 只能把标签写在 /body 标签上面
document.querySelector('li:nth-child(2)').innerText = '<button> 岁月无情</button>'
document.querySelector('li:nth-child(3)').innerHTML = '<button> 岁月无情</button>'
/*
3种实现在标签中写动态设置文本
1、document.write 只能在body标签中写 以后很少使用它
2、innerText 只能设置文本 不能解析 html字符串
innerHTML 可以设置文本 也能解析 html字符串
*/
</script>
设置/修改DOM元素属性
-
设置/修改元素常用属性
还可以通过 JS 设置/修改标签元素属性，比如通过 src更换 图片
最常见的属性比如： href、title、src 等
语法：
案例 : 页面刷新，图片随机更换
<img src="" alt="">
<script>
let pic = [
'../../黑马开学/前端的学习01/图片/mmexport1394031623562.jpg',
'../../黑马开学/前端的学习01/图片/mmexport1395934214907.jpg',
'../../黑马开学/前端的学习01/图片/mmexport1396876580621.jpg',
'../../黑马开学/前端的学习01/图片/mmexport1397567483088.jpg',
'../../黑马开学/前端的学习01/图片/mmexport1406208117422.jpg'
]
let index = Math.round(Math.random() * (pic.length-1))
let img = document.querySelector("img")
img.src = pic[index]
</script>
-
设置/修改元素样式属性
还可以通过 JS 设置/修改标签元素的样式属性。
比如通过 轮播图小圆点自动更换颜色样式
点击按钮可以滚动图片，这是移动的图片的位置 left 等等
学习路径：
通过 style 属性操作CSS
操作类名(className) 操作CSS
通过 classList 操作类控制CSS
1.通过 style 属性操作CSS
演示
<div>不同</div>
<script>
// 获取元素
let div = document.querySelector('div')
// 开始修改
div.style.fontSize="100px"
div.style.color="skyblue"
div.style.backgroundColor="yellow"
div.style.height="300px"
div.style.width="400px"
</script>
案例 随机点名
<h1>我想要和下面的同学一起吃饭</h1>
<h2></h2>
<script>
// 1、同学姓名 存在一个数组中
let userName = ['赵云', '诸葛流云', '马云', '小云', '韩菱纱',' 云天舒', '玄霄', '慕容紫英', '紫胤真人']
// 随机抽取输送到页面标签h2中
// 获取随机数
function getRandom(min,max){
return Math.floor(Math.random() * (max - min + 1) + min)
}
// 输入实参
let index = getRandom(0, userName.length - 1)
let h2Dom = document.querySelector('h2')
h2Dom.innerText = userName[index]
userName.splice(index, 1)
console.log(userName);
</script>
案例 ： 更换背景颜色
<script>
// 修改背景颜色 用数组方式 颜色固定 改动麻烦 不灵活
// document.querySelector("button").onclick=function(){
// let userName = ['blue', 'red', 'yellow', 'skyblue', 'pink', 'black']
// // document.body.style.backgroundColor="black"
// let index = Math.round(Math.random() * userName.length-1)
// let body = document.querySelector("body")
// body.style.backgroundColor=`${userName[index]}`
// }
// 方式2 背景颜色 由数字更替
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})`
</script>
案例 ： 页面刷新，页面随机更换背景图片
需求：当我们刷新页面，页面中的背景图片随机显示不同的图片
分析：
①： 随机函数
②： css页面背景图片 background-image
③： 标签选择body， 因为body是唯一的标签，可以直接写 document.body.style
<script>
// 方式1
// let pic = [
// '../图片/mmexport1394031623562.jpg',
// '../图片/mmexport1395934214907.jpg',
// '../图片/mmexport1396876580621.jpg',
// '../图片/mmexport1397567483088.jpg',
// '../图片/mmexport1406208117422.jpg'
// ]
// function backgroundImage(min, max) {
// return Math.round(Math.random() * (max - min) + min)
// }
// let index = backgroundImage(0, pic.length-1)
// document.body.style.backgroundImage=`url('${pic[index]}')`
// 方式2
let pic1 = [
'../图片/mmexport1394031623562.jpg',
'../图片/mmexport1395934214907.jpg',
'../图片/mmexport1396876580621.jpg',
'../图片/mmexport1397567483088.jpg',
'../图片/mmexport1406208117422.jpg'
]
let index1 = Math.round(Math.random() * (pic1.length-1))
document.body.style.backgroundImage=`url(${pic1[index1]})`
// 方式3 用类名实现 数组里面通过类名调用外部文件实现
// let pics = ['d1', 'd2', 'd3', 'd4']
// let index2 = Math.round(Math.random() * (pic1.length-1))
// document.body.classList.add(pics[index2])
</script>
- 操作类名(className) 操作CSS
如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。
语法：
注意：
由于class是关键字, 所以使用className去代替
className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名
-
通过 classList 操作类控制CSS
为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
语法：
演示 className 与 classList
<style>
.box{
margin: 100px auto;
width: 300px;
height: 300px;
background-color: aqua;
}
.son{
width: 500px;
height: 500px;
border-radius: 50%;
background-color: yellow;
}
</style>
</head>
<body>
<div class="one"></div>
<script>
// className 会先清空这个dom的元素 旧的所有的类 以空格做分割即可
// js的方式来动态添加上这个class
let div = document.querySelector('div');
// 通过className 来设置类名即可
// 同时设置两个类上去 会有涉及层叠
div.className = 'box son'
// classList 添加一个类 className会先清空这个dom的元素 旧的所有的类 classList 不会
// 可以一个一个加 也可一次多个
div.classList.add("d2", "d3", "d4")
// 单独来指定移除一个class
div.classList.remove("d2", "d3")
// 切换 （如果本来有 那就移除 没有那就新添加一个）
div.classList.toggle("d5")
</script>
设置/修改 表单元素 属性
表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框 正常的有属性有取值的 跟其他的标签属性没有任何区别
获取: DOM对象.属性名
设置: DOM对象.属性名 = 新值
表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代表移除了该属性
比如： disabled、checked、selected
演示 - 文本域标签
<textarea>你好</textarea>
<script>
// 获取文本域标签
// 属于表单元素 又是双标签
let textarea = document.querySelector('textarea')
// 在 html想要设置文本域的内容 直接在标签内写即可
// <textarea>你好</textarea>
// 获取文本域标签中的值
console.log(textarea.value); // 获取 ok 你好
console.log(textarea.innerText); // 获取 不ok 空白
console.log(textarea.innerHTML); // 获取 ok 你好
// value 有区别 innerHTML
// 设置 textarea 里面文本的内容的时候 可以选择在标签内写文本
// 想要获取内容有两种
// .value 原样获取内容
// .innerHTML 获取的内容如果包含html 会转义
// 通过js的方式来设置内容
// textarea.value = `<h1>标题</h1>` // ok
// textarea.innerText = `<h1>标题</h1>` // ok
// textarea.innerHTML = `<h1>标题</h1>` // ok
// 控制台显示效果
// console.log(textarea.value); // 输出结果 <h1>标题</h1>
// console.log(textarea.innerText); // 空白 解析不了
// console.log(textarea.innerHTML); // 输出结果 <h1>标题</h1>
</script>
演示 - 输入框与按钮跟下拉列表
<!-- 可以在button里面写 disabled 禁用按钮 -->
<!-- <button class="code" disabled>发送验证码</button> -->
<button class="code">发送验证码</button>
<input type="text" class="username" />
是否同意协定
<input type="checkbox" class="isarg" checked />
<select class="sel">
<option>去泰国</option>
<option>去非洲</option>
<option>去印度</option>
<option>去阿富汗</option>
<script>
// innerText innerHTML 主要是用来设置 双标签的文本内容的
// 获取一下表单 dom元素
let username = document.querySelector('.username');
// 复选框
let isarg = document.querySelector('.isarg');
// 按钮
let code = document.querySelector('.code');
// 设置文本内容
// username.innerText = '我的用户名';
// 设置输入框的文本内容
username.value = '我的用户名';
// console.log(username);
// 设置 input标签默认勾选 ：isarg.checked = true(勾选) / false(不勾选);
// isarg.checked = true;
// 设置按钮 可以启用 可以点击
// disabled 禁用
code.disabled = true; // 禁用
// code.disabled = false; // 启用
// select 选中
let option = document.querySelector('option:nth-child(4)');
// option.select = true; // 错误的单词
option.selected = true; // 正确的单词
/*
/*
表单属性的总结
1、设置普通的输入框 input.value = "表单的值"
2、设置 按钮的禁用
button.disabled=true 禁用
button.disabled=false 启用
3、设置单选框或者复选框
radio.checked=true 选中
CheckBox.checked=false 取消选中
4、设置下拉列表 select
option.selsected 选中
*/
</script>
综合表单案例
<style>
* {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 500px;
margin: 100px auto;
text-align: center;
}
th {
background-color: #09c;
font: bold 16px '微软雅黑';
color: #fff;
height: 24px;
}
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
.allCheck {
width: 80px;
}
</style>
<body>
<table>
<tr>
<th class="allCheck">
<input type="checkbox" name="" id="checkAll" />
<span class="all">全选</span>
</th>
<th>商品</th>
<th>商家</th>
<th>价格</th>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>小米手机</td>
<td>小米</td>
<td>￥1999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>小米净水器</td>
<td>小米</td>
<td>￥4999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>小米电视</td>
<td>小米</td>
<td>￥5999</td>
</tr>
</table>
</head>
<script>
// 获取符合选择器要求的数组
let checkList = document.querySelectorAll('.ck')
let checkAll = document.querySelector('#checkAll')
// 监听点击 绑定点击 注册点击
checkAll.addEventListener('click', function(){
// ck.checked = checkAll.checked
// 设置复选框选中状态等于全选框的选中状态
for (let index = 0; index < checkList.length; index++) {
checkList[index].checked = checkAll.checked
}
})
for (let index = 0; index < checkList.length; index++) {
checkList[index].addEventListener('click', function(){
let checked = isAllChecked()
checkAll.checked = checked
})
}
function isAllChecked(){
let checkedNum = 0
for (let index = 0; index < checkList.length; index++) {
if(checkList[index].checked){
checkedNum++
}
}
if(checkedNum === checkList.length){
return true
} else {
return false
}
}
</script>
</body>
综合表单案例--简略优化版
<style>
* {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 500px;
margin: 100px auto;
text-align: center;
}
th {
background-color: #09c;
font: bold 16px '微软雅黑';
color: #fff;
height: 24px;
}
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
.allCheck {
width: 80px;
}
</style>
</head>
<body>
<script>
/* 先写好基本布局 重点去拼接 html
先拼头 部分 再去遍历部分
对数组和对象的数据获取
拼接结尾部分
*/
let goods = [
{article: '小米手机', shops:'小米', price: '￥1999'},
{article: '小米净水器', shops:'小米', price: '￥4999'},
{article: '小米电视', shops:'小米', price: '￥5999'}
]
// tabltHTML 设置开头table 结尾再拼接
//th是列表标题部分 不用重复 因此把th跟table写在开头一起 中间部分做遍历
let tabltHTML = `
<table>
<tr>
<th class="allCheck"> <input type="checkbox" name="" id="checkAll" /> <span class="all">全选</span> </th>
<th>商品</th>
<th>商家</th>
<th>价格</th>
</tr>`
// 遍历生成 外部循环 goods 的数组 数组里有几个就循环几次
for (let index = 0; index < goods.length; index++) {
// 外循环 添加表格里的复选框 跟数组循环
tabltHTML += `
<tr>
<td><input type="checkbox" class="ck" /></td>`
// 对 对象做forin遍历 goods[index] = goods[article] 索引号0-2
for (let k in goods[index]) {
let person = goods[index] // 数组中的每一个对象
tabltHTML += ` <td>${person[k]}</td>`
}
// 中间tr的结尾
tabltHTML += `</tr>`
}
// 首尾相接
tabltHTML += `</table>`
// 输出列表 结果
document.write(tabltHTML)
// 获取符合选择器要求的数组 开始交互功能
let checkList = document.querySelectorAll('.ck')
let checkAll = document.querySelector('#checkAll')
// 监听点击 绑定点击 注册点击
checkAll.addEventListener('click', function(){
// ck.checked = checkAll.checked
// 设置复选框选中状态等于全选框的选中状态
for (let index = 0; index < checkList.length; index++) {
checkList[index].checked = checkAll.checked
}
})
for (let index = 0; index < checkList.length; index++) {
checkList[index].addEventListener('click', function(){
let checked = isAllChecked()
checkAll.checked = checked
})
}
function isAllChecked(){
let checkedNum = 0
for (let index = 0; index < checkList.length; index++) {
if(checkList[index].checked){
checkedNum++
}
}
if(checkedNum === checkList.length){
return true
} else {
return false
}
}
</script>
定时器-间歇函数
定时器函数介绍
网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发
例如：网页中的倒计时
要实现这种需求，需要定时器函数
定时器函数有两种，今天我先讲间歇函数
定时器函数基本使用
定时器函数可以开启和关闭定时器
- 开启定时器
语法
setInterval(函数, 间隔时间);
作用：
每隔一段时间调用这个函数
间隔时间单位是毫秒
案例 ：定时器
<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);
// 清楚定时器
let index = 0
let timeId = setInterval(function(){
index++
console.log('开始追杀模式', index);
// 判断是否满足条件
if (index === 30){
// 放弃 结束
clearInterval(timeId)
}
}, 100)
</script>
案例 ：倒计时效果
<button></button>
<script>
// 定义一个时间
let times = 60
// 获取以下bth对象
let bth = document.querySelector('button')
setInterval(function(){
// console.log(times); // 打印1
bth.innerText = times
times-- // 0
// 当times === -1 重新设置为60
if (times === -1){
times = 60
}
}, 1000)
</script>
案例 : 网页轮播图效果
需求：每隔一秒钟切换一个图片
分析：
①：获取元素（图片）
②：设置定时器函数
设置一个变量++
更改图片张数
③：处理图片自动复原从头播放
如果图片播放到最后一张就是第9张
则把变量重置为0
注意逻辑代码写到图片变化的前面
<body>
<img src="../wep/day1/04-代码/code/images/b01.jpg" alt="">
<script>
let index = 1
let img =document.querySelector('img')
setInterval(function(){
// console.log("当前图片要用", index);
// 设置图片地址
img.src = `../wep/day1/04-代码/code/images/b0${index}.jpg`
index++
if (index === 10){
index = 1
}
}, 1000)
</script>
