JS webAPI(DOM节点，回流重绘，时间对象)

一.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的伪类

只要是影响到页面的布局了就会有回流

---

思考：

1. 同步和异步的区别

2. var声明的放在window里

3. 回流（重排）和重绘

4. +new Date() // 得到时间戳，过去到现在时间的一个总毫秒数，/1000得到秒数

5. 通过子元素.parentNode 来获取父节点 ⚠️必须是子元素

6. 当我们需要所有元素时，使用querySelectorAll来获取到所有元素，然后for循环遍历到每一个元素，不要忘记+i

7. 学生信息表案例（用到的知识）

   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（）	清除延时函数