思维导图在第一章，有需要的小伙伴可以去看下。有任何疑问也可以随时练习我。
WebAPI概念介绍
- 浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)
JavaScript组成三个部分
- ECMAScript - JavaScript的语法核心
- DOM - 文档对象模型（一套操作页面元素的API）
- BOM - 浏览器对象模型（通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等）
DOM
查
查询元素
-
获取单个元素 document.querySelector('选择器')- 如果选择器存在，则获取DOM对象
- 如果选择器不存在，则获取
null
-
获取多个元素 document.querySelectorAll('选择器')- 如果选择器存在，则获取 伪数组
- 如果选择器不存在，则获取 空数组
-
区别
document.querySelector 获取dom对象，可以字节修改dom树
document.querySelectorAll 获取伪数组，不可以直接修改dom树
伪数组有三要数（下标，元素，长度，但是没有数组方法）
查询属性
任何属性操作前，一定要先获取元素
-
内容属性
元素.innerText : (获取文本）
元素.innerHTML :（获取文本和标签）
区别：
a. innerText 无法解析字符串中的标签
b. innerHTML 可以解析字符串的标签
-
HTML属性 ：
a.href
img.src
注意：要想修改元素属性，一定要先获取元素 -
css属性
(1)修改单个样式：
元素.style.样式名 = 样式值(2)修改多个样式：
元素.className='类名'会覆盖原来的类名(3)修改多个样式：
元素.classList.add('类名')不会覆盖原来的类名 （类权重）细节 css中带-的属性（font- magin-）都需要转成小驼峰命名（1）. 去掉-
（2）. -后面的首字母大写
查询类名
-
获取类名：
元素.classNamea. 因为class是js中的关键字
类名（类权重）
-
新增类名 元素.classList.add('类名'）不会覆盖原来的类名 -
移除类名 元素.classList.remove('类名'） -
切换类名 元素.classList.toggle('类名'） -
判断类名 元素.classList.contains('类名'）
表单元素
-
表单元素里面的内容都是由value决定的
- disabled：是否禁用
- cheked：是否选中（radio、checkbox）
- selected：是否选中（option）
-
获取数组：一定要取下标先取出dom对象，才可以使用dom语法
let inputList = document.querySelector('input') console.log('inputList') //数组 -
表单内容： 表单元素.value
console.log(inputList[0].innerText) //'' 表单元素不能用innerText 这是错误的 console.log(inputList[0].value) //'显示表单里这个标签的文字' -
表单状态：
inputList[1].checked = true //选中表单标签里的元素 inputList[1].checked = false //不选中表单标签里的元素
事件
事件三要素：
- 事件源：获取元素
- 事件类型：点击、移动等
- 事件处理：
注册事件
- 给元素添加交互功能
事件原理及注意点
(1)事件处理函数在注册的时候不会执行. (函数在声明的时候不会执行)
(2)事件处理函数只有两种情况可以执行
第一种： 用户主动触发交互， 浏览器会捕捉交互，底层会自动帮我们调用对象的方法
第二种： 手动调用对象事件处理函数
常用事件
鼠标单击：onclick
鼠标双击：ondblclick
鼠标移入：onmouseenter
鼠标移出：onmouseleave
键盘输入：oninput
