JS学习笔记-Web APIS (上)
补充一个知识点:
splice() 方法用于添加或删除数组中的元素。
注意：这种方法会改变原始数组。
1. 删除数组：splice(起始位置， 删除的个数)
比如：
arr = ['red', 'green', 'blue']
arr.splice(1,1)
// 删除green元素console.log(arr)
// ['red, 'blue']
2. 添加元素:
splice(起始位置，删除个数，添加数组元素)
arr = ['red', 'green', 'blue']
arr.splice(1, 0, 'pink')
// 在索引号是1的位置添加 pink
//console.log(arr)
// ['red', 'pink', 'green', 'blue']
arr.splice(1, 0, 'pink', 'hotpink')
// 在索引号是1的位置添加 pink和hotpink
console.log(arr)
// ['red', 'pink', 'hotpink', 'green', 'blue']
一、Web APIs - 第1天笔记
-了解 DOM 的结构并掌握其基本的操作，体验 DOM 的在开发中的作用
-知道 ECMAScript 与 JavaScript 的关系
- 了解 DOM 的相关概念及DOM 的本质是一个对象
- 掌握查找节点的基本方法
- 掌握节点属性和文本的操作
- 能够使用间歇函数创建定时任务
(1)介绍
知道 ECMAScript 与 JavaScript 的关系，Web APIs 是浏览器扩展的功能。严格意义上讲，我们在 JavaScript 阶段学习的知识绝大部分属于 ECMAScript 的知识体系，ECMAScript 简称 ES 它提供了一套语言标准规范，如变量、数据类型、表达式、语句、函数等语法规则都是由 ECMAScript 规定的。浏览器将 ECMAScript 大部分的规范加以实现，并且在此基础上又扩展一些实用的功能，这些被扩展出来的内容我们称为 Web APIs。CMAScript 运行在浏览器中然后再结合 Web APIs 才是真正的 JavaScript，Web APIs 的核心是 DOM 和 BOM。
(2)知道 DOM 相关的概念，建立对 DOM 的初步认识，学习 DOM 的基本操作，体会 DOM 的作用。
DOM（Document Object Model）是将整个 HTML 文档的每一个标签元素视为一个对象，这个对象下包含了许多的属性和方法，通过操作这些属性或者调用这些方法实现对 HTML 的动态更新，为实现网页特效以及用户交互提供技术支撑。简言之 DOM 是用来动态修改 HTML 的，其目的是开发网页特效及用户交互。
(3)DOM树
(4)DOM 节点节点是文档树的组成部分，每一个节点都是一个 DOM 对象，主要分为元素节点、属性节点、文本节点等。
①【元素节点】其实就是 HTML 标签，如上图中 `head`、`div`、`body` 等都属于元素节点。
②【属性节点】是指 HTML 标签中的属性，如上图中 `a` 标签的 `href` 属性、`div` 标签的 `class` 属性。
③【文本节点】是指 HTML 标签的文字内容，如 `title` 标签中的文字。
④【根节点】特指 `html` 标签。
⑤ 其它...
(5)document
`document` 是 JavaScript 内置的专门用于 DOM 的对象，该对象包含了若干的属性和方法，`document` 是学习 DOM 的核心。
(6)获取DOM对象
1. querySelector 满足条件的第一个元素
2. querySelectorAll 满足条件的元素集合 返回伪数组
总结：- document.getElementById 专门获取元素类型节点，根据标签的 `id` 属性查找- 任意 DOM 对象都包含 nodeType 属性，用来检检测节点类型
(7)操作元素内容通过修改 DOM 的文本内容，动态改变网页的内容。
①`innerHTML` 将文本内容添加/更新到任意标签位置，文本中包含的标签会被解析。
②`innerText` 将文本内容添加/更新到任意标签位置，文本中包含的标签不会被解析。
总结：如果文本内容中包含 `html` 标签时推荐使用 `innerHTML`，否则建议使用 `innerText` 属性。
(8)操作元素属性
有3种方式可以实现对属性的修改：
####常用属性修改
1. 直接通过属性名修改，最简洁的语法
####控制样式属性
1. 应用【修改样式】，通过修改行内样式 `style` 属性，实现对样式的动态修改。通过元素节点获得的 `style` 属性本身的数据类型也是对象，如 `box.style.color`、`box.style.width` 分别用来获取元素节点 CSS 样式的 `color` 和 `width` 的值。
任何标签都有 `style` 属性，通过 `style` 属性可以动态更改网页标签的样式，如要遇到 `css` 属性中包含字符 `-` 时，要将 `-` 去掉并将其后面的字母改成大写，如 `background-color` 要写成 `box.style.backgroundColor`
2. 操作类名(className) 操作CSS如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。
注意：
1.由于class是关键字, 所以使用className去代替
2.className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名
3. 通过 classList 操作类控制CSS为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
#### 操作表单元素属性
表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框正常的有属性有取值的跟其他的标签属性没有任何区别获取:DOM对象.属性名
设置:DOM对象.属性名= 新值
#### 自定义属性
标准属性: 标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如： disabled、checked、selected自定义属性：在html5中推出来了专门的data-自定义属性 在标签上一律以data-开头在DOM对象上一律以dataset对象方式获取
(9)间歇函数
知道间歇函数的作用，利用间歇函数创建定时任务。`setInterval` 是 JavaScript 中内置的函数，它的作用是间隔固定的时间自动重复执行另一个函数，也叫定时器函数。
Web APIs - 第2天
学会通过为DOM注册事件来实现可交互的网页特效。
能够判断函数运行的环境并确字 this 所指代的对象- 理解事件的作用，知道应用事件的 3 个步骤。
## 事件
事件是编程语言中的术语，它是用来描述程序的行为或状态的，**一旦行为或状态发生改变，便立即调用一个函数。**
例如：用户使用【鼠标点击】网页中的一个按钮、用户使用【鼠标拖拽】网页中的一张图片
### 事件监听
结合 DOM 使用事件时，需要为 DOM 对象添加事件监听，等待事件发生（触发）时，便立即调用一个函数。
`addEventListener` 是 DOM 对象专门用来添加事件监听的方法，它的两个参数分别为【事件类型】和【事件回调】。
例如，
为 DOM 元素添加事件监听，等待事件发生，便立即执行一个函数。
结论：
1. `this` 本质上是一个变量，数据类型为对象
2. 函数的调用方式不同 `this` 变量的值也不同
3. 【谁调用 `this` 就是谁】是判断 `this` 值的粗略规则
4. 函数直接调用时实际上 `window.sayHi()` 所以 `this` 的值为 `window`
## 回调函数
如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数。
函数 `bar` 做参数传给了 `foo` 函数，`bar` 就是所谓的回调函数了！！！
我们回顾一下间歇函数setInterval
fn函数做为参数传给了 `setInterval` ，这便是回调函数的实际应用了，结合刚刚学习的函数表达式上述代码还有另一种更常见写法。
结论：1. 回调函数本质还是函数，只不过把它当成参数使用2. 使用匿名函数做为回调函数比较常见
# Web APIs - 第3天
> 进一步学习 事件进阶，实现更多交互的网页特效，结合事件流的特征优化事件执行的效率- 掌握阻止事件冒泡的方法- 理解事件委托的实现原理
## 事件流
事件流是对事件执行过程的描述，了解事件的执行过程有助于加深对事件的理解，提升开发实践中对事件运用的灵活度。
任意事件被触发时总会经历两个阶段：【捕获阶段】和【冒泡阶段】。简言之，捕获阶段是【从父到子】的传导过程，冒泡阶段是【从子向父】的传导过程。
### 捕获和冒泡
了解了什么是事件流之后，我们来看事件流是如何影响事件执行的：
执行上述代码后发现，当单击事件触发时，其祖先元素的单击事件也【相继触发】，这是为什么呢？
结合事件流的特征，我们知道当某个元素的事件被触发时，事件总是会先经过其祖先才能到达当前元素，然后再由当前元素向祖先传递，事件在流动的过程中遇到相同的事件便会被触发。
再来关注一个细节就是事件相继触发的【执行顺序】，事件的执行顺序是可控制的，即可以在捕获阶段被执行，也可以在冒泡阶段被执行。
如果事件是在冒泡阶段执行的，我们称为冒泡模式，它会先执行子盒子事件再去执行父盒子事件，默认是冒泡模式。
如果事件是在捕获阶段执行的，我们称为捕获模式，它会先执行父盒子事件再去执行子盒子事件。
事件流是事件在执行时的底层机制，主要体现在父子盒子之间事件的执行上。
结论：
1. `addEventListener` 第3个参数决定了事件是在捕获阶段触发还是在冒泡阶段触发
2. `addEventListener` 第3个参数为 `true` 表示捕获阶段触发，`false` 表示冒泡阶段触发，默认值为 `false`
3. 事件流只会在父子元素具有相同事件类型时才会产生影响
4. 绝大部分场景都采用默认的冒泡模式（其中一个原因是早期 IE 不支持捕获）
### 阻止冒泡
阻止冒泡是指阻断事件的流动，保证事件只在当前元素被执行，而不再去影响到其对应的祖先元素。
结论：事件对象中的 `ev.stopPropagation` 方法，专门用来阻止事件冒泡。
鼠标经过事件：
>>mouseover 和 mouseout 会有冒泡效果
>>mouseenter 和 mouseleave 没有冒泡效果 (推荐)
## 事件委托
事件委托是利用事件流的特征解决一些现实开发需求的知识技巧，主要的作用是提升程序效率。
大量的事件监听是比较耗费性能的，如下代码所示
利用事件流的特征，可以对上述的代码进行优化，事件的的冒泡模式总是会将事件流向其父元素的，如果父元素监听了相同的事件类型，那么父元素的事件就会被触发并执行，正是利用这一特征对上述代码进行优化，如下代码所示：
我们的最终目的是保证只有点击 button 子元素才去执行事件的回调函数，如何判断用户点击是哪一个子元素呢？
事件对象中的属性 `target` 或 `srcElement`属性表示真正触发事件的元素，它是一个元素类型的节点。
用ev.target.tagName === 'BUTTON' (注意要大写)，意思是当前触发的元素是button
// 假设上述的 10000 个 buttom 元素共同的祖先元素是 table
const parents = document.querySelector('table')
parents.addEventListener('click', function (ev) {
// console.log(ev.target);
// 只有 button 元素才会真正去执行逻辑
if(ev.target.tagName === 'BUTTON') {
// 执行的逻辑 } })
优化过的代码只对祖先元素添加事件监听，相比对 10000 个元素添加事件监听执行效率要高许多！！！
## 其他事件
### 页面加载事件
加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件有些时候需要等页面资源全部处理完了做一些事情**事件名：load**监听页面所有资源加载完毕:
window.addEventListener('load', function() {
// xxxxx})
### 元素滚动事件
滚动条在滚动的时候持续触发的事件
window.addEventListener('scroll', function() {
// xxxxx})
### 页面尺寸事件会在窗口尺寸改变的时候触发事件：
window.addEventListener('resize', function() { // xxxxx})
## 元素尺寸与位置
获取元素的自身宽高、包含元素自身设置的宽高、padding、borderoffsetWidth和offsetHeight 获取出来的是数值,方便计算注意: 获取的是可视宽高, 如果盒子是隐藏的,获取的结果是0
# Web APIs - 第4天
> 进一步学习 DOM 相关知识，实现可交互的网页特效- 能够插入、删除和替换元素节点- 能够依据元素节点关系查找节点
## 日期对象
掌握 Date 日期对象的使用，动态获取当前计算机的时间。
ECMAScript 中内置了获取系统时间的对象 Date，使用 Date 时与之前学习的内置对象 console 和 Math 不同，它需要借助 new 关键字才能使用。
### 实例化
~~~javascript
// 1. 实例化
const date = new Date(); // 系统默认时间
const date = new Date('2020-05-01') // 指定时间
// date 变量即所谓的时间对象
console.log(typeof date)
~~~
### 方法
~~~javascript
// 1. 实例化
const date = new Date();
// 2. 调用时间对象方法
// 通过方法分别获取年、月、日，时、分、秒
const year = date.getFullYear(); // 四位年份
const month = date.getMonth(); // 0 ~ 11 月份
~~~
getFullYear 获取四位年份
getMonth 获取月份，取值为 0 ~ 11
getDate 获取月份中的每一天，不同月份取值也不相同
getDay 获取星期，取值为 0 ~ 6
getHours 获取小时，取值为 0 ~ 23
getMinutes 获取分钟，取值为 0 ~ 59
getSeconds 获取秒，取值为 0 ~ 59
### 时间戳
时间戳是指1970年01月01日00时00分00秒起至现在的总秒数或毫秒数，它是一种特殊的计量时间的方式。注：ECMAScript 中时间戳是以毫秒计的。
~~~javascript
// 1. 实例化 const date = new Date()
// 2. 获取时间戳
console.log(date.getTime())
// 还有一种获取时间戳的方法
console.log(+new Date())
// 还有一种获取时间戳的方法
console.log(Date.now())
~~~
获取时间戳的方法，分别为 getTime 和 Date.now 和 +new Date()
## DOM 节点
> 掌握元素节点创建、复制、插入、删除等操作的方法，能够依据元素节点的结构关系查找节点。回顾之前 DOM 的操作都是针对元素节点的属性或文本的，除此之外也有专门针对元素节点本身的操作，如插入、复制、删除、替换等。
### 插入节点
在已有的 DOM 节点中插入新的 DOM 节点时，需要关注两个关键因素：首先要得到新的 DOM 节点，其次在哪个位置插入这个节点。
如下代码演示：
```html
插入节点
在现有 dom 结构基础上插入新的元素节点
```
结论：
- `createElement` 动态创建任意 DOM 节点
- `cloneNode` 复制现有的 DOM 节点，传入参数 true 会复制所有子节点
- `appendChild` 在末尾（结束标签前）插入节点
再来看另一种情形的代码演示：
```html
插入节点
在现有 dom 结构基础上插入新的元素节点
- HTML
- CSS
- JavaScript
```结论：
- `createElement` 动态创建任意 DOM 节点
- `cloneNode` 复制现有的 DOM 节点，传入参数 true 会复制所有子节点
- `insertBefore` 在父节点中任意子节点之前插入新节点
### 删除节点
删除现有的 DOM 节点，也需要关注两个因素：首先由父节点删除子节点，其次是要删除哪个子节点。
```html
- HTML
- CSS
- Web APIs
```
结论：`removeChild` 删除节点时一定是由父子关系。
#### 父子关系
```html
- HTML
- CSS
- JavaScript 基础
- Web APIs
```
结论：
- `childNodes` 获取全部的子节点，回车换行会被认为是空白文本节点
- `children` 只获取元素类型节点
```html
| 序号 | 课程名 | 难度 | 操作 |
| 1 | HTML | 初级 | |
| 2 | CSS | 中级 | |
| 3 | Web APIs | 高级 |
```
结论：`parentNode` 获取父节点，以相对位置查找节点，实际应用中非常灵活。
#### 兄弟关系
```html
- HTML
- CSS
- JavaScript 基础
- Web APIs
```
结论：
- `previousSibling` 获取前一个节点，以相对位置查找节点，实际应用中非常灵活。
- `nextSibling` 获取后一个节点，以相对位置查找节点，实际应用中非常灵活。