目录

一、Web API 基本认知

1. 作用和分类

2. 什么是DOM

3. DOM树

4. DOM对象（重要）

二、获取DOM对象

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

1.1 选择匹配的第一个元素

1.2 选择匹配的多个元素

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

三、设置/修改DOM元素内容

1. document.write()

2. 元素innerText 属性

3. 元素.innerHTML 属性

四、设置/修改DOM元素属性

1. 设置/修改元素常用属性

2. 设置/修改元素样式属性

2.1 通过 style 属性操作CSS

2.2 操作类名(className) 操作CSS

2.3通过 classList 操作类控制CSS

3. 设置/修改 表单元素 属性

五、定时器-间歇函数

1. 开启定时器

2. 关闭定时器

一、Web API 基本认知

1. 作用和分类

作用: 就是使用 JS 去操作 html 和浏览器 分类： DOM (文档对象模型)、 BOM （浏览器对象模型）

2. 什么是DOM

DOM（Document Object Model—— 文档对象模型 ）是用来呈现以及与任意 HTML 或 XML文档交互的API 白话文：DOM是浏览器提供的一套专门用来操作网页内容的功能 DOM作用 开发网页内容特效和实现用户交互

3. DOM树

DOM树是什么 将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树 描述网页内容关系的名词 作用： 文档树直观的体现了标签与标签之间的关系

4. DOM对象（重要）

DOM对象：浏览器根据html标签生成的 JS对象 所有的标签属性都可以在这个对象上面找到 修改这个对象的属性会自动映射到标签身上 DOM的核心思想 把网页内容当做 对象 来处理 document 对象 是 DOM 里提供的一个对象所以它提供的属性和方法都是用来访问和操作网页内容的例：document.write() 网页所有内容都在document里面

二、获取DOM对象

目标：能查找/获取DOM对象查找元素DOM元素就是选择页面中标签元素

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

1.1 选择匹配的第一个元素

语法：

document.querySelector('css选择器‘)

参数:包含一个或多个有效的CSS选择器字符串返回值：CSS选择器匹配的 第一个元素 ,一个 HTMLElement对象。 如果没有匹配到，则返回null。 多参看文档：/zh-CN/docs/Web/API/Document/querySelector

1.2 选择匹配的多个元素

语法：

document.querySelectorAll('css选择器')

参数:包含一个或多个有效的CSS选择器字符串返回值：CSS选择器匹配的 NodeList 对象集合例如

document.querySelectorAll('ul li')

得到的是一个伪数组有长度有索引号的数组 但是没有 pop() push() 等数组方法 想要得到里面的每一个对象，则需要遍历（for）的方式获得。 哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个伪数组，里面只有一个元素而已

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

//根据id获取一个元素document.getElementById('nav')//根据标签获取一类元素 获取页面所有divdocument.getElementsByTagName('div')//根据类名获取元素 获取页面 所有类名为w的document.getElementsByClassName('w')

三、设置/修改DOM元素内容

目标：能够修改元素的文本更换内容 DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象。 就是操作对象使用的点语法。 如果想要修改标签元素的里面的内容，则可以使用如下几种方式： 学习路径： 1. document.write() 方法 2. 对象.innerText 属性 3. 对象.innerHTML 属性

1. document.write()

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

//永远都只是追加操作，且只能位置</body>前document.write('Hello World!');document.write('<h3>你好，世界！</h3>')

2. 元素innerText 属性

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

//innerText 将文本内容添加 / 更新到任意标签位置let info = document.getElementById('info')// info.innerText = '嗨~ 小仙女！'info.innerText = '<h4>嗨~ 小仙女！</h4>'

3. 元素.innerHTML 属性

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

//2. innerHTML属性box.innerHTML = '<h3>前端程序员<br>的头发都很多</h3>'

如果还在纠结到底用谁，你可以选择innerHTML

四、设置/修改DOM元素属性

1. 设置/修改元素常用属性

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

对象.属性 = 值

//1. 获取元素let pic = document.querySelector('img')//2. 操作元素pic.src = './images/1.jpg'pic.title = '这是一个图片'

2. 设置/修改元素样式属性

还可以通过 JS 设置/修改标签元素的样式属性。 比如通过 轮播图小圆点自动更换颜色样式 点击按钮可以滚动图片，这是移动的图片的位置 left 等等

2.1 通过 style 属性操作CSS

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

let box = document.querySelector('.box')//2. 修改背景颜色box.style.backgroundColor = 'red'box.style.width = '300px'box.style.marginTop = '50px'

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

2.2 操作类名(className) 操作CSS

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

//active是一个css类名元素.className = 'active'

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

2.3通过 classList 操作类控制CSS

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

//追加一个类元素.classList.add('类名')//删除一个类元素.classList.remove('类名')//切换一个类元素.classList.toggle('类名')

3. 设置/修改 表单元素 属性

表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框 正常的有属性有取值的 跟其他的标签属性没有任何区别 获取: DOM对象.属性名 设置: DOM对象.属性名 = 新值

表单.value = '用户名' 表单.type = 'password'

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

五、定时器-间歇函数

目标：能够说出定时器函数在开发中的使用场景网页中经常会需要一种功能：每隔一段时间需要 自动 执行一段代码，不需要我们手动去触发 例如：网页中的倒计时 要实现这种需求，需要定时器函数定时器函数可以开启和关闭定时器

1. 开启定时器

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

senInterval(函数,间隔时间)

例子：

function repeat(){console.log('Hello World!')}setInterval(repeat,1000)

注意： 1. 函数名字不需要加括号2. 定时器返回的是一个id数字

2. 关闭定时器

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

一般不会刚创建就停止，而是满足一定条件再停止 注意： 1. 函数名字不需要加括号2. 定时器返回的是一个id数字