一、Web_API 基础认知
1. 作用和分类
作用：使用js去操作html和浏览器
分类：DOM (文档对象模型)BOM（浏览器对象模型）
2. DOM
DOM(document Object Model–文档对象模型)
DOM是浏览器提供的一套专门用来操作网页内容的功能
DOM作用 ：开发网页内容和实现用户交互
3. DOM 树
DOM树：将html 文档以树状结构直观的表现出来，被称为文档树或者DOM树
描述网页内容关系的名词
作用 ：直观提现标签与标签之间的关系
4. DOM对象
DOM对象 ：浏览器根据html 标签生成js对象
所有标签属性都可以在这个对像上面找到
修改这个对象的属性会自动映射到标签上
DOM的核心思想：把网页内容当对象来处理
document 对象
是Dom 里提供的一个对象
它提供的方法和属性都可以用来操作网页内容 例如doucment.write()
网页所有内容都在document 里面
二、获取Dom 对象
通过css 选择器来获取dom 元素
其他方法获取dom 元素
目标： 能查找/获取到DOM 对象
1、通过css选择器来获取DOM元素
1.1、选择匹配元素
语法：
document.querySelector('css选择器')
参数：包含一个或者多个有效css 选择器 字符串
返回值：css选择器匹配到的第一个元素，一个HTMLElenent对象
如果没有匹配到返回null
例子
<div class="one">我是第一个盒子</div>
<div class="two">我是第一个盒子</div>
<div class="three">我是第一个盒子</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
// 获取第三个div
let div =document.querySelector('.three')
console.log(div)
// 获取第三个li
let li3=document.querySelector('ul li:last-child')
</script>
1.2 选择匹配多个原元素
语法
document.querySelectorAll('css选择器')
得到的是一个伪数组 有长度有索引号的数组
没有pop() push()等数组方法
里面得到的每一个对象，则需要遍历（for）的方式获得。
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
// 同时获取多个li
let lis=document.querySelectorAll('ul li')
document.write(lis)
console.log(lis)
// 遍历
for (let i=0;i<lis.length;i++){
console.log(lis[i])
}
</script>
案
2. 其他方法获取DOM元素
// 通过id获取元素
document.getElementById('nav')
// 根据标签获取一类元素
document.getElementByTagName('div')
// 根据类名获取元素
document.getElementByClassNmae('w')
3 设置 /修改Dom 元素内容
document.write() 方法
对象innerText 属性
对象innerHTML 属性
目标:修改元素文本更换内容
3.1、document.write()
只能将文本内容追加到前面的位置
文本中包含的标签会被解析
案例
// 永远都只能是追加操作，且只能在</body>前
document.write("Hellow World!");
documnet.write(<h2>你好世界！</h2>>);
3.2 元素innerText 属性
将文本内容添加/更新到任意标签位置
将文本包含的标签不会被解析
案例
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box1{
width:300px;
height:200px;
background: skyblue;
}
.box2{
width: 300px;
height: 200px;
background-color: coral;
}
</style>
</head>
<body>
<div class=box1>
修改内容box1
</div>
<div class=box2>
修改内容box2
</div>
<script>
// 1 获取标签
let box1 = document.querySelector('.box1')
let box2 = document.querySelector('.box2')
// 修改标签内容
box1.innerText='使用innerText修改'
box2.innerHTML='使用innerHTML修改'
</script>
</body>
</html>
小结
1.设置/修改DOM元素内容有哪3钟方式?
document.write()方法
元素.innerText属性
元素.innerHTML属性
2.三者的区别是什么?
document.write()方法只能追加到body中
元素.innerText 属性只识别内容，不能解析标签
元素.innerHTML属性―能够解析标签
如果还在纠结到底用谁，你可以选择innerHTML
案例：
随机点名
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
display:inline-block;
width:150px;
height:30px;
border: 3px solid red;
vertical-align: middle;
}
</style>
</head>
<body>
<h1>随机点名案例</h1>
抽中的帅哥：
<div>
</div>
<script>
// 获取dom 对象
let div =document.querySelector('div');
// 数据数组
let array=['赵大','钱儿','孙三','李四','周五','吴六','郑七','王八'];
// 随机函数
function getRandom(min,max){
return Math.floor(Math.random()*(max-min+1))+min
}
//获取随机数
let random = getRandom(0,array.length-1);
// 将数据写入对象
div.innerHTML=array[random];
</script>
</body>
</html>
4 设置/修改DOM元素属性
4.1 设置/修改元素常用属性
- 剋通过js设置修改标签的元素属性，比如 通过css更换图片
- 最从常见的属性比如 href \title \src 等
- 语法
对象.属性=值
例：
<body>
<img src="./imgs/bg2.jpg" alt=""/>
<script>
// 获取元素
let pic=document.querySelector('img');
// 修改元素属性 src
pic.src='./imgs/1bg.jpg';
</script>
案例：
实现每次刷新页面随机更换图片
<body>
<img src="img/1bg.jpg" alt="">
<script>
// 获取图片元素
let pic=document.querySelector('img')
// 随机函数
function getRandom(min, max){
return Math.floor(Math.random()*(max-min+1))+min
}
let num = getRandom(1,7)
// 修改src
pic.src=`./img/${
num}bg.jpg`
</script>
</body>
4.2 通过js 设置修改样式属性
1、通过style 属性操作css
语法：
对象.sytle.样式属性=值
案例 ：修改盒子属性
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 300px;
height: 200px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div>
</div>
<script>
//获取对像元素
let box =document.querySelector('div');
// 修改背景属性
box.style.background = 'red'
// 修改宽度
box.style.width='500px'
</script>
</body>
案例 ，刷新页面随机更换背景
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
background-image: url(img/1bg.jpg);
}
</style>
</head>
<body>
<script>
let body=document.querySelector('body')
function getRandom(min,max){
return Math.floor(Math.random()*(max-min+1))+min
}
let num = getRandom(1,7)
body.style.backgroundImage=`url(img/${
num}bg.jpg)`;
</script>
</body>
</html>
2、通过操作类名（className）操作css
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 500px;
height: 200px;
background-color: aquamarine;
}
.active{
width: 300px;
height: 100px;
background-attachment: fixed;
margin-left: 100px;
}
</style>
</head>
<body>
<div>
</div>
<script>
let box = document.querySelector('div');
box.className='active'
</script>
</body>
</html>
使用className 优点：可以同时修改多个样式
注意事项：直接使用className 会覆盖以前的类名
3、通过classList操作css
为了解决classNam容易覆盖以前的类名，可以使用classList方式来追加和删除类名
语法：
// 追加一个类
元素.classList.add('类名')
// 删除一个类
元素.classList.remove('类名')
// 切换一个类
元素.classList.toggle('类名')
案例：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 400px;
height: 200px;
background-color: aqua;
margin-left: 50px;
}
.active{
width: 500px;
height: 400px;
background-color: coral;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="one"></div>
<script>
let box=document.querySelector('div')
// box.classList.add('active')
// box.classList.remove('one')
box.classList.toggle('active')
</script>
</body>
</html>
4.3 表单属性修改
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="password" value="print">
<button>显示模式</button>
<input type="checkbox" name="one1" class="one" checked="true">
<script>
let input=document.querySelector('input');
console.log('input.vlaue');
input.value='黄剑杰';
input.type='text'
let btn =document.querySelector('button');
btn.disabled=false
let checkbox=document.querySelector('.one')
checkbox.checked=false;
</script>
</body>
</html>
5 定时器
5.1 间歇函数
目标：能够使用定时器
间歇函数可以开启和关闭定时器。
1、开启定时器
setInterval(函数，间隔时间)
作用：每隔一段时间调用这个函数
将时间单位事毫秒。
例：每隔1000毫秒在屏幕输出 一句话
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
function print(){
document.write("你好 世界")
}
setInterval(print,1000)
</script>
</body>
</html>
2、关闭定时器
语法：
let 变量名 =setInterval(函数，间隔时间）
clearInterval(变量名)
案例：
代码
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<textarea name="text" id="textarea" cols="30" rows="10">
用户注册协议
等待时间结束可以点击同意
欢迎哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</textarea><br />
<button class="agree" disabled>我已阅读并同意用户协议（60）</button>
<script>
let btn=document.querySelector('.agree')
let i = 60;
// 开定时器
function dao(){
i--;
btn.innerHTML=`我已阅读并同意用户协议（${
i}）`
if (i===0){
clearInterval(timer)
// 开启按钮
btn.disabled=false;
btn.innerHTML='我已阅读并同意该协议'
}
};
let timer = setInterval(dao,1000);
</script>
</body>
</html>
综合案例
代码：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.tip{
position: relative;
margin-top: 0px;
width: 800px;
height: 30px;
background-color: beige;
float: inherit;
}
</style>
</head>
<body>
<div class="img-box">
<img src="img/bg01.jpg" class="pic" alt="">
<div class="tip">
<h3 class="text">第一张图片</h3>
</div>
</div>
<script>
let data =[
{
imgSrc:'img/bg01.jpg',
title:'第一张'
},
{
imgSrc:'img/bg02.jpg',
title:'第二张'
},
{
imgSrc:'img/bg03.jpg',
title:'第三张'
},
{
imgSrc:'img/bg04.jpg',
title:'第四张'
},
{
imgSrc:'img/bg05.jpg',
title:'第五张'
},
{
imgSrc:'img/bg06.jpg',
title:'第六张'
},
]
// 获取元素对象
let pic = document.querySelector('.pic')
let text=document.querySelector('.text')
// i 记录图片序号
let i =0;
// 开启定时器
function dao(){
i++;
// 图片变换
pic.src=data[i].imgSrc;
// 修改标题
text.innerHTML=data[i].title;
//
if(i===5){
i=-1;
}
}
setInterval(dao,1000)
</script>
</body>
</html>
效果图
