WebAPI_DAY1_DOM

WebAPI#

作用：使用JS去操作html和浏览器

分类：DOM（文档对象类型）、BOM（浏览器对象类型）

DOM（Document Object Model）#

• 浏览器提供的一套专门用来操作网页内容的功能
• 开发网页特效、实现用户交互

DOM树#

将html文档以树状结构表现出来，称为文档树或DOM树

作用：只管体现标签与标签之间的关系

DOM对象#

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

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

DOM核心思想#

把网页内容当作对象来处理

Document对象#

• DOM里最大的对象
• 网页的所有内容都在document里

获取DOM对象#

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

1、选择匹配的第一个元素#

语法：

document.querySelector('css选择器')

参数：

• 包含一个或多个有效的css选择器字符串

返回值：

• css选择器匹配的第一个元素，一个HTMLElement对象
• 如果没有匹配返回null

2、选择匹配的多个元素#

语法：

document.querySelector('ul li')

返回值：

css选择器匹配的NodeList对象集合

如何修改

通过遍历的方式一次给里面的元素做修改（哪怕只有一个元素）

---

设置/修改DOM元素内容#

1、document.write()#

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

2、元素innerText属性#

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

3、元素innerHTML属性#

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

---

设置/修改DOM元素属性#

1、设置/修改常用属性#

对象.属性 = 值

2、设置/修改样式属性#

2.1、通过style

对象.style.样式属性 = 值

2.2、操作类名(className)操作CSS

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

元素.className ='active'

注意:

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

2.3、通过classList 操作类控制CSS

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

// 追加一个类
元素.classList.add('类名')
//删除一个类
元素.classList.remove('类名')
//切换一个类（如果有就删去，如果没有就添加）
元素.classList.toggle('类名')

3、定时器：间歇函数#

场景：倒计时

目标：使用定时器函数重复执行代码

3.1、开启定时器

setInterval(函数,间隔时间)

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

3.2、关闭定时器

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

3.3、打开定时器

变量名 = setInterval(函数,间隔时间)
//注意，后面重启定时器的时候，前面是没有let的，不然会打开两个定时器