一.dom节点
dom数里面每一个内容都称为节点
分类：元素节点，属性节点，文本节点
1.1父节点
父节点：
子元素.parentNode（从孩子元素去想上一层找到他的父亲，可以无限套娃）
⚠️注意：先获取子元素
1.2子节点
-
1.2.1childNodes
获得所有子节点，包括文本节点（空格、换行）注释节点
⚠️注意：先获取父元素
-
1.2.2children属性
从父亲元素.children[索引值]来获得当前父亲元素立面的所有子元素
const ul = document.querySelector('ul')
console.log(ul.children)
const li2 = document.querySelector('li:nth-child(2)')
console.log(li2)
console.log(li2.nextElementSibling)
console.log(li2.previousElementSibling)-
1.2.3兄弟节点
1.下一个兄弟节点：nextElementSibling
2.上一个兄弟节点：previousElementSibling
1.3创建节点
const div = document.createElement('div')追加节点(要先获取到父级元素再追加)
//获取到ul元素
const ul = document.querySelector('ul')
ul.appendChild(li)//在尾部追加
ul.insertBefore(li,ul.children[0])
//位置自选追加，0表示在ul的子元素的第一个位置追加一个li
1.4克隆节点
元素.cloneNode(true)
如果为true就会克隆所有的包括样式，如果为false只会克隆标签
//获取元素
const ul = document.querySelector('ul')
//克隆节点
let lili = ul.children[1].cloneNode(true)
//追加元素
ul.appendChild(lili)1.5删除节点
父元素.removeChild()
//获取ul元素
const ul = document.querySelector('ul')
//删除ul的第一个孩子
ul.removeChild(ul.children[0])二.移动端事件
触屏事件（touch）：
touchstart点击事件
touchend离开事件
touchmove持续事件
三.BOM对象
bom是浏览器的对象模型
window对象是一个全局对象，是javascript中的顶级对象
四.延时定时器
让代码延迟执行的函数，叫 setTimeout
延时函数和间歇函数的区别：
-
延时函数: 执行一次
-
间歇函数:每隔一段时间就执行一次,除非手动清除
五.js执行机制
JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。
5.1同步和异步
同步：等一个任务结束之后，再去执行另一个任务
异步：再处理一个任务的时候需要花费很多时间，那么在做这个任务的同时你可以同时处理其他任务
执行顺序： 先处理任务栈里的同步任务，同步任务处理完毕后，按照读取等待队列的异步任务，于是异步任务结束等待的状态进入执行栈开始执行
5.2 JS插件
-
插件: 就是别人写好的一些代码,我们只需要复制对应的代码,就可以直接实现对应的效果
-
学习插件的基本过程
-
熟悉官网,了解这个插件可以完成什么需求 Swiper中文网-轮播图幻灯片js插件,H5页面前端开发
-
看在线演示,找到符合自己需求的demo Swiper演示 - Swiper中文网
-
查看基本使用流程 Swiper使用方法 - Swiper中文网
-
查看APi文档,去配置自己的插件 中文api - Swiper中文网
-
注意: 多个swiper同时使用的时候, 类名需要注意区分
-
六.日期对象
6.1获取当前时间
new关键字
const date = new Date()//声明date常量获取new关键字，得到当前的时间
const date = new Date('2008-8-8') //得到一个固定的时间，一般填写未来的时间6.2时间戳
6.2.1使用 getTime() 方法了解
const date = new Date()
console.log(date.getTime())6.2.2简写 +new Date()常用
console.log(+new Date())6.2.3使用 Date.now() 了解
console.log(Date.now())只能得到当前的时间戳，前两种可以返回指定的时间戳
七.回流和重绘
回流：
元素的结构、尺寸、布局发生变化，浏览器会重新进行排版 渲染部分或全部文档，这个过程叫回流（重排）
重绘：
元素的样式发生改变，并不影响他在文档中的位置和布局（如颜色、背景色）叫重绘
重绘不一定引起回流，而回流一定会引起重绘。
一般会导致重排的操作
1.页面首次刷新
2.字体大小的改变
3.内容的变化
4.激活css的伪类
只要是影响到页面的布局了就会有回流
思考：
-
同步和异步的区别
-
var声明的放在window里
-
回流（重排）和重绘
-
+new Date() // 得到时间戳，过去到现在时间的一个总毫秒数，/1000得到秒数
-
通过子元素.parentNode 来获取父节点 ⚠️必须是子元素
-
当我们需要所有元素时，使用querySelectorAll来获取到所有元素，然后for循环遍历到每一个元素，不要忘记+i
-
学生信息表案例（用到的知识）
e.preventDefault阻止默认事件
this.reset()重置表单方法
单词
| 单词 | 意思 | 用法 |
|---|---|---|
| new Data() | new关键字，日期对象 | 声明一个常量来获取目前的时间 const date = new Date() |
| .getFullYear() | 获得年份 | 获取四位年份 console.log(变量名.getFullYear()) |
| .getMonth() | 获得月份 | 取值为 0 ~ 11 |
| .getDate() | 获取月份中的每一天 | 不同月份取值也不相同 |
| .getDay() | 获取星期 | 取值为 0 ~ 6 |
| .getHours() | 获取小时 | 取值为 0 ~ 23 |
| .getMinutes() | 获取分钟 | 取值为 0 ~ 59 |
| .getSeconds() | 获取秒 | 取值为 0 ~ 59 |
| setInterval(function(){},1000) | 定时器，间歇函数 | 语法：setInterval(function(){调用的函数},1000) |
| .parentNode | 父节点 | 子元素. parentNode.parentNode 通过子元素来找到他的父亲 |
| .children | 子节点 | 父元素.children 通过父元素来找到他的子元素 |
| document.createElement | 创建节点 | 通过js创建一个节点 |
| .appendChild | 尾部追加元素，配合创建节点一起使用 | 父元素.appendChild(要插入的元素) |
| .insertBefore | 动态追加元素，父元素.insertBefore(要插入的元素，在哪个元素前面) | |
| .cloneNode(true) | 克隆一个节点，true能克隆所有东西，false只能克隆标签 | |
| .removeChild | 删除一个元素 | |
| touchstart | m端：手指按下触发 | |
| touchend | m端：手指离开触发 | |
| touchmove | m端：按住移动 | |
| setTimeout | 延时函数（使用方法和setinterval一样） | |
| clearTimeout（） | 清除延时函数 | |