Web APIs

前言

Dom获取&属性操作

Web API 基本认知

变量声明

变量声明有三个 var let 和 const

• ES5声明变量特点: var
• ES6声明变量特点: let const

首先var 先排除，老派写法，问题很多，可以淘汰掉…
问题:
(1) 变量提升: var声明提升到当前作用域最顶端
(2) 没有块级作用域: 大括号(分支+循环)里面的变量是全局的

let 与 sonst 区别:
let 变量
sonst 常量
建议： const 优先，尽量使用const，原因是：

1. const 语义化更好
2. 很多变量我们声明的时候就知道他不会被更改了，那为什么不用 const呢？
3. 实际开发中也是，比如react框架，基本const
4. 有了变量先给const，如果发现它后面是要被修改的，再改为let

什么时候使用let声明变量？
如果基本数据类型的值或者引用类型的地址发生变化的时候，需要用let
比如 一个变量进行加减运算，比如 for循环中的 i++
建议数组和对象使用 const 来声明

(1) const 声明的值不能更改，而且const声明变量的时候需要里面进行初始化

(2) 但是对于引用数据类型，const声明的变量，里面存的不是 值，不是值，不是值，是 地址。

获取DOM对象

作用和分类

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

什么是DOM

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

DOM树

DOM树是什么

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

DOM对象

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

• 所有的标签属性都可以在这个对象上面找到
• 修改这个对象的属性会自动映射到标签身上

DOM的核心思想
把网页内容当做对象来处理

document 对象

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

获取DOM对象

查找元素DOM元素就是利用 JS 选择页面中标签元素

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

1. 选择匹配的第一个元素
   语法：
   参数:
   包含一个或多个有效的CSS选择器 字符串
   返回值：

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

多参看文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector

2. 选择匹配的第一个元素
   语法：
   参数:
   包含一个或多个有效的CSS选择器 字符串
   返回值：
   CSS选择器匹配的NodeList 对象集合

得到的是一个伪数组：

• 有长度有索引号的数组
• 但是没有 pop() push() 等数组方法
• 想要得到里面的每一个对象，则需要遍历（for）的方式获得。

注意事项:
哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个伪数组，里面只有一个元素而已

其他获取DOM元素方法

操作元素内容

修改元素的文本更换内容

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

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

1. 对象.innerText 属性
2. 对象.innerHTML 属性

1. 元素innerText 属性

• 将文本内容添加/更新到任意标签位置
• 显示纯文本，不解析标签

2. 元素.innerHTML 属性

• 将文本内容添加/更新到任意标签位置
• 会解析标签，多标签建议使用模板字符

二者的区别:

• 元素.innerText 属性 只识别文本，不能解析标签
• 元素.innerHTML 属性 能识别文本，能够解析标签

操作元素属性

操作元素常用属性

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

语法：

操作元素样式属性

可以通过 JS 设置/修改标签元素的样式属性

• 通过 style 属性操作CSS
• 操作类名(className) 操作CSS
• 通过 classList 操作类控制CSS

1.通过 style 属性操作CSS

语法:

注意：

1. 修改样式通过style属性引出
2. 如果属性有-连接符，需要转换为小驼峰命名法
3. 赋值的时候，需要的时候不要忘记加css单位

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

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

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

3. 通过 classList 操作类控制CSS

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

语法：

使用 className 和classList的区别？

• 修改大量样式的更方便
• 修改不多样式的时候方便
• classList 是追加和删除不影响以前类名

操作 表单元素 属性

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

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

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

自定义属性

标准属性: 标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如： disabled、checked、selected
自定义属性：

• 在html5中推出来了专门的data-自定义属性
• 在标签上一律以data-开头
• 在DOM对象上一律以dataset对象方式获取
  

定时器-间歇函数

• 能够使用定时器函数重复执行代码
• 定时器函数可以开启和关闭定时器

开启定时器

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

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

关闭定时器

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