Web API 基本认知
1. 作用和分类
- 作用:就是使用JS去操作html和浏览器\
- 分类:DOM(文档对象模型)、BOM(浏览器对象模型)
2. 什么是DOM
- DOM(Document Object Model——文档对象模型)是用来呈现以及与任意 HTML 或 XML文档交互的API
- 白话文:DOM是浏览器提供的一套专门用来 操作网页内容 的功能
- DOM作用：开发网页内容特效和实现用户交互
3. DOM树
- DOM树是什么？
①将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM树
②描述网页内容关系的名词
③作用:文档树直观的体现了标签与标签之间的关系
PowerPoint 演示文稿
4. DOM对象(重要)
-
DOM对象:浏览器根据html标签生成的 JS对象 所有的标签属性都可以在这个对象上面找到
修改这个对象的属性会自动映射到标签身上 -
DOM的核心思想:把网页内容当做对象来处理
-
document 对象 是 DOM 里提供的一个对象
所以它提供的属性和方法都是用来访问和操作网页内容的 例:document.write()\ -
网页所有内容都在document里面
获取DOM对象
1. 根据CSS选择器来获取DOM元素 (重点)
1.1 选择匹配的第一个元素
- 语法:
- 参数: 包含一个或多个有效的CSS选择器 字符串
- 返回值: CSS选择器匹配的第一个元素,一个 HTMLElement对象。 如果没有匹配到，则返回null。
1.2 选择匹配的多个元素
- 语法:
- 参数: 包含一个或多个有效的CSS选择器 字符串
- 返回值:
CSS选择器匹配的NodeList对象集合
得到的是一个伪数组:
①有长度有索引号的数组，想要得到里面的每一个对象，则需要遍历(for)的方式获得。
②但是没有 pop() push() 等数组方法 ③哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个伪数组，里面只有一个元素而已
1.3其他获取DOM元素方法(了解)
设置/修改DOM元素内容
1. document.write() 方法(机会不用)
- document.write()
- 只能将文本内容追加到前面的位置
- 文本中包含的标签会被解析
2. 对象.innerText 属性
- 将文本内容添加/更新到任意标签位置
- 文本中包含的标签不会被解析
3. 对象.innerHTML 属性
- 将文本内容添加/更新到任意标签位置
- 文本中包含的标签会被解析
设置/修改DOM元素属性
1. 设置/修改元素常用属性（html标签的类）
- 还可以通过 JS 设置/修改标签元素属性，比如href、title、src 等
- 语法:
2.1通过 style 属性操作CSS
语法:
2.2操作类名(className) 操作CSS
- 如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。
- 语法:
- 注意: ①由于class是关键字, 所以使用className去代替 ②className是使用新值换旧值
2.3 通过 classList 操作类控制CSS
- 为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
- 语法:
定时器-间歇函数
目标:能够使用定时器函数重复执行代码
1. 开启定时器
- 作用:每隔一段时间调用这个函数
- 间隔时间单位是毫秒
- 代码
