Web API

最新推荐文章于 2024-07-25 09:24:40 发布

小吴在敲Bug

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量429

点赞数

分类专栏： JavaScript 文章标签：前端 JS

本文链接：https://blog.csdn.net/qq_45042462/article/details/132023069

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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属性
1. 将文本内容添加/更新到任意标签位置
2. 显示存文本，不解析标签
对象.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";
  }
})();

histroy对象

history的数据类型是对象，主要管理历史记录，该对象与浏览器地址拦的操作相对应，如前进、后退、历史记录等
常用属性和方法：
history对象方法作用
back() 后退功能
forward() 前进功能
go(参数) 前进后退功能参数如果是1前进1个页面，如果是-1后退1个页面

history对象方法	作用
back()	后退功能
forward()	前进功能
go(参数)	前进后退功能参数如果是1前进1个页面，如果是-1后退1个页面

本地存储

本地存储介绍

以前我们页面写的数据一刷新页面就没有了
随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案
1. 数据存储在用户浏览器中
2. 设置、读取方便、甚至页面刷新不丢失数据
3. 容量较大，sessionStorage和localStorage约5M左右

本地存储分类-localStorage

作用：可以将数据永久存储在本地（用户的电脑），除非手动删除，否则关闭页面也会存在
特性：
- 可以多窗口（页面）共享（统一浏览器可以共享）
- 以键值对的形式存储使用

语法：

存储数据：
```
localStorage.setItem(key,value)
```
获取数据：
```
localStorage.getItem(key)
```
删除元素
```
localStorage.removeItem(key)
```

本地存储分类-sessionStorage

特性：
- 生命周期为关闭浏览器窗口
- 在同一个窗口（页面）下数据可以共享
- 以键值对的形式存储使用
- 用法跟localStorage基本相同

本地存储处理复杂数据类型

本地只能存储字符串，无法存储复杂数据类型

解决：需要将复杂数据类型转换成JSON字符串，再存储到本地
语法：JSON.stringify(复杂数据类型)

将JSON字符串转换为对象
```
JSON.parse(字符串)
```

小吴在敲Bug

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web API

以前我们页面写的数据一刷新页面就没有了随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案数据存储在用户浏览器中设置、读取方便、甚至页面刷新不丢失数据容量较大，sessionStorage和localStorage约5M左右。
复制链接

扫一扫