Web API
文章目录
- Web API基本认知
- 获取DOM元素
-
- 根据Css选择器来获取DOM元素
- 其它获取DOM元素方法
- 操作元素内容
- 操作元素属性
-
- 常用属性
- 元素样式属性
- 表单元素属性
- 定时器-间歇函数
- 定时器-延时函数
- 事件监听
-
- 事件类型
- 事件对象
- 日期对象
-
- 实例化
- 日期对象方法
- 时间戳
- 节点操作
-
- DOM节点
- 查找节点
- 增加节点
- 删除节点
- Window对象
-
- location对象
- navigator对象
- histroy对象
- 本地存储
-
- 本地存储介绍
- 本地存储分类-localStorage
- 本地存储分类-sessionStorage
- 本地存储处理复杂数据类型
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对象
- 查找元素DOM元素就是利用JS选择页面中标签元素
-
选择匹配的第一个元素
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>
定时器-延时函数
-
JavaScript内置的一个用来让代码延迟执行的函数，叫
setTimeout -
语法：
setTimeout(回调函数,等待的毫秒数) -
setTimeout仅仅只执行一次，所以可以理解为就是把一段代码延迟执行，平时省略window
-
清除延时函数：
let timer = setTimeout(回调函数,等待的毫秒数) clearTimeout(timer)
两种定时器对比： 执行的次数
- 延时函数：执行一次
- 间歇函数：每隔一段时间就执行一次，除非手动清除
事件监听
-
语法：
对象.addEventListener('事件类型',要执行的函数) -
事件监听三要素：
- 事件源： 那个DOM元素背事件触发了，要获取DOM元素
- 事件类型： 用什么方式触发，比如鼠标单击click，鼠标经过mouseover等
- 事件调用的函数： 要做什么事
事件类型
- 鼠标触发：
- click —— 鼠标单击
- mouseenter —— 鼠标经过
- mouseleave —— 鼠标离开
- 表单获得光标：
- focus —— 获得焦点
- blur —— 失去焦点
- 键盘触发：
- keydown —— 键盘按下触发
- keyup —— 键盘抬起触发
- 文本事件
- inpu —— 用户输入事件
- 页面滚动事件：
- scroll
window.addEventListener("scroll", function() { // 在这里编写滚动事件的处理逻辑 });
事件对象
- 事件对象是什么
- 也是一个对象，这个对象里有事件触发时的相关信息
- 例如：鼠标点击事件中，事件对象就存了鼠标点击在那个位置等信息
- 使用场景
- 可以判定用户按下哪个键，比如按下回车键可以发送消息
- 可以判定鼠标点击了哪个元素，从而做相应的操作
- 语法：如何获取
- 在事件绑定的回调函数的第一个参数就是事件对象
- 一般命名为event、ev、e
对象.addEventListener('click',function(e){})
- 部分常用属性：
type： 获取当前的事件类型clientX/clientY： 获取光标相对于浏览器可见窗口左上角的位置offsetX/offsetY： 获取光标相对于当前DOM元素左上角的位置key： 用户按下的键盘键的值
日期对象
- 日期对象：用来表示时间的对象
- 作用：可以得到当前系统时间
实例化
- 在代码中发现了new关键字时，一般将这个操作称为实例化
- 创建一个时间对象并获取事件
-
获得当前时间
const date = new Date() -
获得指定时间
const date = new Date('2022-06-19')
-
日期对象方法
| 方法 | 作用 | 说明 |
|---|---|---|
| getFullYear() | 获得年份 | 获取四位年份 |
| getMonth() | 获得月份 | 取值为0~11 |
| getDate() | 获取月份中的每一天 | 不同月份取值也不相同 |
| getDay() | 获取星期 | 取值为0~6 |
| getHours() | 获取小时 | 取值0~23 |
| getMinutes() | 获取分钟 | 取值为0~59 |
| getSeconds() | 获取秒 | 取值为0~59 |
时间戳
三种获取时间戳方式
-
使用getTime()方法
const date = new Date() console.log(date.getTime()) -
简写：
+new Date()console.log(+new Date()) -
使用Date.now()
- 无需实例化
- 但是只能打到时间戳，前面两种可以返回指定的时间戳
console.log(Date.now())
节点操作
DOM节点
- DOM节点：
- DOM树里每一个内容都称之为节点
- 节点类型：
- 元素节点
- 所有的标签比如body、div
- html是根节点
- 属性节点
- 所有的属性 比如 href
- 文本节点
- 所有的文本
- 其他
- 元素节点
查找节点
- 节点关系：针对的找亲戚返回的都是对象
- 父节点
- 子节点
- 兄弟节点
-
父节点查找：
- parentNode属性
- 返回最近一级父节点找不到返回null
子对象.parentNode -
子节点查找
-
获得所有子节点、包括文本节点（空格、换行）、注释节点等
-
children
- 获得所有元素节点
- 返回的是一个伪数组
父对象.childern
-
-
兄弟关系查找：
- 下一个兄弟节点
对象.nextElementSibling - 上一个兄弟节点
对象.previousElementSibling
- 下一个兄弟节点
增加节点
创建节点
-
即创造出一个新的网页元素，再添加到网页内，一般先穿件节点，然后插入节点
-
创建元素节点的方法：
document.createElement('标签名') -
插入到父元素中某个子元素的前面
父对象.insertBefore(要插入的元素,在那个元素前面)
克隆节点
对象.cloneNode(布尔值)
- 若为true，则代表克隆时会包含后代节点一起克隆
- 若为false，则代表克隆时不包含后代节点
- 默认为false
删除节点
-
若一个节点在页面中不需要时，可以删除它
-
在JavaScript原生DOM操作中，要删除元素必须通过父元素删除
-
语法
父对象.removeChile(要删除的对象) -
注意：
- 如不存在父子关系则删除不成功
- 删除节点和隐藏节点（display:none）有区别的：隐藏节点还是存在的，但是删除，则从html中删除节点
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的数据类型是对象，该对象记录了浏览器自身的相关信息
- 常用属性和方法
- 通过userAgent检测浏览器的版本及平台
// 检测 userAgent（浏览器信息） !(function () { const userAgent = navigator.userAgent; // 验证是否为Android或iPhone const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/); const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/); // 如果是Android或iPhone，则跳转至移动站点 if (android || iphone) { location.href = "http://m.goudong.com"; } })();
- 通过userAgent检测浏览器的版本及平台
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(字符串)