web API基础

作用和分类

作用: 就是使用 JS 去操作 html 和浏览器

分类： DOM (文档对象模型)、 BOM （浏览器对象模型）

什么是DOM

DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。

HTML DOM 定义了访问和操作 HTML 文档的标准方法。

DOM 以树结构表达 HTML 文档。

DOM作用：

        开发网页内容特效和实现用户交互

DOM树

将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树

描述网页内容关系的名词

作用： 文档树直观的体现了标签与标签之间的关系

DOM对象

DOM对象：浏览器根据html标签生成的 JS对象

         所有的标签属性都可以在这个对象上面找到

        修改这个对象的属性会自动映射到标签身上

DOM的核心思想

        把网页内容当做 对象 来处理

document 对象

        是 DOM 里提供的一个 对象， 所以它提供的属性和方法都是 用来访问和操作网页内容的， 网页所有内容都在document里面

获取DOM元素

根据CSS选择器来获取DOM元素

选择匹配的第一个元素

参数:

包含一个或多个有效的CSS选择器 字符串

返回值：

CSS选择器匹配的 第一个元素 ,一个 HTMLElement对象。

如果没有匹配到，则返回null

选择匹配的多个元素

参数:

包含一个或多个有效的CSS选择器 字符串

返回值：

CSS选择器匹配的 NodeList 对象集合

操作元素内容

DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象。

就是操作对象使用的点语法

如果想要修改标签元素的里面的 内容 ，则可以使用如下几种方式：

1. 对象.innerText 属性

2. 对象.innerHTML 属性

1. 元素innerText 属性

将文本内容添加/更新到任意标签位置

显示纯文本，不解析标签

2. 元素.innerHTML 属性

将文本内容添加/更新到任意标签位置

会解析标签，多标签建议使用模板字符

操作元素属性

操作元素常用属性

操作元素样式属性 

1.通过 style 属性操作CSS

2. 操作类名(className) 操作CSS

如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式

由于class是关键字, 所以使用className去代替

3. 通过 classList 操作类控制CSS

为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名

操作表单元素 属性

表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框

正常的有属性有取值的 跟其他的标签属性没有任何区别

操作表单元素 属性

表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代 表移除了该属性

定时器-间歇函数

网页中经常会需要一种功能：每隔一段时间需要 自动 执行一段代码，不需要我们手动去触发

例如：网页中的倒计时

定时器函数可以开启和关闭定时器

事件监听

什么是事件？

事件是在编程时系统内发生的 动作 或者发生的事情

比如用户在网页上 单击 一个按钮

什么是事件监听？

        就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 绑定事件或者注册事 件

        比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等等

语法:

事件监听三要素：

        事件源： 那个dom元素被事件触发了，要获取dom元素

        事件类型： 用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等

        事件调用的函数： 要做什么事

事件类型

事件对象

事件对象是什么

也是个对象，这个对象里有事件触发时的相关信息

例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息

获取事件对象

        

环境对象

环境对象： 指的是函数内部特殊的 变量 this ，它代表着当前函数运行时所处的环境

作用： 弄清楚this的指向，可以让我们代码更简洁

         函数的调用方式不同，this 指代的对象也不同

         【谁调用， this 就是谁】 是判断 this 指向的粗略规则

        直接调用函数，其实相当于是 window.函数，所以 this 指代 window

回调函数

如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为 回调函数

简单理解： 当一个函数当做参数来传递给另外一个函数的时候，这个函数就是 回调函数

事件流

事件流指的是事件完整执行过程中的流动路径

事件捕获

从DOM的根元素开始去执行对应的事件 (从外到里)

事件捕获需要写对应代码才能看到效果

事件冒泡

当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒 泡

简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的 同名事件

事件冒泡是默认存在的

阻止冒泡 

问题：因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素

需求：若想把事件就限制在当前元素内，就需要阻止事件冒泡

前提：阻止事件冒泡需要拿到事件对象

注意： 此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效

我们某些情况下需要 阻止默认行为的发生，比如 阻止 链接的跳转，表单域跳转

解绑事件 

on事件方式，直接使用null覆盖偶就可以实现事件的解绑

addEventListener方式，必须使用：

removeEventListener(事件类型, 事件处理函数, [获取捕获或者冒泡阶段])

两种注册事件的区别

传统on注册（L0）

        同一个对象,后面注册的事件会覆盖前面注册(同一个事件)

        直接使用null覆盖偶就可以实现事件的解绑

        都是冒泡阶段执行的

事件监听注册（L2）

        语法: addEventListener(事件类型, 事件处理函数, 是否使用捕获)

        后面注册的事件不会覆盖前面注册的事件(同一个事件)

        可以通过第三个参数去确定是在冒泡或者捕获阶段执行

        必须使用removeEventListener(事件类型, 事件处理函数, 获取捕获或者冒泡阶段)

        匿名函数无法被解绑

事件委托 

事件委托是利用事件流的特征解决一些开发需求的知识技巧

        优点：减少注册次数，可以提高程序性能

        原理：事件委托其实是利用事件冒泡的特点。给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件

        实现：事件对象.target. tagName 可以获得真正触发事件的元素

其他事件

页面加载事件

加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件

事件名：load

监听页面所有资源加载完毕：

        给 window 添加 load 事件

元素滚动事件

滚动条在滚动的时候持续触发的事件

事件名：scroll

页面滚动事件-获取位置

        scrollLeft和scrollTop （属性）

获取被卷去的大小

获取元素内容往左、往上滚出去看不到的距离 

这两个值是可 读写 的

---

页面滚动事件-滚动到指定的坐标

页面尺寸事件

---

页面尺寸事件-获取元素宽高

---

元素尺寸于位置-尺寸

获取宽高：

         获取元素的自身宽高、包含元素自身设置的宽高、padding、border

        offsetWidth和offsetHeight

        获取出来的是数值,方便计算

        注意: 获取的是可视宽高, 如果盒子是隐藏的,获取的结果是0

获取位置：

        获取元素距离自己定位父级元素的左、上距离

        

offsetLeft和offsetTop 注意是只读属性

日期对象

实例化

在代码中发现了 new 关键字时，一般将这个操作称为 实例化

日期对象方法

时间戳

使用场景： 如果计算倒计时效果，前面方法无法直接计算，需要借助于时间戳完成

什么是时间戳:

         是指1970年01月01日00时00分00秒起至现在的 毫秒数 ，它是一种特殊的计量时间的方式

算法：

将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数

剩余时间毫秒数 转换为 剩余时间的 年月日时分秒 就是 倒计时时间

比如 将来时间戳 2000ms - 现在时间戳 1000ms = 1000ms

1000ms 转换为就是 0小时0分1秒

转换公式：

Ø d = parseInt(总秒数/ 60/60 /24); // 计算天数

Ø h = parseInt(总秒数/ 60/60 %24) // 计算小时

Ø m = parseInt(总秒数 /60 %60 ); // 计算分数

Ø s = parseInt(总秒数%60); // 计算当前秒数        

---

节点操作

DOM 节点

查找节点

父节点查找：

子节点查找：

兄弟关系查找：

---

增加节点

1.创建节点

2.追加节点

克隆节点

删除节点

Window对象

BOM(浏览器对象模型)

BOM(Browser Object Model ) 是浏览器对象模型

window对象是一个全局对象，也可以说是JavaScript中的顶级对象

像document、alert()、console.log()这些都是window的属性，基本BOM的属性和方法都是window的。

所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法

window对象下的属性和方法调用的时候可以省略window

定时器-延时函数

JavaScript 内置的一个用来让代码延迟执行的函数，叫 setTimeout

setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行, 平时省略window

注意点

        延时器需要等待,所以后面的代码先执行

        每一次调用延时器都会产生一个新的延时器

---

JS执行机制

JavaScript 语言的一大特点就是 单线程 ，也就是说， 同一个时间只能做一件事。

这是因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互，以及操作

DOM 而诞生的。比如我们对某个 DOM 元素进行添加和删除操作，不能同时进行。 应该先进行添加，之

后再删除。

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是：

如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

为了解决这个问题，利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个

线程。于是，JS 中出现了 同步 和 异步。

同步

前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同

步做法：我们要烧水煮饭，等水开了（10分钟之后），再去切菜，炒菜。

异步

你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事

情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。

---

---

location对象

location 的数据类型是对象，它拆分并保存了 URL 地址的各个组成部分；

常用属性和方法：

😶‍🌫️href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转

😶‍🌫️search 属性获取地址中携带的参数，符号 ？后面部分

😶‍🌫️hash 属性获取地址中的啥希值，符号 # 后面部分

😶‍🌫️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.itcast.cn' }
})()

histroy对象

history 的数据类型是对象，主要管理历史记录， 该对象与浏览器地址栏的操作相对应，如前进、后退、历史记 录等

常用属性和方法

本地存储

本地存储介绍

以前我们页面写的数据一刷新页面就没有了，是不是？

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常 性在本地存储大量的数据，HTML5规范提出了相关解决方案。

1、数据存储在 用户浏览器 中

2、设置、读取方便、甚至页面刷新不丢失数据

3、容量较大，sessionStorage和localStorage约 5M 左右

作用: 可以将数据永久存储在本地(用户的电脑), 除非手动删除，否则关闭页面也会存在

特性：

可以多窗口（页面）共享（同一浏览器可以共享）

以键值对的形式存储使用

语法：

sessionStorage

特性

生命周期为关闭浏览器窗口

在同一个窗口(页面)下数据可以共享

以键值对的形式存储使用

用法跟 localStorage 基本相同

存储复杂数据类型 

目标： 能够存储复杂数据类型以及取出数据

解决： 需要将复杂数据类型转换成JSON字符串,在存储到本地

语法：JSON.stringify(复杂数据类型)

问题： 因为本地存储里面取出来的是字符串，不是对象，无法直接使用

解决： 把取出来的字符串转换为对象

语法：JSON.parse(JSON字符串)

数组中map方法 迭代数组

数组中join方法

正则表达式

介绍

正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也是对象

通常用来查找、替换那些符合正则表达式的文本

---

正则表达式在 JavaScript中的使用场景：

例如验证表单：用户名表单只能输入英文字母、数字或者下划线， 昵称输入框中可以输入中文( 匹配 )

        比如用户名: /^[a-z0-9_-]{3,16}$/

过滤掉页面内容中的一些敏感词( 替换 )，或从字符串中获取我们想要的特定部分( 提取 )等

语法

1. 定义正则表达式语法：

2.判断是否有符合规则的字符串：

3.检索（查找）符合规则的字符串：

元字符

普通字符:

大多数的字符仅能够描述它们本身，这些字符称作普通字符，例如所有的字母和数字。

也就是说普通字符只能够匹配字符串中与它们相同的字符。

---

元字符(特殊字符）

是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。

        比如，规定用户只能输入英文26个英文字母，普通字符的话 abcdefghijklm…..

        但是换成元字符写法： [a-z]

1. 边界符

正则表达式中的边界符（位置符）用来 提示字符所处的位置 ，主要有两个字符

2. 量词

量词用来 设定某个模式出现的次数

3. 字符类

[ ] 里面加上 - 连字符   使用连字符 - 表示一个范围

---

[ ] 里面加上 ^ 取反符号

---

. 匹配除换行符之外的任何单个字符

---

 预定义： 指的是 某些常见模式的简写方式。

修饰符

修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等

---

替换 replace 替换

参考资源网址：

黑马程序员官网-IT培训机构|java培训|前端培训|python培训|大数据培训|鸿蒙开发培训 (itheima.com)