Web API 基本认知
作用和分类：
作用: 就是使用 JS 去操作 html 和浏览器 分类：DOM (文档对象模型)、BOM（浏览器对象模型）
什么是DOM：
DOM：文档对象模型：一套操作网页元素的方法 ，开发网页内容特效和实现用户交互
DOM树：
DOM树是什么
将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树
描述网页内容关系的名词
作用：文档树直观的体现了标签与标签之间的关系
DOM对象：
DOM对象： 浏览器会根据HTML标签生成对应的JS对象
- 所有的标签属性都可以在这个对象上面找到
- 修改这个对象的属性会自动映射到标签身上
DOM的核心思想：
- 把网页内容当做对象来处理
DOM中常见的概念：
-
文档
document：一个网页可以称为文档 -
节点
node：网页中的所有内容都是节点（标签、文本、注释等） -
元素
element：网页中的标签（标签节点）
获取DOM对象
在DOM中，如果需要操作一个元素，首先需要先获取到对应的DOM对象
通过css选择器获取DOM对象（重点）
获取单个元素
代码：document.querySelector('css选择器');
返回值： 一个元素。如果有多个，之后返回第一个，如果没有返回null
代码示例 01-通过css选择器获取dom对象
<body>
<div class="box">我是一个div标签</div>
<input type="text">
<script>
//DOM对象对象是浏览器自动帮我们创建好的
//1.获取单个对象
//document.querySelector('css选择器')
let box= document.querySelector('.box')
console.dir(box)
//注意点： 1如果符合条件的有多个对象，此时只获取第一个
// 如果没有符合条件的对象，此时获取的是null
//查看对象类型
console.log(typeof box)
//获取input标签的dom元素
let input =document.querySelector('input')
console.dir(input);
</script>
</body>
小结：
-
想要获取页面的标签 可以通过document.querySelector(选择器)
-
document.querySelector只能获取第一个满足条件的标签‘
-
如果选择器找不到元素querySelector只会返回null
-
如果我们想要输出打印dom元素
不再使用console.log
改为 使用 console.dir
可参看文档：developer.mozilla.org/zh-CN/docs/…
获取多个元素
代码：document.querySelectorAll('css选择器')
返回值： 伪数组。无论找到几个元素，返回值都是伪数组
// 参数：css选择器
// 返回值：伪数组。无论找到几个元素，返回值都是伪数组
document.querySelectorAll('css选择器')
伪数组的特点：
- 有长度，有索引
- 没有数组的相关方法，比如：arr.push()......
<body>
<div>我是div1</div>
<div>我是div2</div>
<div>我是div3</div>
<div>我是div4</div>
<div>我是div5</div>
<script>
//获取多个对象 document.querySelectorAll('css选择器')
let divs= document.querySelectorAll('div')
console.log(divs)
// 注意点：无论符合条件的对象是有还是无 获取的都是一个伪数组
//单选选中第斯个对象
// console.log(divs[3])
//每一项
for (let i= 0; i< divs.length; i++) {
console.log(divs[i])
//设置文本
divs[i].innerText='爸爸我叫div'+i ;
}
//设置文本标签
//伪数组的特点:
//1.有下标，也有长度 可以被遍历
//2.伪数组无法使用之前数组中的相关方法：arr.push( )
</script>
</body>
注意：querySelector( ) 方法获取到的元素能直接操作修改吗？ 可以
querySelectorAll() 方法获取到的元素能直接修改吗？ 不可以， 只能通过遍历的方式。依次给里面的元素做修改
**document.querySelectorAll('css选择器')得到的是一个伪数组：**
有长度有索引号的数组 但是没有 pop( ) push( ) 等数组方法
想要得到里面的每一个对象，则需要遍历（如 for）的方式获得。
哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个伪数组，里面只有一个元素而已
设置/修改DOM元素内容
目标：能够修改元素的文本更换内容
如果想要修改标签元素的里面的内容，则可以使用如下几种方式：
- 对象.innerText 属性
- 对象.innerHTML 属性
- document.write() 方法
1.元素.innerText 属性 将文本内容添加/更新到任意标签位置 文本中包含的标签不会被解析
代码示例 02-动态修改dom的文本内容
<body>
<h1>今天想邀请哪个同学去玩</h1>
<h2 class="name"></h2>
<script>
//1.先获取h2标签对应的dom元素
//2.使用代码修改文本内容
//dom元素.innerText='修改属性的内容'
let userName=prompt('请输入你想要求同学的姓名:');
let name=document.querySelector('.name');
name.innerText=userName;
</script>
</body>
综合案例
<title>案例</title>
<style>
div{
border: 1px solid #000;
width: 50px;
height: 30px;
}
</style>
</head>
<body>
抽中的选手是：<div></div>
<script>
let aarr=['胡歌','靳东','彭于晏','欧豪','朱亚文',]
let num =Math.round(Math.random()*4)
console.log(aarr[num]);
//获取h3标签的dom元素
let div=document.querySelector('div')
div.innerText=aarr[num]
</script>
</body>
querySelectorAll不管你的选择器是否写对与否，返回值都是数组
querySelector
- 能找到相对应的 返回dom元素/dom对象
- 找不到 返回null
2.元素.innerHTML 属性
元素.innerHTML 属性 将文本内容添加/更新到任意标签位置 文本中包含的标签会被解析
相同点： 通过innerText和innerHTML都可以操作标签的内容。
区别：
-
innerText属性：
-
只能获取文本——》如果有标签会忽略
-
只能设置文本——》当设置的是标签时，标签不能被解析，标签不能生效
-
-
innerHTML属性：
- 可以获取文本和标签
- 可以设置文本和标签——》当设置的是标签，标签可以被解析，标签可以生效
代码效果如下：
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
let li=document.querySelector('li:nth-child(3)')
li.innerText='<button>叫爸爸</button>'
let lis=document.querySelector('li:nth-child(5)')
lis.innerHTML='<button>叫爸爸</button>'
</script>
</body>
设置/修改DOM元素属性
设置/修改元素常用属性 设置/修改元素样式属性 设置/修改 表单元素 属性
设置/修改元素常用属性
- 还可以通过 JS 设置/修改标签元素属性，比如通过 src更换 图片
- 最常见的属性比如： href、title、src 等
- 语法：
<body>
<a href="https://www.baidu.com/">跳转到我的个人微博</a>
<img src="./images/1.jpg" alt="这是一张图片">
<script>
//1.先获取a标签的dom元素
let aDom=document.querySelector('a')
//2.对其网址进行修改
aDom.href='https://weibo.com/7461987634'
//修改图片的src属性
let imgDom=document.querySelector('img')
imgDom.src='/images/2.jpg'
//动态修改title属性
imgDom.title='这是一张美美的照片'
</script>
</body>
案例：
<body>
<img src="" alt="">
<script>
let aarr=[
'./imges/新建文件夹IMG_0131.JPG',
'./imges/新建文件夹IMG_0633.JPG',
'./imges/新建文件夹IMG_1208.JPG',
' ./imges/新建文件夹IMG_1487.JPG',
'./imges/新建文件夹IMG_1796.JPG',
' ./imges/新建文件夹IMG_1798.JPG',
'./imges/新建文件夹IMG_2677.JPG',]
//利用随机数生成随机图片
let picture=Math.round(Math.random()*6)
//获取图片的src属性
let img=document.querySelector('img')
img.src=aarr[picture]
</script>
</body>
设置/修改元素样式属性
还可以通过 JS 设置/修改标签元素的样式属性。
- 通过 style 属性操作CSS
- 操作类名(className) 操作CSS
- 通过 classList 操作类控制CSS
1.通过 style 属性操作CSS
语法：
代码
<body>
<div>
我是一个普通的元素
</div>
<script>
//动态修改div的样式属性
//先获取div的dom元素
let div=document.querySelector('div')
//开始修改
div.style.color='red'
div.style.fontWeight=700
div.style.fontSize='100px'
</script>
</body>
操作类名(className) 操作CSS
如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。
语法:
<style>
.box{
width: 100px;
height: 100px;
background-color:green;
margin: 100px auto;
}
</style>
</head>
<body>
<div></div>
<script>
//通过js的方式来动态添加上这个class
//先获取div的dom元素
let div=document.querySelector('div')
//通过className 来设置类名即可
div.className='box'
</script>
</body>
小总结：
-
使用 className 有什么好处？ 可以同时修改多个样式
-
使用 className 有什么注意事项？ 直接使用 className 赋值会覆盖以前的类名
通过 classList 操作类控制CSS
为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
语法：
代码
<style>
.d1{
background-color:red;
width: 100px;
height: 100px;
}
.d2{
background-color:aqua;
width: 30px;
height: 30px;
}
.d3{
background-color:tomato;
width:65px ;
height: 65px;
}
</style>
</head>
<body>
<div class="d1"></div>
<script>
//先获取div标签的元素dom
let div=document.querySelector('div')
//给div 添加一个类
div.classList.add('d2')
//classList.remove 移除一个类
div.classList.remove('d2')
//切换一个类 如果本来有 那我就移除 如果本来 没有 那就添加
div.classList.toggle('d4')
</script>
</body>
设置/修改 表单元素 属性
设置/修改 表单元素 属性
表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框 正常的有属性有取值的 跟其他的标签属性没有任何区别 获取: DOM对象.属性名 设置: DOM对象.属性名 = 新值
****表单属性的总结
设置普通的输入框 input.value='表单的值'
- 设置 按钮的禁用
- button.disabled=true 禁用
- button.disabled=fales 启用
- 设置单选框或者复选框
- checkbox.checked=false 取消选中
- 设置下拉列表 select
- option.selected=true 选中
不一样的文本域标签
<body>
<textarea><h1>你</h1></textarea>
<script>
//获取文本域标签的dom元素 //属于表单元素 且是双标签
let textarea=document.querySelector('textarea')
//获取textarea里面的文本内容
let a =textarea.value //ok <h1>你</h1>
let b=textarea.innerText //no
let c=textarea.innerHTML //ok <h1>你</h1>
console.log(a,b,c);
//.value 原样获取里面的内容
//.innerHTML 获取的如果包括html 回转移
//通过js方式设置文本域内容
// textarea.value='好吗' ok
// textarea.innerHTML=123 ok
// textarea.innerText='abc' ok
</script>
</body>
定时器-间歇函数
能够说出定时器函数在开发中的使用场景
网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发 例如：网页中的倒计时 要实现这种需求，需要定时器函数 定时器函数有两种，今天我先讲间歇函数
能够使用定时器函数重复执行代码
定时器函数可以开启和关闭定时器
- 开启定时器
作用：每隔一段时间调用这个函数 就是每一段时间就重复这个操作
间隔时间单位是毫秒
例如：
代码：
<script>
// function repeat(){
// console.log('前端程序员，就是头发多');
// }
//每隔一秒就调用repeat函数
// setInterval(repeat,1000)
//第二种写法
// setInterval(匿名函数，1000)
setInterval(function(){
console.log('前程序猿头发就是多');
},1000)
</script>
清除定时器
定时器函数可以开启和关闭定时器
注意： 函数名字不需要加括号 定时器返回的是一个id数字
清除定时器一般都是根据某个条件来清除
let index=0;
let timeId =setInterval(function(){
index++;
console.log('我肚子好饿呀');
//来个条件判断
if(index===30){
{clearInterval(timeId);}
}
},1000) //1000毫秒等于1秒
** 你生活的起点并不是那么重要，重要的是最后你能到达哪里**
