Web API基本认知

作用和分类

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

什么是DOM

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

DOM树

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

DOM对象（重要）

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

根据CSS选择器来获取DOM元素（重点）

1.选择匹配的第一个元素

语法

复制代码

document.querySelector('css选择器');

参数

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

返回值：

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

2.选择匹配的多个元素

语法

复制代码

document.querySelectorAll('CSS选择器');

参数：

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

返回值：

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

例如

复制代码

document.querySelectorAll('ul li');

操作元素内容

元素innerText属性

将文本内容添加/更新到任意标签位置
显示纯文本，不解析标签

元素innerHTML属性

将文本内容添加/更新到任意标签位置
会解析标签，多标签建议使用模板字符

操作元素常用属性

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

语法

复制代码

对象.属性 = 值

操作元素样式属性

1.通过 style 属性操作CSS

还可以通过JS设置/修改标签元素的样式属性
1. 比如通过轮播图小圆点自动更换颜色样式
2. 点击按钮可以滚动图片，这是移动的图片的位置left等等
学习路径：
1. 通过style属性操作CSS
2. 操作类名（className）操作CSS
3. 通过classList操作类控制CSS

通过style属性操作CSS

语法：

复制代码

对象.style.样式属性 = 值

2.操作类名（calssName）操作CSS

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

//acive是一个CSS类名

元素.className = 'active';

注意：

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

通过classList操作控制CSS

为了解决className容易覆盖一起的类名，我们开源通过classList方式追加和删除类名

语法

复制代码

 ? ?const box = document.querySelector('.box');
 ? ?// //追加一个类 不会把原来的类名覆盖
 ? ?// box.classList.add('active');
?
 ? ?// //删除一个类
 ? ?// box.classList.remove('box');
?
 ? ?//切换一个类 ? 
 ? ?box.classList.toggle('active');

操作表单元素属性

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

表单.type = 'password';

自定义属性

**标准属性：**标签天生自带的属性比如class id title等，可以直接使用点语法操作比如：disabled、checked、selected

自定义属性：

在html5中推出来了专门的data-自定义属性
在标签上一律以data-开头
在DOM对象上一律以dataset对象方式获取

定时器-间歇函数

定时器函数介绍

目标：能够说出定时器函数在开发中的使用场景

网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发
例如：网页中的倒计时
要实现这种需求，需要定时器函数
定时器函数有两种

定时器-间歇函数

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

定时器函数可以开启和关闭定时器

1.开启定时器

复制代码

setIntreval(函数,间隔时间);

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

举例说明

复制代码

function repeat(){
    console.log('前端程序员，就是头发多咋滴~~');
}

//	每隔一秒调用repeat函数
setIntreval(repeat,1000);

注意

函数名字不需要加括号
定时器返回的是一个id数字

2.关闭定时器

复制代码

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

一般不会刚创建就停止，而是满足一定条件再停止

复制代码

    function fun() {
      console.log("123");
    }
    let num = setInterval(fun, 1000);
    console.log(num);
    clearInterval(num);

Web API基本认知

作用和分类

DOM树

DOM对象（重要）

根据CSS选择器来获取DOM元素（重点）

1.选择匹配的第一个元素

2.选择匹配的多个元素

操作元素内容

元素innerText属性

元素innerHTML属性

操作元素常用属性

操作元素样式属性

1.通过 style 属性操作CSS

2.操作类名（calssName）操作CSS

通过classList操作控制CSS

操作表单元素 属性

自定义属性

定时器-间歇函数

定时器函数介绍

定时器-间歇函数

1.开启定时器

举例说明

注意

2.关闭定时器

操作表单元素属性