Web API 基本认知:

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

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

什么是DOM DOM是文档对象模型？

1.DOM(Document Object Model——文档对象模型)是用来呈现以及与任意 HTML 或 XML文档交互的API

2.白话文:DOM是浏览器提供的一套专门用来 操作网页内容 的功能

3.DOM作用；开发网页内容特效和实现用户交互

DOM树

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

描述网页内容关系的名词

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

DOM对象(重要)

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

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

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

document 对象：

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

例：

document.write()

网页所有内容都在document里面

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

根据CSS选择器来获取DOM元素 (重点)

选择匹配的第一个元素

语法: document.querySelector 获取的元素可以直接处理。

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

返回值:CSS选择器匹配的NodeList 对象集合

例如:

得到的是一个伪数组:
有长度有索引号的数组
但是没有 pop() push() 等数组方法

想要得到里面的每一个对象，则需要遍历(for)的方式获得。

操作元素内容  

对象.innerText 属性:将文本内容添加/更新到任意标签位置，显示纯文本，不解析标签

对象.innerHTML 属性 :将文本内容添加/更新到任意标签位置，会解析标签，多标签建议使用模板字符

元素.innerText 属性，元素.innerHTML 属性 他们的区别是 :

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

元素.innerHTML 属性  能识别文本 能解析标签（常用）

操作元素属性  

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

语法:

操作元素样式属性

1.通过 style 属性操作CSS

语法:

设置/修改元素样式属性通过_style_属性引出来

如果需要修改一个div盒子的样式，比如 padding-left, 如何写?

element.style.paddingLeft = ‘300px’

小驼峰命名法

因为我们是样式属性，一定别忘记，大部分数字后面都需要加单位

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

使用 className 可以同时修改多个样式
使用 className 注意事项 直接使用 className 赋值会覆盖以前的类名

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

语法:

注意:

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

3.通过 classList 操作类控制CSS  (重点)

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

语法:

使用 className 和classList的区别：修改大量样式的更方便，修改不多样式的时候方便，classList 是追加和删除不影响以前类名。

操作 表单元素 属性

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

正常的有属性有取值的 跟其他的标签属性没有任何区别
获取: DOM对象.属性名
设置: DOM对象.属性名 = 新值

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

比如:disabled、checked、selected

自定义属性

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

自定义属性:
在html5中推出来了专门的data-自定义属性

在标签上一律以data-开头
在DOM对象上一律以dataset对象方式获取 

定时器-间歇函数

定时器函数介绍：网页中经常会需要一种功能:每隔一段时间需要自动执行一段代码，不需要我们手动去触发，例如:网页中的倒计时，要实现这种需求，需要定时器函数，定时器函数有两种

定时器函数基本使用：定时器函数可以开启和关闭定时器

1. 开启定时器 ；作用:每隔一段时间调用这个函数；间隔时间单位是毫秒

语法：

2. 关闭定时器  一般不会刚创建就停止 而是满足一定条件在停止

语法：

 例子：

 注意⚠️

1；函数名不需要加口号

2；定时返回的是一个id数字

定时器函数作用 :可以根据时间自动重复执行某些代码

定时器函数开启 setInterval

定时器函数关闭 clearInterval

语法：