-
Web API 基本认知
-
获取DOM对象
-
设置/修改DOM元素内容
-
设置/修改DOM元素属性
-
定时器-间歇函数
Web API 基本认知
作用和分类
①作用: 就是使用 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里面
获取DOM元素
根据CSS选择器来获取DOM元素 (重点)
1、选择匹配的第一个元素
Ⅰ、语法：
document.querySelector('css选择器')
document.querySelector('#nav')//id选择器
document.querySelector('p')//标签选择器
document.querySelector('.box')//类名选择器
Ⅱ、参数：包含一个或多个有效的CSS选择器 字符串
Ⅲ、返回值：
- CSS选择器匹配的第一个元素,一个 HTMLElement对象。
- 如果没有匹配到，则返回null。
2、选择匹配的多个元素
①、语法：
document.querySelectorAll('css选择器')
②、参数：包含一个或多个有效的CSS选择器 字符串
③、返回值：CSS选择器匹配的 NodeList 对象集合
例如：
//可以获取多个，也是支持任意的选择器 ， 返回值一定是数组 哪怕没有这个元素 空数组
<script>
//获取所有的li标签 返回一个数组
let lis = document.querySelectorAll('li');
//数组和循环搭配
for (let index = 0; index < lis.length; index++) {
//lis[index] dom元素
lis[index].innerText = `这是li标签`+ index;
}
</script>
④得到的是一个伪数组：
- 有长度有索引号的数组
- 但是没有 pop() push() 等数组方法
⑤想要得到里面的每一个对象，则需要遍历（如 for）的方式获得。
注意：哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个伪数组，里面只有一个元素而已
3、其他获取DOM元素方法（了解：少用）
<script>
//根据id获取 一个dom
let nav = document.getElementById('nav');
//根据标签名称获取一组 dom元素
let ps = document.getElementsByName('p');
//根据类名获取一组一组元素
let divs = document.getElementsByClassName('box');
</script>
设置/修改DOM元素内容
1、document.write() //功能弱，以后少用
- 只能将文本内容追加到 前面的位置
- 文本中包含的标签会被解析
document.write()
2、对象.innerText 属性
- 将文本内容添加/更新到任意标签位置
- 文本中包含的标签不会被解析
document.querySelector('li:nth-child(2)').innerText = '<button>随便修改</button>';//只修改文本
3、对象.innerHTML 属性
- 将文本内容添加/更新到任意标签位置
- 文本中包含的标签会被解析
document.querySelector('li:nth-child(3)').innerHTML = '<button>随便修改</button>';//标签也生效
document.innerHTML=`<a>链接</a>`//还可以设置设置标签
设置/修改DOM元素属性
1、设置修改元素常用属性
- 还可以通过 JS 设置/修改标签元素属性，比如通过 src更换 图片
- 最常见的属性比如： href、title、src 等
- 语法
对象.属性 = 值
例：
<body>
<a href="http://www.baidu.com">跳转到</a>
<img src="./images/1.jpg" title="有惊喜" alt="" />
<p id="nav"></p>
<input type="text" />
<button type="button"></button>
<h1 class="dfdf"></h1>
<script>
/*
a 标签身上的 href 图片 src alt id type class 属性
1 获取标签对应的dom元素
2 dom.属性名=属性值
*/
// let aDom = document.querySelector('a');
// 修改a标签的属性
// aDom.href = 'https://www.processon.com/mindmap/623c471107912906f5184873';
let imgDom=document.querySelector("img");
// 修改图片的src
imgDom.src="./images/2.jpg";
// 动态修改 title属性
imgDom.title="你妈妈叫你回去吃饭";
</script>
</body>
2、设置/修改元素样式属性
Ⅰ、可以通过 JS 设置/修改标签元素的样式属性。
- 比如通过 轮播图小圆点自动更换颜色样式
- 点击按钮可以滚动图片，这是移动的图片的位置 left 等等
Ⅱ、学习路径：
- 通过 style 属性操作CSS
- 操作类名(className) 操作CSS
- 通过 classList 操作类控制CSS
①、通过 style 属性操作CSS
对象.style.样式属性 = 值
例：
<body>
<div>肚肚</div>
<script>
let divDom = document.querySelector('div')
divDom.style.fontSize = '50px'
divDom.style.color = 'pink'
divDom.style.width = '200px'
divDom.style.height = '200px'
divDom.style.background = 'green'
</script>
</body>
注意：
- 修改样式通过style属性引出
- 如果属性有-连接符，需要转换为小驼峰命名法
- 赋值的时候，需要的时候不要忘记加css单位
②、操作类名(className) 操作CSS
如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式
- 直接使用 className 赋值会覆盖以前的类名
- 可以同时修改多个样式
// active 是一个css类名
元素.className = 'active'
例：
<style>
.box{
width: 200px;
height: 200px;
background-color: #bfa;
margin: 100px auto;
}
.box1{
height: 200px;
font-size: 40px;
}
</style>
<body>
<div></div>
<script>
let div =document.querySelector('div')
div.className = 'box'
</script>
</body>
注意
1.由于class是关键字, 所以使用className去代替
2.className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名
③通过 classList 操作类控制CSS
为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
//追加一个类
元素.classList.add('类名')
//删除一个类
元素.classList.remove('类名')
//切换一个类
元素.classList.toggle('类名')
<style>
.d1{
background-color: #faa;
}
.d2{
height: 200px;
}
.d3{
width: 400px;
}
.d4{
border-radius: 50%;
}
</style>
</head>
<body>
<div></div>
<script>
let div = document.querySelector('div');
//添加一个class
div.classList.add('d2');
div.classList.add('d3');
div.classList.add('d4');
//多个添加简写
//div.classList.add('d2', 'd3', 'd4')
//单独指定移除某个类
// div.classList.remove('d2', 'd3');
//切换 如果原来有，那就是删除 如果没有，就是添加
// div.classList.toggle('d4')
</script>
</body>
3、设置/修改表单元素属性
表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框
正常的有属性有取值的 跟其他的标签属性没有任何区别
- 获取: DOM对象.属性名
- 设置: DOM对象.属性名 = 新值
表单.value = '用户名'
表单.type = 'password'
①input dom元素
value 获取文本的内容
<body>
<input type="text" class="username" />
</body>
<script>
// 获取一下表单 dom元素
let username = document.querySelector('.username');
// 设置文本内容
username.innerText = '我的用户名';
// 设置输入框的文本内容
username.value = '我的用户名';
</script>
②复选框 或者单选框
checked 设置选中状态
<body>
//是否同意协定
<input type="checkbox" class="isarg" checked />
</body>
<script>
// 复选框
let isarg = document.querySelector('.isarg');
// 设置勾选上
isarg.checked = true;
// 不勾选
isarg.checked = false;
</script>
③按钮 button
disabled 设置启用状态
<body>
<button class="code" disabled>发送验证码</button>
</body>
<script>
// 设置按钮 可以启用 可以点击
// disabled 禁用
code.disabled = true;// 禁用
code.disabled = false; // 启用
</script>
④下拉列表 select
selected 设置option 选中
<body>
<select class="sel">
<option>去泰国</option>
<option>去非洲</option>
<option>去印度</option>
<option>去啊富汗</option>
</select>
</body>
<script>
// select 选中
let option = document.querySelector('option:nth-child(4)');
// option.select = true; // 错误的单词 少-ed
option.selected = true; // 正确的单词
</script>
⑤文本域标签
value 有区别 innerHTML
-
设置 textarea 里面文本的内容的时候 , 可以选择 在标签内写文本即可
-
想要获取内容：
.value 原样获取内容
.innerHTML 获取的内容如果包含html 会转移
<body>
<textarea>你好</textarea>
</body>
<script>
// 获取 文本域标签
// 属于表单元素 又是双标签
let textarea = document.querySelector('textarea');
// 在html想要设置 文本域的内容 直接在标签内写即可
// <textarea> 你好 </textarea>
// 获取文本域中的值
console.log(textarea.value); // 可以获取到 <h1>你好</h1>
console.log(textarea.innerText); // 获取不到
console.log(textarea.innerHTML); // 可以获取到 <h1>你好</h1>
// 通过js的方式来设置内容（三种都可以）
// textarea.value=`<h1>标题</h1>`; // 可以设置
// textarea.innerText=`<h1>标题</h1>`; // 可以设置
// textarea.innerHTML=`<h1>标题</h1>`; // 可以设置
</script>
⑥表单属性的总结
-
设置普通的输入框 input.value ="表单的值"
-
设置 按钮的禁用
button.disabled=true 禁用
button.disabled=false 启用
-
设置单选框或者复选框 radio.checked=true 选中 checkbox.checked=false 取消选中
-
设置下拉列表 select option.selected=true 选中
-
文本域标签 有点点特殊 ！ 属于表单元素 又是双标签
定时器
1、定时器函数介绍
- 网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发
- 例如：网页中的倒计时
- 要实现这种需求，需要定时器函数
- 定时器函数有两种，今天我先讲间歇函数
2、定时器函数基本使用
①开启定时器
- 作用：每隔一段时间调用这个函数
- 间隔时间单位是毫秒
注意：
- 函数名字不需要加括号
- 定时器返回的是一个id数字
setInterval(函数, 间隔时间);
<script>
//函数 负责定时执行的业务
function repeat(){
console.log('前端程序员，头发多');
}
//每隔1秒执行一次函数 单位为毫秒 1000毫秒 = 1秒
setInterval(repeat, 1000);
//其他模样的写法 setInterval(匿名函数, 1000)
setInterval(function(){
console.log('头发没有啦')
},1000)
</script>
②.关闭定时器
一般不会刚创建就停止，而是满足一定条件再停止
注意：
- 函数名字不需要加括号
- 定时器返回的是一个id数字
let 变量名 = setInterval(函数, 间隔时间)
clearInterval(变量名)
<script>
// 追女孩子 追30次 不行 我就撤退！！
let index = 0;
// 创建定时器的同时 返回了定时器id
let timeId = setInterval(function () {
index++;
console.log('开始追了', index);
// 判断是否满足条件了
if (index === 30) {
// 放弃 没有缘分
clearInterval(timeId);
}
}, 100);
</script>
