WebAPI详细知识

文章目录

• • Web API基本认知
  • • • 1. 作用和分类
      • 2. DOM
      • 3. DOM树
      • 4. DOM对象
  • 获取DOM对象
  • • • 1. 根据CSS选择器来获取DOM元素
      • 2. 其他获取DOM元素方法
  • 设置/修改DOM元素内容
  • • • 1. document.write()
      • 2. 元素.innerText属性
      • 3. 元素.innerHTML属性
  • 设置/修改DOM元素属性
  • • • 1. 设置/修改元素常用属性
      • 2. 设置/修改元素样式属性
      • 3. 设置/修改表单元素属性
  • 定时器-间歇函数
  • • • 1. 开启定时器
      • 2. 关闭定时器
  • 事件
  • • • 1. 事件
      • 2. 事件监听版本
      • 3. 事件类型
  • 高阶函数
  • • • 1. 函数表达式
      • 2. 回调函数
  • 环境对象
  • 编程思想
  • • • 排他思想
  • 节点操作
  • • • 1. DOM节点
      • 2. 查找节点
      • 3. 增加节点
      • 4. 删除节点
  • 时间对象
  • • • 1. 实例化
      • 2. 时间对象方法
      • 3. 时间戳
  • 重绘和回流
  • • • 1. 浏览器是如何进行界面渲染的
      • 2. 重绘和回流(重排)
  • 事件对象
  • • • 1. 获取事件对象
      • 2. 事件对象常用属性
  • 事件流
  • • • 1. 事件流与两个阶段说明
      • 2. 事件捕获和事件冒泡
      • 3. 阻止事件流动
  • 事件委托
  • • • 1. 事件委托

Web API基本认知

1. 作用和分类

• 作用：就是使用JS去操作html和浏览器
• 分类：DOM（文档对象模型）、BOM（浏览器对象模型）
  

2. DOM

• DOM (Document Object Model—文档对象模型)是用来呈现以及与任意HTML或XML文档交互的API
• 说白了就是DOM是浏览器提供的一套专门用来操作网页内容的功能
• DOM作用：开发网页内容特效和实现用户交互

3. DOM树

• 将HTML文档以树状结构直观的表现出来，我们称之为文档树或DOM树
• 描述网页内容关系的名词
• 作用：文档树直观的体现了标签与标签之间的关系

4. DOM对象

• DOM对象：浏览器根据html标签生成的JS对象
  1. 所有的标签属性都可以在这个对象上面找到
  2. 修改这个对象的属性会自动映射到标签身上
• DOM的核心思想
  1. 把网页内容当做对象俩处理
• document对象
  1. 是DOM里提供的一个对象
  2. 所以它提供的属性和方法都是用来访问和操作网页内容的
  3. 网页所有内容都是在document里面

获取DOM对象

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

• 选择匹配的第一个元素

  语法：

document.querySelector('css选择器')

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

​ 返回值：CSS选择器匹配的第一个元素，一个HTMLElement对象。如果没有匹配到，则返回null。

• 选择匹配的多个元素

  语法：

document.querySelectorAll('css选择器')

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

​ 返回值：CSS选择器匹配的NodeList对象集合，得到的是一个伪数组，想要得到里面的每一个对象，则需要遍历的方式获得

伪数组：

1. 有长度有索引的数组
2. 但是没有pop() push()等数组方法

注意事项：

1. 哪怕只有一个元素，通过querySelectorAll()获取过来的也是一个伪数组，里面只有一个元素而已

2. 其他获取DOM元素方法

// 根据id获取一个元素
document.getElementById('nav')
// 根据标签获取一类元素   获取页面所有div
document.getElementsByTagName('div')
// 根据类名获取元素   获取页面所有类名为w的
document.getElementsByClassName('w')

设置/修改DOM元素内容

1. document.write()

• 只能将文本内容追加到前面的位置
• 文本中包含的标签会被解析

// 永远都只是追加操作， 并且只能在之前
document,write('Hello World!');
document,write('
你好，世界！
');

2. 元素.innerText属性

• 将文本内容添加/更新到任意标签位置
  • 文本中包含的标签不会被解析

// innerText将文本内容添加/更新到任意标签位置
let info = document.getDlementById('info');
info.innerText = '
嗨~ 我叫张三！
';

3. 元素.innerHTML属性

• 将文本内容添加/更新到任意标签位置
  • 文本中包含的标签会被解析

let box = document.querySelector('h3');
box.innerHTML = '
嗨~ 我叫李四！
'

设置/修改DOM元素属性

1. 设置/修改元素常用属性

• 还可以通过 JS 设置/修改标签元素属性，比如通过 src更换 图片。最常见的属性比如： href、title、src 等。

  语法：

对象.属性 = 值

​ 例子：

// 1. 获取元素
let pic = document.querySelector('img');
// 2. 操作元素
pic.src = './1.jpg';
pic.title = '这是一张图片';

2. 设置/修改元素样式属性

• 通过style属性操作CSS

  语法：

对象.style.样式属性 = 值

​ 例子：

let box = document.querySelector('.box');
box.style.backgroundColor = 'red';
box.style.width = '300px';
box.style.marginTop = '50px';

• 操作类名(className)操作CSS

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

  语法：

// active是一个css类名
元素.className = 'active';

注意事项

1. 由于class是关键字， 所以使用className去代替
2. className是使用新值换旧值，如果需要添加一个类，需要保留之前的类名

• 通过classList操作类控制CSS

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

  语法：

// 追加一个类
元素.classList.add('类名')；
// 删除一个类
元素.classList.remove('类名')
// 切换一个类
元素.classList.toggle('类名')

3. 设置/修改表单元素属性

表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框。正常的有属性有取值的跟其他的标签属性没有任何区别。

• 获取：DOM对象.属性名
• 设置：DOM对象.属性名 = 新值

表单.value = '用户名';
表单.type = 'password';

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

比如：disabled、checked、selecte

定时器-间歇函数

1. 开启定时器

setInterval(函数,间隔时间)

• 作用：每隔一段时间调用这个函数
• 间隔时间单位是毫秒

例子：

function repeat(){console.log('开启定时器')
}
setInterval(repeat,1000);

注意事项

1. 函数名字不需要加括号
2. 定时器返回的是一个id数字

2. 关闭定时器

一般不会刚创建就停止，而是满足一定条件再停止

let 变量名 = setInterval(函数,间隔时间)
clearInterval(变量名)

事件

1. 事件

• 事件：实在编程时系统内发生的动作或者发生的事情
• 事件监听：就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出相应，也称为注册事件
• 语法

元素.addEventListener('事件',要执行的函数)

• 事件监听三要素：
  1. 事件源：那个dom元素被事件触发了，要获取dom元素
  2. 事件：用什么方式触发，比如鼠标点击、鼠标经过mouseover等
  3. 事件调用的函数：要做什么事
• 例子：

// 1. 获取元素
let btn = document.querySelector('button')
// 2. 事件监听
btn.addEventListener('click',function(){alert('事件点击')
})

注意事项

1. 事件类型要加引号
2. 函数是点击之后再去执行，每次点击都会执行一次

2. 事件监听版本

• DOM L0

  事件源.on事件 = function() { }

• DOM L2

  事件源.on事件 = function() { }

• 发展史

  1. DOM L0 ：是 DOM 的发展的第一个版本； L：level
  2. DOM L1：DOM级别1 于1998年10月1日成为W3C推荐标准
  3. DOM L2：使用addEventListener注册事件
  4. DOM L3： DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件类型

3. 事件类型

• 鼠标事件：鼠标触发

  click 鼠标点击

  mouseenter 鼠标经过

  mouseleave 鼠标离开

• 焦点事件：表单获得光标

  focus 获得焦点

  blur 失去焦点

• 键盘事件：键盘触发

  keydown 键盘按下触发

  keyup 键盘抬起触发

• 文本事件：表单输入触发

  input 用户输入事件

高阶函数

高阶函数可以被简单理解为函数的高级应用，js中函数可以被当成【值】来对待，基于这个特性实现函数的高级应用。值就是 js中的数据，如数值、字符串、布尔、对象等。

1. 函数表达式

函数表达式和普通函数并无本质上的区别：

// 函数表达式和普通函数本质上是一样的
let counter = function(x,y){return x + y
}
// 调用函数
let result = counter(5,10)
console.log(result)

• 普通函数的声明与调用无顺序限制，推荐做法先声明再调用
• 函数表达式必须要先声明再调用

2. 回调函数

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

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

function fn(){console.log('我是回调函数...')
}
// fn传递给了setInterval, fn就是回调函数
setInterval(fn,1000)

环境对象

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

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

• 函数的调用方式不同，this 指代的对象也不同
• 谁调用， this 就是谁，是判断 this 指向的粗略规则
• 直接调用函数，其实相当于是 window.函数，所以 this 指代 window

编程思想

排他思想

• 当前元素为A状态,其他元素为B状态
• 使用：
  1. 干掉所有人。使用for循环
  2. 复活他自己。通过this或者下标找到自己或者对应的元素

节点操作

1. DOM节点

• DOM节点：DOM树里每一个内容都称之为节点
• 节点类型
  1. 元素节点：所有的标签 比如 body、 div。html 是根节点
  2. 属性节点：所有的属性 比如 href
  3. 文本节点：所有的文本
• 节点关系
  1. 父节点
  2. 子节点
  3. 兄弟节点

2. 查找节点

• 父节点查找

  parentNode 这是属性，返回最近一级的父节点，找不到返回为null

子元素.parentNode

• 子节点查找
  1. childNodes 获得所有子节点、包括文本节点（空格、换行）、注释节点等
  2. children 仅获得所有元素节点，返回的还是一个伪数组

父元素.children

• 兄弟关系查找
  1. nextElementSibling 下一个兄弟节点
  2. previousElementSibling 上一个兄弟节点

3. 增加节点

• 创建节点

  即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点

// 创造一个新的元素节点
document.createElement('标签名')

• 追加节点：要想在界面看到，还得插入到某个父元素中

  插入到父元素的最后一个子元素

// 插入到这个父元素的最后
父元素.appendChild(要插入的元素)

​ 插入到父元素中某个子元素的前面

// 插入到某个子元素的前面
父元素.insertBefore(要插入的元素, 在哪个元素前面)

• 克隆节点

  特殊情况下，我们新增节点，按照如下操作：复制一个原有的节点，把复制的节点放入到指定的元素内部。

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

// 克隆一个已有的元素节点
元素.cloneNode(布尔值)

4. 删除节点

• 若一个节点在页面中已不需要时，可以删除它，在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除。

父元素.removeChild(要删除的元素)

注意事项

1. 如不存在父子关系则删除不成功
2. 删除节点和隐藏节点（display:none） 有区别的： 隐藏节点还是存在的，但是删除，则从html中删除节点

时间对象

1. 实例化

• 在代码中发现了 new 关键字时，一般将这个操作称为实例化，创建一个时间对象并获取时间

  获得当前时间

let date = new Date()

​ 获得指定时间

let date = new Date('2022-12-08 23:39:00')

2. 时间对象方法

• 因为时间对象返回的数据我们不能直接使用，所以需要转换为实际开发中常用的格式

3. 时间戳

• 时间戳

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

• 三种方式获取时间戳

  使用 getTime() 方法

let date = new Date();
console.log(date.getTime())

​ 简写 +new Date()

console.log(+new Date)

​ 使用 Date().now() 无需实例化，但是只能得到当前的时间戳， 而前面两种可以返回指定时间的时间戳。

console.log(Date.now())

重绘和回流

1. 浏览器是如何进行界面渲染的

• 解析（Parser）HTML，生成DOM树(DOM Tree)
• 同时解析（Parser） CSS，生成样式规则 (Style Rules)
• 根据DOM树和样式规则，生成渲染树(Render Tree)
• 进行布局 Layout(回流/重排):根据生成的渲染树，得到节点的几何信息（位置，大小）
• 进行绘制 Painting(重绘): 根据计算和获取的信息进行整个页面的绘制
• Display: 展示在页面上

2. 重绘和回流(重排)

• 回流(重排)

  当 Render Tree 中部分或者全部元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档的过程称为 回流。

• 重绘

  由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时(比如：color、background-color、outline等), 称为重绘。

• 重绘不一定引起回流，而回流一定会引起重绘。

• 会导致回流（重排）的操作：

  1. 页面的首次刷新
  2. 浏览器的窗口大小发生改变
  3. 元素的大小或位置发生改变
  4. 改变字体的大小
  5. 内容的变化（如：input框的输入，图片的大小）
  6. 激活css伪类 （如：:hover）
  7. 脚本操作DOM（添加或者删除可见的DOM元素）

  简单理解影响到布局了，就会有回流

事件对象

1. 获取事件对象

• 事件对象
  • 事件对象也是一种对象，这个对象里有事件触发时的相关信息
  • 例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息
• 事件对象的获取
  • 在事件绑定的回调函数的第一个参数就是事件对象。一般命名为event、ev、e。

元素.addEventListener('click',function(e){})

2. 事件对象常用属性

• 部分常用属性

  • type: 获取当前的事件类型

  • clinetX/clinetY: 获取光标相对于浏览器可见窗口左上角的位置

  • offsetY/offsetY: 获取光标相对于当前DOM元素左上角的位置

  • key: 用户按下的键盘键的值，现在不提倡使用keyCode

事件流

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

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

• 说明：假设页面里有个div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段

• 简单来说：捕获阶段是 从父到子 冒泡阶段是从子到父

2. 事件捕获和事件冒泡

• 事件冒泡概念：当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡
• 简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的同名事件
• 事件冒泡是默认存在的

let fa = document.querySelector( '.father');
let son = document.querySelector('.son');
fa.addEventListener('click'，function (){alert("我是爸爸')
});
son.addEventListener('click', function () {alert("我是儿子')
});
document.addEventListener('dblclick', function () {alert('我是爷爷)
});

• 事件捕获概念：从DOM的根元素开始去执行对应的事件 (从外到里)
• 事件捕获需要写对应代码才能看到效果

DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制)

• 说明：
  1. addEventListener第三个参数传入true代表是捕获阶段触发（很少使用）
  2. 若传入false代表冒泡阶段触发，默认就是false
  3. 若是用 L0 事件监听，则只有冒泡阶段，没有捕获

3. 阻止事件流动

• 因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素
• 若想把事件就限制在当前元素内，就需要阻止事件流动
• 阻止事件流动需要拿到事件对象
• 语法：

事件对象.stopPropagation()

• 此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效
• 鼠标经过事件：
  1. mouseover 和 mouseout 会有冒泡效果
  2. mouseenter 和 mouseleave 没有冒泡效果(推荐)
• 阻止默认行为，比如链接点击不跳转，表单域的不提交
• 语法：

e.preventDefault()

• 两种注册事件的区别：
• 传统on注册（L0）
  1. 同一个对象,后面注册的事件会覆盖前面注册(同一个事件)
  2. 直接使用null覆盖偶就可以实现事件的解绑
  3. 都是冒泡阶段执行的
• 事件监听注册（L2）
  1. 语法: addEventListener(事件类型, 事件处理函数, 是否使用捕获)
  2. 后面注册的事件不会覆盖前面注册的事件(同一个事件)
  3. 可以通过第三个参数去确定是在冒泡或者捕获阶段执行
  4. 必须使用removeEventListener(事件类型, 事件处理函数, 获取捕获或者冒泡阶段)
  5. 匿名函数无法被解绑

事件委托

1. 事件委托

• 事件委托是利用事件流的特征解决一些开发需求的知识技巧
• 总结：
  1. 优点：给父级元素加事件（可以提高性能）
  2. 原理：事件委托其实是利用事件冒泡的特点， 给父元素添加事件，子元素可以触发
  3. 实现：事件对象.target 可以获得真正触发事件的元素

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！