Web API基本认知
- 作用和分类
- 作用：就是使用JS去操作HTML和浏览器
- 分类：DOM（文档对象模型）、BOM（浏览器对象模型）
- 什么是DOM
- DOM（Document Object Model——文档对象模型）是用来呈现以及与任意HTML或XML文档交互的API
- DOM是浏览器提供的一套专门用来操作网页内容的功能
- DOM作用：开发网页内容特效和实现用户交互
- DOM树是什么
- 将HTML文档以树状结构直观的表现出来，我们称之为文档树或DOM树
- 描述网页内容关系的名词
- 作用：文档树直观的提现了标签与标签之间的关系
- DOM对象：浏览器根据HTML标签生成的JS对象
- 所有的标签属性都可以在这个对象上面找到
- 修改这个对象的属性会自动映射到标签上
- DOM的核心思想
- document对象：
- 是DOM里面提供的一个对象
- 所以它提供的属性和方法都是用来访问和操作网页内容的
- 网页所有内容都在document里面
获取DOM元素
根据Css选择器来获取DOM元素
目标：能查找/获取DOM对象
-
选择匹配的第一个元素
document.querySelector('css选择器')
参数：
包含一个或多个有效的CSS选择器 字符串
返回值：
CSS选择器匹配的第一个元素，一个HTMLElement对象
如果没有匹配到，则返回null
-
选择匹配的多个元素
document.querySelectorAll('css选择器')
参数：
包含一个或多个有效的CSS选择器 字符串
返回值：
CSS选择器匹配的 Node List 对象集合
例如：
document.querySelectorAll('ul li')
得到的是一个 伪数组：
有长度所引号的数组
但是没有pop() push()等数组方法
想要得到里面的每一个对象，则需要遍历的方式获得
其它获取DOM元素方法
// 根据id获取一个元素
document.getElementByid('nav')
// 根据标签获取一类元素 获取页面所有 div
document.getElementsByTagName('div')
// 根据类名获取元素 获取页面所有类名为w的
document.getElementsByClassName('w')
操作元素内容
- 对象.innerText属性
- 将文本内容添加/更新到任意标签位置
- 显示存文本，不解析标签
- 对象.innerHTML属性
- 将文本内容添加/更新到任意标签文职
- 会简析标签，多标签建议使用模板字符
操作元素属性
常用属性
-
可以通过JS设置/修改标签元素属性，比如通过src跟换图片
-
最常见的属性比如：href、title、src等
-
语法：
对象.属性=值
-
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="./images/1.webp" alt="">
<script>
// 1.获取图片元素
const img = document.querySelector('img');
// 2.修改图片对象的属性
img.src='./images/2.webp'
img.title="刚子最帅"
</script>
</body>
</html>
元素样式属性
-
通过style操作属性
对象.style.样式属性=值
-
操作类名（className）操作CSS
对象.className='类名'
注意：
- 由于Class是关键字，所以使用className去代替
- className是使用新值换旧值，如果需要添加一个类，需要保留之前类名
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
background-color: blue;
}
.box{
width: 300px;
height: 300px;
background-color: yellow;
}
</style>
</head>
<body>
<div></div>
<script>
// 获取元素
const div = document.querySelector('div')
// 添加类名
div.className='box'
</script>
</body>
</html>
-
通过classList操作类控制CSS
// 添加一个类
对象.classList.add('类名')
// 删除一个类
对象.classList.remove('类名')
// 切换一个类
对象.classList.toggle('类名')
表单元素属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--<input type="text" value="小吴在敲Bug">-->
<input type="checkbox" name="" id="">
<script>
// 获取对象
// const uname = document.querySelector('input')
// 获取值
// console.log(uname.value)
// 设置表单的值
// uname.value='我不要敲Bug'
const ipt = document.querySelector('input')
//console.log(ipt.checked) //false
ipt.checked = true //选中
</script>
</body>
</html>
定时器-间歇函数
-
开启定时器
setInterval(函数,间隔时间)
作用： 每隔一段时间调用这个函数
间隔时间单位是毫秒
-
关闭定时器
clearInterval(变量名)
例子：
<script>
// setInterval(函数，间歇时间)
// setInterval(function(){
// console.log('一秒执行一次')
// },1000)
const interval = setInterval(function (){
console.log('三秒执行一次')
},3000);
// 关闭定时器
clearInterval(interval)
</script>
定时器-延时函数
两种定时器对比： 执行的次数
- 延时函数：执行一次
- 间歇函数：每隔一段时间就执行一次，除非手动清除
事件监听
事件类型
事件对象
- 事件对象是什么
- 也是一个对象，这个对象里有事件触发时的相关信息
- 例如：鼠标点击事件中，事件对象就存了鼠标点击在那个位置等信息
- 使用场景
- 可以判定用户按下哪个键，比如按下回车键可以发送消息
- 可以判定鼠标点击了哪个元素，从而做相应的操作
-
部分常用属性：
-
type： 获取当前的事件类型
-
clientX/clientY： 获取光标相对于浏览器可见窗口左上角的位置
-
offsetX/offsetY： 获取光标相对于当前DOM元素左上角的位置
-
key： 用户按下的键盘键的值
日期对象
- 日期对象：用来表示时间的对象
- 作用：可以得到当前系统时间
实例化
- 在代码中发现了new关键字时，一般将这个操作称为实例化
- 创建一个时间对象并获取事件
日期对象方法
| 方法 |
作用 |
说明 |
| getFullYear() |
获得年份 |
获取四位年份 |
| getMonth() |
获得月份 |
取值为0~11 |
| getDate() |
获取月份中的每一天 |
不同月份取值也不相同 |
| getDay() |
获取星期 |
取值为0~6 |
| getHours() |
获取小时 |
取值0~23 |
| getMinutes() |
获取分钟 |
取值为0~59 |
| getSeconds() |
获取秒 |
取值为0~59 |
时间戳
三种获取时间戳方式
节点操作
DOM节点
查找节点
-
父节点查找：
- parentNode属性
- 返回最近一级父节点找不到返回null
子对象.parentNode
-
子节点查找
-
兄弟关系查找：
增加节点
创建节点
-
即创造出一个新的网页元素，再添加到网页内，一般先穿件节点，然后插入节点
-
创建元素节点的方法：
document.createElement('标签名')
-
插入到父元素中某个子元素的前面
父对象.insertBefore(要插入的元素,在那个元素前面)
克隆节点
对象.cloneNode(布尔值)
- 若为true，则代表克隆时会包含后代节点一起克隆
- 若为false，则代表克隆时不包含后代节点
- 默认为false
删除节点
Window对象
location对象
- location的数据类型是对象，它拆分并保存了URL地址的各个组成部分
-
常用属性和方法：
-
href属性获取完整的URL地址，对其赋值时用于地址的跳转
// 可以得到当前文件URL地址
console.log(location.href)
// 可以通过js方式跳转到目标地址
location.href = 'www.baidu.com'
-
serach属性获取地址中携带的参数，符号 ? 后面部分
console.log(location.search)
-
hash属性获取地址中的哈希值，符号#后面部分
console.log(location.hash)
-
reload方法用来刷新当前页面，传入参数true时表示强制刷新
location.reload(true)
navigator对象
- navigator的数据类型是对象，该对象记录了浏览器自身的相关信息
- 常用属性和方法
histroy对象
- history的数据类型是对象，主要管理历史记录，该对象与浏览器地址拦的操作相对应，如前进、后退、历史记录等
-
常用属性和方法：
| history对象方法 |
作用 |
| back() |
后退功能 |
| forward() |
前进功能 |
| go(参数) |
前进后退功能参数如果是1前进1个页面，如果是-1后退1个页面 |
本地存储
本地存储介绍
- 以前我们页面写的数据一刷新页面就没有了
- 随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案
- 数据存储在用户浏览器中
- 设置、读取方便、甚至页面刷新不丢失数据
- 容量较大，sessionStorage和localStorage约5M左右
本地存储分类-localStorage
- 作用：可以将数据永久存储在本地（用户的电脑），除非手动删除，否则关闭页面也会存在
- 特性：
- 可以多窗口（页面）共享（统一浏览器可以共享）
- 以键值对的形式存储使用
语法：
- 存储数据：
localStorage.setItem(key,value)
- 获取数据：
localStorage.getItem(key)
- 删除元素
localStorage.removeItem(key)
本地存储分类-sessionStorage
-
特性：
- 生命周期为关闭浏览器窗口
- 在同一个窗口（页面）下数据可以共享
- 以键值对的形式存储使用
- 用法跟localStorage基本相同
本地存储处理复杂数据类型
- 解决：需要将复杂数据类型转换成JSON字符串，再存储到本地
- 语法：JSON.stringify(复杂数据类型)
-
将JSON字符串转换为对象
JSON.parse(字符串)
