零、文章目录

文章地址

• 个人博客-CSDN地址：https://blog.csdn.net/liyou123456789
• 个人博客-GiteePages：https://bluecusliyou.gitee.io/techlearn

代码仓库地址

• Gitee：https://gitee.com/bluecusliyou/TechLearn
• Github：https://github.com/bluecusliyou/TechLearn

Web APIs一、DOM获取元素

1、基本认知

（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对象

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

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

• document 对象：

  • 是 DOM 里提供的一个对象

  • 它提供的属性和方法都是用来访问和操作网页内容的

    • 例：document.write()

  • 网页所有内容都在document里面

案例如下：

123

2、获取DOM对象

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

• 选择匹配的第一个元素：document.querySelector('css选择器')

  • **参数：**包含一个或多个有效的CSS选择器 字符串
  • **返回值：**CSS选择器匹配的第一个HTMLElement对象。如果没有匹配到，则返回null。

• 选择匹配的多个元素：document.querySelectorAll('css选择器')

  • **参数：**包含一个或多个有效的CSS选择器 字符串
  • **返回值：**CSS选择器匹配的NodeList 对象集合
  • 伪数组：得到的是一个伪数组，有长度有索引，但是没有 pop() push() 等数组方法

案例如下：

123
abc
导航栏
测试1
测试2
测试3

（2）其他获取DOM元素方法

3、操作元素内容

（1）元素.innerText 属性

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

（2）元素.innerHTML 属性

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

（3）案例

我是文字的内容

随机抽奖案例：

年会抽奖
一等奖：???
二等奖：???
三等奖：???

4、操作元素属性

（1）操作元素常用属性

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

案例如下：

随机显示图片：

（2）操作元素样式属性

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

  • 比如通过 轮播图小圆点自动更换颜色样式
  • 点击按钮可以滚动图片，这是移动的图片的位置 left 等等

• 通过 style 属性操作CSS：元素.style.样式属性=值

通过style属性修改样式：

随机更换背景图片：

• 操作类名(className) 操作CSS：元素.className=类名
  • 如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。
  • 注意：由于class是关键字, 所以使用className去代替，className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名

通过类名修改样式：

123

• 通过 classList 操作类控制CSS：
  • 为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
  • 追加一个类：元素.classList.add('类名')
  • 移除一个类：元素.classList.remove('类名')
  • 切换一个类：元素.classList.toggle('类名')

通过classList修改样式：

文字

随机轮播图：

对人类来说会不会太超前了？
<>

（3）操作表单元素属性

• 表单很多场景也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框
• 正常的有属性有取值的跟其他的标签属性没有任何区别
  • 获取: DOM对象.属性名
  • 设置: DOM对象.属性名 = 新值
• 获取设置表单元素的值不是用的innertHTML，用的是value
• 有些表单属性，添加就有效果，移除就没有效果，一律使用布尔值表示如果为true 代表添加了该属性，如果是false代表移除了该属性，比如： disabled、checked、selected

案例如下：

（4）自定义属性

• 标准属性: 标签天生自带的属性，比如class id title等，可以直接使用点语法操作比如： disabled、checked、selected
• 自定义属性：
  • 在html5中推出来了专门的data-自定义属性
  • 在标签上一律以data-开头
  • 在DOM对象上一律以dataset对象方式获取

案例如下：

1
2
3
4
5

5、定时器函数

（1）开启定时器

• 语法：setInterval(函数，间隔时间)
• 作用：每隔一段时间调用这个函数
• 注意：
  • 函数名字不需要加括号
  • 间隔时间单位是毫秒
  • 定时器返回的是一个id数字

（2）关闭定时器

（3）案例

用户注册倒计时：

用户注册协议欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看
我已经阅读用户协议(5)

下班倒计时：

今天是9999年9月9日
下班倒计时
00:25:20
17:30:00下班

6、综合案例

对人类来说会不会太超前了？
<>