No.4.1

变量声明

变量声明有三个 var  let  和  const

我们用const（建议const优先，尽量使用const，原因是：const语义化更好，实际开发中，比如react框架，基本const）

有了变量先给const，如果发现它后面是要被修改的，再改为let

建议数组和对象使用const来声明

Web API 基本认知

作用和分类：

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

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

什么是DOM

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

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

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

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

描述网页内容关系的名词

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

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

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

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

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

document对象：是DOM对象里提供的一个对象

所以它提供的属性和方法都是用来访问和操作网页内容的（例：document.write()）

网页所有内容都在document里面

获取DOM元素

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

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

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

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

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

2.选择匹配的多个元素

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

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

返回值：CSS选择器匹配的NodeList对象集合，一个HTMLElement对象。如果没有匹配到，则返回null

得到的是一个伪数组：有长度有索引号的数组、但是没有pop() push() 等数组方法

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

注意：哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个伪数组，里面只有一个元素而已

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

// 根据id获取一个元素

document.getElementById('nav')

// 根据 标签获取一类元素 获取页面  所有div　　伪数组

document.getElementsByTagName('div')

// 根据类名获取元素  获取页面 所有类名为 w 的　　伪数组

document.getElementsByClassName('w')

操作元素内容

对象.innerText属性　不解析标签

对象.innerHTML属性　解析标签

操作元素属性

操作元素常用属性

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

语法：对象.属性 = 值

操作元素样式属性

通过style属性操作CSS【语法：对象.style.样式属性 = 值】

多组单词的采取 小驼峰命名法，赋值的时候，需要的时候不要忘记加css单位

操作类名（className）操作CSS【语法：元素.className = 'active'】

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

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

通过classList操作类控制CSS【语法：// 追加 元素.classList.add('类名')　// 删除一个类　元素.classList.remove('类名')　// 切换  元素.classList.toggle('类名')】

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

操作表单元素属性【获取：DOM对象.属性名　设置：DOM对象.属性名 = 新值】

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

自定义属性（H5新增）

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

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

定时器-间歇函数

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

1.开启定时器【语法：setInterval(函数， 间隔时间)】

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

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

2.关闭定时器

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

clearInterval(变量名)

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