web api讲解（很多人都觉得自己会了？）

1.作用与分类

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

分类：DOM（文档对象模型）,BOM(浏览器对象模型)

2.什么是DOM

DOM（document object model---文档对象操作类型）是用来呈现以及与任意HTML或XML文档交互API

白话文：DOM是浏览器提供一套专门用来操作网页功能的功能

DOM的作用

1.开发网页内容特效和实现用户交互功能

DOM树

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

描述网页内容关系的名词

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

DOM对象（重要） 

DOM对象：浏览器根据html标签生成的js对象

所有的标签属性都可以在这个对象上面找到

修改这个对象的属性自动映射到标签身上

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

document对象

是DOM里面提供的一个对象

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

例子：document.write()

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

目标：能查找/获取DOM对象

提问：我们想要操作某个标签首先要做什么？

肯定首先选中这个标签，跟css选择器类似，选中标签才能操作

查找元素DOM元素就是悬着页面中标签元素

学习路径：
1.根据css选择器来获取DOM元素（重点）

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

1.1 选择匹配的第一个元素

语法

document.queryselector('css选择器')

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

返回值：

css选择器匹配的第一个元素，一个htmlElement对象

如果没有匹配到返回null

1.2选择器匹配多个元素

语法：

document.queryselectorAll('css选择器')

1.提问：

1.获取一个元素DOM元素我们使用谁？

queryselector()

2.获取多个元素我们用谁？
queryselectorAll()

3.queryselector()方法可以直接操作修改吗？

答：可以

4.queryselectorAll方法能直接修改吗？如果不可以怎么做到修改

答：不可以，只能通过遍历的方式一次给里面的元素做修改

document.queryselectorAll('css选择器')

得到的是一个伪数组

有长度有索引号的数组

但是没有pop（），push()等数组的方法

想要得到里面的每一个对象需要遍历（for）的方式获得

注意事项：哪怕只有一个元素，通过queryselectorAll（）获取过来的也是一个伪数组，里面只有一个元素

其他获取Dom元素的方法（了解）

 2.设置/修改 DOM元素内容

document.write()方法

对象 .innerText()属性

对象 .innerHTML属性

 设置/修改DOM元素属性

设置/修改元素常用属性

设置/修改元素样式属性

设置/修改表单元素属性

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

还可以通过js设置/修改标签元素属性，比如通过src更换图片

最常见的属性比如：href.title.src等

语法

对象.属性值=值

//1.获取元素
let pic = document.querySelector('css选择器')
//2.操作元素
pic.src = '文件路径';
pic.title = '这是一个图片';

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

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

比如通过 轮播图小圆点自动更换颜色样式

点击按钮可以滚动图片，这是移动图片的位置left等等

学习路径：

1.通过style属性操作css

2.通过类名（classname）操作css

3.通过classLIst操作类控制css