Web API 的第四天

Web API 的第四天

递归函数

递归是函数的高级用法，本质上是函数自已调用自已，它的行为非常类似循环

递归函数的介绍

如果一个函数内部调用自已本身，并且通过条件控制避免陷入死循环，那么我们称这个函数为递归函数。

递归要加结束条件

递归函数小例子 ，1-10的和

递归函数的特性

递归函数有 3 个特征：
 1. 重复执行
 2. 调用自身
 3. 【必须】要有条件控制，避免死循环

递归函数总结

1. 递归函数介绍
    递归是函数的高级用法，本质上是函数自已调用自已
2. 递归函数特性
    1. 重复执行
    2. 调用自身
    3. 【必须】要有条件控制，避免死循环

DOM

节点操作

1. 插入节点
 即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点
 创建元素节点方法： document.createElement(‘标签名’)

要想在界面看到，还得插入到某个父元素中
 插入到父元素的最后一个子元素
从后添加： 父元素.appendChild(要添加的元素)

cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值
被克隆元素节点.cloneNode(Boolean值)
 若为true，则代表克隆时会包含后代节点一起克隆
 若为false，则代表克隆时不包含后代节点
 默认为false

插入到父元素中某个子元素的前面
父元素节点.insertBefore(要添加的元素,添加在这个元素的前面)

发布案例

需求 用户输入内容后 ，点击发布按钮 ul列表里有发布内容
css样式

1.获取DOM节点

2.添加事件

3.1用户点击后，获取输入框内容

2. 删除节点
若一个节点在页面中已不需要时，可以删除它
 在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除
如不存在父子关系则删除不成功
父元素.removeChild(被删除的元素节点)

3. 替换节点
替换节点是指把一个已经存在页面中的元素替换成新的元素
方法一 父级元素.replace(新节点,被替换的旧节点)
方法二 父级元素.innerText = 内容
方法二的innerHTML本质上是修改双标签里面的内容，只不过遇到标签也会解析成元素

4. 查找节点
父子关系查找：

1. 获取父节点方法
    parentNode 属性 返回最近一级的父节点 找不到返回为null
   

2. 获取子节点
    childNodes
    获得所有子节点、包括文本节点（空格、换行）、注释节点等
    children
    仅获得所有元素节点
    第一个子节点和最后一个子节点

关闭二维码案例

css样式


1.获取所有按钮

2.添加点击事件

3. 方法一： 删除语法 父级.removeChild(被删除的元素)

4. 方法二： 可以用隐藏实现
查找兄弟的属性
 previousSibling
 找到上一个兄弟节点，包含文本、注释等节点
 prevuisElementSibling
 找到上一个兄弟元素，只找到元素
 nextSibling
 找到下一个兄弟节点，包含文本、注释等节点
 nextElementSibling
 找到下一个兄弟元素，只找到元素

事件流

1. 事件流与两个阶段说明

事件流指的是事件完整执行过程中的流动路径
假设页面里有个div，当触发事件时，会经历两个阶段，
分别是捕获阶段(从根节点到目标节点)、冒泡阶段(从目标节点到根节点)
事件执行 默认都是冒泡阶段执行：
用户触发后代元素，如果父辈们刚好添加了同样事件，按照在冒泡阶段顺序，一次执行他们的事件

2. 事件捕获和事件冒泡

三个阶段：捕获阶段、到达目标、冒泡阶段
事件冒泡是默认存在的 所以触发子元素的时候父元素也会执行
 它指的是：当一个元素触发事件后，会依次向上调用所有父级元素的同名事件
 事件捕获需要写对应代码才能看到效果

3. 阻止事件流动

因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素
若想把事件就限制在当前元素内，就需要阻止事件流动
阻止事件流动需要拿到事件对象
代码：事件对象.stopPropagation()
此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效
css代码

4. 事件委托

事件委托是利用事件流的特征解决一些开发需求的知识技巧
总结：
事件委托其实是利用事件冒泡的特点，给父级元素加事件
事件对象.target 可以获得真正触发事件的元素

需求 点击各自的按钮 打印btn文字
css样式

优化写法 事件委托 不是直接注册给btn 注册给父级
应用场景 遇到给一堆元素注册同样事件类型 全部获取 循环注册
找到堆元素公共父级 把事件添加给委托父级上

鼠标经过事件：
 mouseover 和 mouseout 鼠标移入移出 会有冒泡效果
 mouseenter 和 mouseleave 鼠标移入移出 foucs blus 没有冒泡效果(推荐)
1. 事件流与两个阶段说明
 完整事件的流动过程
 捕获阶段 -> 真正触发事件的元素 -> 冒泡阶段
2. 事件捕获和事件冒泡
 事件捕获是从document一级一级往下到真正触发事件的元素
 事件冒泡是从真正触发事件的元素一级一级往上到document
 默认就有事件冒泡
 捕获必须用L2事件，并第三个参数给true
3. 阻止事件流动
 事件对象.stopPropgation()
4. 事件委托
 利用事件冒泡的特点把事件委托给父级元素