作用和分类

作用：使用JavaScript去操作html和浏览器
分类：DOM（文档对象模型），BOM（浏览器对象模型）

什么是DOM

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

DOM树

将HTML文档以束状结构直观的表现出来，为文档树
描述网页内容关系的名词
作用：文档树直观的体现了标签和标签之间的关系

DOM对象

浏览器根据html标签生成的js对象
所有的标签属性都可以在这个对象上找到
修改这个对象的属性会自动映射到标签身上
把网页内容当做对象来处理

document对象

是DOM里提供的一个对象
它提供的属性和方法都是用来访问和操作网页内容的
网页所有内容都在document里

获取DOM对象

选中标签，查找元素，DOM元素就是利用JavaScript选择页面中标签元素
根据CSS选择器来获取DOM元素：
	选择匹配的第一个元素
	语法：document.querySelector('css选择器')
	选择匹配的多个元素
	语法：document.querySelectorAll('css选择器')
	参数：包含一个或多个有效的css选择器字符串
	返回值：CSS选择器匹配的NodeList对象集合
	得到一个伪数组，有长度有索引号的数组，但是没有pop()和push()等数组方法，想到得到里面的每一个对象，需要遍历for的方式来获得

操作元素内容

对象.innerHTML 属性 识别标签
对象.innerText 属性 不识别标签

修改元素属性

操作元素 常用 属性
	通过JavaScript设置/修改标签元素属性，比如通过src更换图片
	常见属性还有href、title、src等
	语法：
	对象.属性 = 值
操作元素 样式 属性
	通过style属性操作css
		语法：
		对象.style.样式属性 = 值
		样式属性如果是多组单词取用小驼峰命名法
		命名时css一定要加单位
	通过类名(className)操作css
		如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式
		语法：
		元素.className = 值
		由于class是关键字，所以使用className去代替
		className是使用新值换旧值，如果需要添加一个类，需要保留之前的类名
	通过classList操作类控制css
		为了解锁className容易覆盖以前的类名，可以通过classList方式追加，删除和切换类名
		追加类add()类名不加点，并且是字符串
		删除类remove()类名不加点，并且是字符串
		切换类toggle()类名不加点，有则删掉，没有则加上
操作 表单元素 属性
	表单很多情况，需要修改属性，比如点击眼睛可以看到密码，本质是把表单类型转换成文本框
	正常的有属性有取值的可以跟其他的标签属性没有任何区别
	获取：DOM对象.属性名
	设置：DOM对象.属性名 = 值
	innerHTML得不到表单内容，对象.value能得到表单内容 
	disabled禁用、checked勾上、selected下拉菜单
自定义属性
	标准属性：标签天生自带的属性，比如class id title等，可以直接使用电语法操作：disabled、checked、selected
	自定义属性：
		在HTML5中推出来了专门的 data- 自定义属性
		在标签上一律以 data- 开头
		在DOM对象上一律以 dataset 对象方式获取
	定时器：间歇函数
		目标：能够使用定时器函数重复执行代码
		定时器函数可以开启和关闭定时器
		开启定时器：
		语法：setInterval(函数名，间隔时间)函数名不要加小括号
			作用：每隔一段时间调用这个函数，间隔时间单位是毫秒(1秒=1000毫秒)
			注意：函数名字不需要加括号，定时器返回的是一个id数字
		关闭定时器：
		语法：
		let 变量名 = setInterval(函数，间隔时间)
		clearInterval(变量名)
		一般不会刚创建就停止，而是满足一定条件再停止

事件监听（绑定）

事件：在编程时系统内发生的动作或者发生的事情，比如用户在网页上单机一个按钮
事件监听：就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为绑定事件或者注册事件比如鼠标经过显示下拉菜单、比如点击可以播放轮播图等等
语法：元素对象.addEventListener('事件类型'，要执行的函数)
事件监听三要素：
事件源：那个dom元素被事件触发了。要获取dom元素
事件类型：用什么方式触发，比如鼠标单机click、鼠标经过mouseover
事件调用的函数：要做什么事
注意：事件类型一定要加引号。函数是点击之后再去执行，每次点击都会执行一次
事件监听版本：
	DOM L0
	事件源.on事件 = function(){}
	DOM L2
	事件源.addEventListener(事件，事件处理函数)
	区别：on方式会被覆盖，addEventListener方式可绑定多次，拥有事件更多特性，推荐使用
事件类型拓展：
	鼠标事件：鼠标触发：click鼠标点击，mouseenter鼠标经过，mouseleave鼠标离开
	焦点事件：表单获得光标：focus获得焦点，blur失去焦点
	键盘事件：键盘触发：Keydown键盘按下触发，Keyup键盘抬起触发
	文本事件：表单输入触发：input用户输入事件

JavaScript Study Note 系列文章