JavaScript基础——DOM

1、Web API

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

分类：

• DOM（文档对象模型）
• BOM（浏览器对象模型）

2、DOM

2.1 DOM 简介

DOM（Document Object Model——文档对象模型）是用来呈现以及任意HTML或XML文档交互的API

DOM是浏览器提供的一套专门用来操作网页内容的功能

作用：开发网页内容特效和实现用户的交互

2.2 DOM树

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

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

2.3 DOM对象

DOM对象是浏览器根据HTML标签生成的JS对象，所有的标签属性都可以在这个对象中找到，修改这个对象的属性会自动映射到标签本身

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

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

3、获取DOM元素

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

3.1.1 选择匹配的第一个元素

语法：document.querySelector('css选择器')

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

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

3.1.2 选择匹配多个元素

语法：document.querySelectorAll(‘css选择器’)

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

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

得到的NodeList对象集合是一个伪数组

1. 是一个有长度有索引号的数组
2. 没有pop() push()等数组方法
3. 需要for循环遍历获取里面的每一个对象，哪怕只有一个元素，也需要用For循环或者下标获取里面的对象

例如；document.querySelectorAll('ul li')

3.2 其他方法获取DOM元素

4、设置DOM元素的内容

DOM对象都是根据标签生成的，所以操作标签，本质上都是操作DOM对象，就是操作对象使用的点语法
如果想要修改标签里面的内容，则可以使用如下几种方式

4.1 document.write()方法

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

4.2 对象.innerText属性

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

4.3 对象.innerHTML属性

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

4.4 区别

document.write()方法，只能追加到body中

innerText属性中，不能解析其中的内容

innerHTML属性可以解析其写入的内容

5、修改DOM元素的内容

可以通过JS设置/修改标签的属性，比如通过src属性更换图片

语法：对象.属性 = 值

其他属包括 href title id class等都类似

6、设置、修改元素样式属性

6.1 通过style属性操作CSS

语法：对象.style.样式属性 = 值

注意：

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

7、定时器、间歇函数

网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发

例如：网页中的倒计时

要实现这种需求，需要使用定时器函数，定时器函数有两种，在这里先介绍一下间歇函数

7.1 开启定时器

setInterval(函数，间隔时间)

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

7.2 关闭定时器

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