插件：Error Lens插件可以提示报错
DOM对象
引号里面加css选择器，肯定首先选中这个标签，跟 CSS选择器类似，选中标签才能操作
querySelect：只能选择一个元素， 可以直接操作
querySelectAll：可以选择多个元素，得到的是伪数组，需要遍历得到
每一个元素，返回的是NodeList伪数组(数组需要遍历而不能直接获取元素，每一个元素是Obj对象）
括号里面：必须是字符串，也就是必须加引号，里面写css选择器
只能将文本内容追加到
将文本内容添加/更新到任意标签位置
文本中包含的标签不会被解析
obj.innerText = ‘有点意思’，对象.属性 = 值
将文本内容添加/更新到任意标签位置
文本中包含的标签会被解析
通过 JS 设置/修改标签元素属性
常用属性——通过src更换图片属性最常见的属性比如： href、title、src 等
其实就是对象.属性 = 值
样式属性——通过 style 属性操作CSS修改样式通过
style属性引出
如果属性有-连接符，需要转换为小驼峰命名法
赋值的时候，需要的时候不要忘记加css单位
样式属性——操作类名(className) 操作CSS由于class是关键字, 所以使用className去代替,可以同时修改多个样式
className是使用新值换旧值（会覆盖）, 如果需要添加一个类,需要保留之前的类名
样式属性——通过 classList 操作类控制CSS1.为了解决className 容易覆盖以前的类名（并且还要去查看已有的类名），我们可以通过classList方式追加、删除、切换类名
2.注意这里的就没有.类名了，而是直接类名
3.toggle如果有就删掉，没有就加上
表单元素属性表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框,正常的有属性有取值的跟其他的标签属性没有任何区别。
常见表单属性:value、disabled、checked、selected
函数名字不需要加括号（加了括号就是立即调用了）
定时器返回的是一个id数字（定时器的数字）let timerId = setInterval(repeat, 1000)，该数字用于清除定时器
一般不会刚创建就停止，而是满足一定条件再停止
事件是在编程时系统内发生的动作或者发生的事情,比如用户在网页上单击一个按钮。
事件是在编程时系统内发生的动作或者发生的事情
比如点击按钮 click
就是让程序检测是否有事件产生，一旦有事件触发，就立即调
用一个函数做出响应，也称为 注册事件
事件源： 那个dom元素被事件触发了，要获取dom元素
事件： 用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等
事件调用的函数： 要做什么事
两种注册事件的区别：
click 鼠标点击
dblclick 双击鼠标
mouseenter 鼠标经过(没有冒泡效果，推荐）
mouseleave 鼠标离开(没有冒泡效果，推荐）
mouseover 鼠标经过（有冒泡效果）
mouseout 鼠标离开（有冒泡效果）
mousemove 鼠标移动
focus 获得焦点
blur 失去焦点
keydown 键盘按下触发（包括按的什么键：回车Enter、删除Delete、空格Space等等,删除返回Backspace，属性.key区分）
keyup 键盘抬起触发
input 用户输入事件
- input[type=“text”]{}
选中属性值为text的input- input[type|=“text”]{}
选中以text-开始的input的type属性值,例如
高阶函数可以被简单理解为函数的高级应用，
JavaScript 中函数可以被当成【值】来对待，基于这个特性实现函数的高级应用。
【值】就是 JavaScript 中的数据，如数值、字符串、布尔、对象等。
函数表达式
普通函数的声明与调用无顺序限制，推荐做法先声明再调用，函数表达式必须要先声明再调用。
把函数也是【数据】 ，把函数（可能是匿名函数）赋值给变量
回调函数
如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数；
当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数，
回调函数本质还是函数，只不过把它当成参数使用；
使用匿名函数做为回调函数比较常见。
环境对象指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境
作用：弄清楚this的指向，可以让我们代码更简洁
第一种方法：遍历所有的加点击事件，如果这个button被点击了，就遍历所有的去掉class名，然后只给当前点击的加
改进思想：遍历所有的点击事件，如果这个button被点击了，就从类名为pink的选择器列表中移除类为pink的（注意哪些有点，哪些没有）
DOM节点：DOM树里每一个内容都称之为节点
节点类型有以下3种：
元素节点：所有的标签 比如 body、 div、 html 是根节点
属性节点： 所有的属性：比如 href、
文本节点： 所有的文本：其他
要想在界面看到，还得插入到某个父元素中、插入到父元素的最后一个子元素
cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值
若为true，则代表克隆时会包含后代节点一起克隆
若为false，则代表克隆时不包含后代节点
默认为false
在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除(jQuery中可以直接删除remove()，$(this).remove())
如不存在父子关系则删除不成功，删除节点和隐藏节点（display:none） 有区别的： 隐藏节点还是存在的，但是删除，则从html中删除节点
要先实例化创建一个时间对象并获取时间
| 方法 | 作用 | 说明 |
|---|---|---|
| getFullYear() | 获得年份 | 获取四位年份 |
| getMonth() | 获得月份 | 取值为 0 ~ 11 （这个要加一） |
| getDate() | 获取月份中的每一天 | 不同月份取值也不相同 |
| getDay() | 获取星期 | 取值为 0 ~ 6 |
| getHours() | 获取小时 | 取值为 0 ~ 23 |
| getMinutes() | 获取分钟 | 取值为 0 ~ 59 |
| getSeconds() | 获取秒 | 取值为 0 ~ 59 |
是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式，重点记住 +new Date() 因为可以返回当前时间戳或者指定的时间戳
先实例化再使用 getTime() 方法
简写 +new Date()
可以返回指定时间的时间戳
使用 Date().now()
无需实例化，但是只能得到当前的时间戳， 而前面两种可以返回指定时间的时间戳
通过时间戳得到是毫秒，需要转换为秒在计算
转换公式：
d = parseInt(总秒数/ 60/60 /24); // 计算天数
h = parseInt(总秒数/ 60/60 %24) // 计算小时
m = parseInt(总秒数 /60 %60 ); // 计算分数
s = parseInt(总秒数%60); // 计算当前秒数
注意，可能会停顿一下再开始，应该封装成函数，先调用一下函数再进行定时器的高阶回调
补充技巧1：利用时间对象将时间动态化 new Date().toLocaleString()
补充技巧2：先删再加
回流(重排) ：当 Render Tree 中部分或者全部元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档的过程称为 回流。
重绘：由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时(比如：color、background-color、outline等), 称为重绘。
重绘不一定引起回流，而回流一定会引起重绘
type：获取当前的事件类型
clientX/clientY：获取光标相对于浏览器可见窗口左上角的位置（仅限可视窗口的可点的的坐标）
pageX/pageY：获取光标相对于浏览器可见窗口左上角的位置（整个页面的坐标包括滚动、调试界面）
offsetX/offsetY：获取光标相对于当前DOM元素左上角的位置
key：用户按下的键盘键的值，现在不提倡使用keyCode
回忆上面：keydown 键盘按下触发（包括按的什么键：回车Enter、删除Delete、空格Space等等,删除返回Backspace，属性e.key区分）
事件流指的是事件完整执行过程中的流动路径。假设页面里有个div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段，简单来说：捕获阶段是从父到子，冒泡阶段是从子到父。
事件冒泡:当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发,即会依次向上调用所有父级元素的同名事件,事件冒泡是默认存在的。
事件捕获：从DOM的根元素开始去执行对应的事件 (从外到里)，事件捕获需要写对应代码才能看到效果。
addEventListener第三个参数传入true代表是捕获阶段触发（很少使用）
若传入false代表冒泡阶段触发，默认就是false
若是用 L0 事件监听，则只有冒泡阶段，没有捕获
因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素,若想把事件就限制在当前元素内，就需要阻止事件流动。
阻止事件流动需要拿到事件对象（阻止谁传播），此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效。
优点：给父级元素加事件（可以提高性能）
原理：事件委托其实是利用事件冒泡的特点， 给父元素添加事件，子元素可以触发
实现：事件对象.target 可以获得真正触发事件的元素（再.tagName是大写的标签）渲染时候给a标签增加id属性，删除时splice可以好删。
数据委托案例——给表格删除一行的数据
transition: all 0.6s; /* css过渡效果 * /
this.parentNode.style.visibility = ‘hidden’ /* 保留位置的隐藏*/
this.parentNode.style.display = ‘none’ /* 不保留位置的隐藏 /
str.trim() / * 去掉字符串前后的空格，中间的保留/
