目录
插件：Error Lens插件可以提示报错
DOM和BOM
DOM
DOM对象
根据CSS选择器来获取DOM元素 (重点)
选择引号里面加css选择器
引号里面加css选择器，肯定首先选中这个标签，跟 CSS选择器类似，选中标签才能操作
获取页面标签querySelect和querySelectAll
querySelect：只能选择一个元素， 可以直接操作
querySelectAll：可以选择多个元素，得到的是伪数组，需要遍历得到
每一个元素，返回的是NodeList伪数组(数组需要遍历而不能直接获取元素，每一个元素是Obj对象）
括号里面：必须是字符串，也就是必须加引号，里面写css选择器
其他获取DOM元素方法（了解）
设置/修改DOM元素内容
document.write() 方法
只能将文本内容追加到</body> 前面的位置
文本中包含的标签会被解析
对象.innerText 属性
将文本内容添加/更新到任意标签位置
文本中包含的标签不会被解析
obj.innerText = ‘有点意思’，对象.属性 = 值
对象.innerHTML 属性
将文本内容添加/更新到任意标签位置
文本中包含的标签会被解析
例子——随机点名
设置/修改DOM元素属性3种
通过 JS 设置/修改标签元素属性
1.设置/修改元素常用属性——通过src更换图片属性
最常见的属性比如： href、title、src 等
其实就是对象.属性 = 值
2.1设置/修改元素样式属性——通过 style 属性操作CSS
修改样式通过
style属性引出
如果属性有-连接符，需要转换为小驼峰命名法
赋值的时候，需要的时候不要忘记加css单位
- 例子（刷新切换背景图片，图片路径数字更换）
2.2设置/修改元素样式属性——操作类名(className) 操作CSS
由于class是关键字, 所以使用className去代替,可以同时修改多个样式
className是使用新值换旧值（会覆盖）, 如果需要添加一个类,需要保留之前的类名
2.3设置/修改元素样式属性——通过 classList 操作类控制CSS
1.为了解决className 容易覆盖以前的类名（并且还要去查看已有的类名），我们可以通过classList方式追加、删除、切换类名
2.注意这里的就没有.类名了，而是直接类名
3.toggle如果有就删掉，没有就加上
3.设置/修改表单元素属性
表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框,正常的有属性有取值的跟其他的标签属性没有任何区别。
常见表单属性:value、disabled、checked、selected
定时器-间歇函数(setInterval、clearInterval)
函数名字不需要加括号（加了括号就是立即调用了）
定时器返回的是一个id数字（定时器的数字）let timerId = setInterval(repeat, 1000)，该数字用于清除定时器
一般不会刚创建就停止，而是满足一定条件再停止
案例——阅读协议定时器
事件
注册和两种注册事件
事件是在编程时系统内发生的动作或者发生的事情,比如用户在网页上单击一个按钮。
- 什么是事件？
事件是在编程时系统内发生的动作或者发生的事情
比如点击按钮 click
- 什么是事件监听(绑定事件，注册事件，事件侦听)？
就是让程序检测是否有事件产生，一旦有事件触发，就立即调
用一个函数做出响应，也称为 注册事件
- 事件监听三要素：
事件源： 那个dom元素被事件触发了，要获取dom元素
事件： 用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等
事件调用的函数： 要做什么事
两种注册事件的区别：
- 传统on注册（L0）
- 同一个对象,后面注册的事件会覆盖前面注册(同一个事件)
- 直接使用null覆盖偶就可以实现事件的解绑
- 都是冒泡阶段执行的（没有捕获）
- 事件监听注册（L2）
- 语法: addEventListener(事件类型, 事件处理函数, 是否使用捕获)
- 后面注册的事件不会覆盖前面注册的事件(同一个事件)
- 可以通过第三个参数去确定是在冒泡或者捕获阶段执行
- 必须使用removeEventListener(事件类型, 事件处理函数, 获取捕获或者冒泡阶段)
- 匿名函数无法被解绑（所以要给名字，下面的第二次匿名函数就无法解绑）
事件类型
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属性值,例如<input type=“text-sadads”>
高阶函数（函数表达式、回调函数）
高阶函数可以被简单理解为函数的高级应用，
JavaScript 中函数可以被当成【值】来对待，基于这个特性实现函数的高级应用。
【值】就是 JavaScript 中的数据，如数值、字符串、布尔、对象等。
-
函数表达式
普通函数的声明与调用无顺序限制，推荐做法先声明再调用，函数表达式必须要先声明再调用。
把函数也是【数据】 ，把函数（可能是匿名函数）赋值给变量
-
回调函数
如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数；
当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数，
回调函数本质还是函数，只不过把它当成参数使用；
使用匿名函数做为回调函数比较常见。
this
环境对象指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境
作用：弄清楚this的指向，可以让我们代码更简洁
- 函数的调用方式不同，this 指代的对象也不同
- 【谁调用， this 就是谁】 是判断 this 指向的粗略规则
- 直接调用函数，其实相当于是 window.函数，所以 this 指代 window
排他思想
第一种方法：遍历所有的加点击事件，如果这个button被点击了，就遍历所有的去掉class名，然后只给当前点击的加
改进思想：遍历所有的点击事件，如果这个button被点击了，就从类名为pink的选择器列表中移除类为pink的（注意哪些有点，哪些没有）
节点
DOM节点：DOM树里每一个内容都称之为节点
节点类型有以下3种：
元素节点：所有的标签 比如 body、 div、 html 是根节点
属性节点： 所有的属性：比如 href、
文本节点： 所有的文本：其他
查找节点parentNode、children、nextElementSibling/previousElementSibling
- 获取父节点
parentNode 属性：返回最近一级的父节点 找不到返回为nul
- 获取子节点（两种，开发用children）
childNodes：获得所有子节点、包括文本节点（空格、换行）、注释节点等
children （重点）：仅获得所有元素节点，返回的还是一个伪数组
- 兄弟关系查找：
- 下一个兄弟节点：nextElementSibling 属性
- 上一个兄弟节点: previousElementSibling 属性
增加节点createElement、appendChild/insertBefore、克隆节点cloneNode()
- 1.创建元素节点： 即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点
- 2.追加节点appendChild、insertBefore
要想在界面看到，还得插入到某个父元素中、插入到父元素的最后一个子元素
- 克隆节点cloneNode()
cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值
若为true，则代表克隆时会包含后代节点一起克隆
若为false，则代表克隆时不包含后代节点
默认为false
删除节点removeChild()
在 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 |
时间例子YYYY-MM-DD HH:mm形式
时间戳（倒计时常用）
是指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等), 称为重绘。
-
重绘不一定引起回流，而回流一定会引起重绘
事件对象
- 事件对象是什么
也是个对象，这个对象里有事件触发时的相关信息
例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息 - 如何获取
在事件绑定的回调函数的第一个参数就是事件对象
一般命名为event、ev、e
常用属性
type：获取当前的事件类型
clientX/clientY：获取光标相对于浏览器可见窗口左上角的位置（仅限可视窗口的可点的的坐标）
pageX/pageY：获取光标相对于浏览器可见窗口左上角的位置（整个页面的坐标包括滚动、调试界面）
offsetX/offsetY：获取光标相对于当前DOM元素左上角的位置
key：用户按下的键盘键的值，现在不提倡使用keyCode
- 案例1——天使图片随鼠标移动
分析：
①：鼠标在页面中移动，用到 mousemove 事件
②：不断把鼠标在页面中的坐标位置给图片left和top值即可
案例2——按回车发送微博文本
回忆上面：keydown 键盘按下触发（包括按的什么键：回车Enter、删除Delete、空格Space等等,删除返回Backspace，属性e.key区分）
- 注意这里是弹起，如果是keydown
事件流
事件流指的是事件完整执行过程中的流动路径。假设页面里有个div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段，简单来说：捕获阶段是从父到子，冒泡阶段是从子到父。
事件冒泡:当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发,即会依次向上调用所有父级元素的同名事件,事件冒泡是默认存在的。
事件捕获：从DOM的根元素开始去执行对应的事件 (从外到里)，事件捕获需要写对应代码才能看到效果。
- 以前老的那种就没有捕获：
- addEventListener实际上第三个参数就是捕获
addEventListener第三个参数传入true代表是捕获阶段触发（很少使用）
若传入false代表冒泡阶段触发，默认就是false
若是用 L0 事件监听，则只有冒泡阶段，没有捕获
阻止事件流动stopPropagation()（阻止冒泡）
因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素,若想把事件就限制在当前元素内，就需要阻止事件流动。
阻止事件流动需要拿到事件对象（阻止谁传播），此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效。
阻止默认行为（比如a标签的跳转）
事件委托
- jQuery中的事件委托
- 事件委托：是利用事件流的特征解决一些开发需求的知识技巧，不可能给每一个子元素绑定事件（例如删除列表操作）
- 事件委托是委托给了谁？父元素
- 如何找到真正触发的元素？e.target 事件对象.target
优点：给父级元素加事件（可以提高性能）
原理：事件委托其实是利用事件冒泡的特点， 给父元素添加事件，子元素可以触发
实现：事件对象.target 可以获得真正触发事件的元素（再.tagName是大写的标签）渲染时候给a标签增加id属性，删除时splice可以好删。
数据委托案例——给表格删除一行的数据
其余补充
transition: all 0.6s; /* css过渡效果 * /
this.parentNode.style.visibility = ‘hidden’ /* 保留位置的隐藏*/
this.parentNode.style.display = ‘none’ /* 不保留位置的隐藏 /
str.trim() / * 去掉字符串前后的空格，中间的保留/
2888
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
