一、节点操作
DOM节点：DOM树里每一个内容都称之为节点
1 . 元素节点：所有的标签 比如 body、 div；
2 . 属性节点：所有的属性 比如 href、id、class
3 . 文本节点：所有的文本查找节点：
1 . 父节点查找-------parentNode 属性
语法：子元素.parentNode
2 . 子节点查找-------children（重点）
获得所有元素节点
返回一个伪数组
语法：父元素.children
拓展：childNodes：获得所有子节点、包括文本节点（空格、换行）、注释节点等
3.兄弟关系查找
下一个兄弟节点 nextElementSibling 属性
上一个兄弟节点 previousElementSibling 属性
- 创建和增加节点
1.创建节点
语法： document.createElement('标签名')
2.增加节点
2.1 插入到父元素的最后一个子元素:
语法：父元素.appendChild(要添加的元素)
2.2 插入到父元素中某个子元素的前面
语法：父元素.insertBefore(要添加的元素, 在谁前面)
细节：使用insertBefore 一定要有两个参数，否则报错；
了解：第二个参数 null 或 undefined，效果等价于 appendChild效果
2.3 克隆节点
语法：元素.cloneNode(布尔值)
若为true，则代表克隆时会包含后代节点一起克隆
若为false，则代表克隆时不包含后代节点
默认为false
- 删除节点
语法：父元素.remove(要删除的元素)
要删除元素必须通过父元素删除
如不存在父子关系则删除不成功
二、时间对象
时间对象：用来表示时间的对象
作用：可以得到当前系统时间
语法： let date = new Date() 获取当前时间
let date = new Date('2022-5-2') 获得指定时间
- 时间对象中的方法可以得到对应的年月日 时分秒
getFullYear() 获得年份 获取四位年份
getMonth() 获得月份 取值为 0 ~ 11
getDate() 获取月份中的每一天 不同月份取值也不相同
getDay() 获取星期 取值为 0 ~ 6
getHours() 获取小时 取值为 0 ~ 23
getMinutes() 获取分钟 取值为 0 ~ 59
getSeconds() 获取秒 取值为 0 ~ 59
- 时间戳
时间戳定义：是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式
三种获得时间戳的方式：
// 方式1： 时间对象调用getTime()
let d = new Date() // 当前的时间
console.log(d.getTime())
// 方式2： 推荐方式 简单
console.log(+new Date()) // 当前的时间时间戳
console.log(+new Date('2020')) // 指定时间的时间戳
// 方式3： 缺点：无法获取指定时间的时间戳
console.log(Date.now())
重点记住 +new Date() 因为可以返回当前时间戳或者指定的时间戳
三、重绘和回流
- 浏览器是如何渲染的
解析（Parser）HTML，生成DOM树(DOM Tree)
同时解析（Parser） CSS，生成样式规则 (Style Rules)
根据DOM树和样式规则，生成渲染树(Render Tree)
进行布局 Layout(回流/重排):根据生成的渲染树，得到节点的几何信息（位置，大小）
进行绘制 Painting(重绘): 根据计算和获取的信息进行整个页面的绘制
Display: 展示在页面上
- 重绘和回流(重排)
回流(重排)： 当 Render Tree 中部分或者全部元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档 的过程称为 回流。简单理解影响到布局了，就会有回流。
重绘：由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时(比如：color、background-color、 outline等), 称为重绘。
重绘不一定引起回流，而回流一定会引起重绘。
