节点操作、时间对象、重绘和回流

节点操作

DOM节点

DOM树里每一个内容都称之为节点

节点类型
元素节点：所有的标签比如 body 、 div ，html 是根节点
属性节点：所有的属性比如 href 
文本节点：所有的文本
其他

查找节点

1父节点查找

子元素.parentNode

2子节点查找
childNodes :获得所有子节点、包括文本节点（空格、换行）、注释节点等

children （重点）:获得所有元素节点
返回的还是一个伪数组
父元素 .children

3兄弟关系查找

下一个兄弟节点

nextElementSibling 属性

上一个兄弟节点

previousElementSibling 属性

增加节点

创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点

1.创建节点

document . createElement (＇标签名＇)

2.追加节点

要想在界面看到，还得插入到某个父元素中

插入到父元素的最后一个子元素：

父元素 . appendChild （要插入的元素）

插入到父元素中某个子元素的前面

父元素．insertBefore （要插入的元素，在哪个元素前面）

特殊情况下，我们新增节点，按照如下操作：

复制一个原有的节点，把复制的节点放入到指定的元素内部

克隆节点

元素. cloneNode （布尔值）

cloneNode 会克隆出一个跟原标签一样的元素，括号内传入布尔值

若为 true ，则代表克隆时会包含后代节点一起克隆

若为 false ，则代表克隆时不包含后代节点

默认为 false

删除节点

要删除元素必须通过父元素删除

父元素． removeChild （要删除的元素）

---

时间对象

实例化

在代码中发现了 new 关键字时，一般将这个操作称为实例化

创建一个时间对象并获取时间

1获得当前时间

 let date =new Date()

2获得指定时间

 let date = new Date ('1949-10-01')

 时间对象方法

 时间戳

什么是时间戳
是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式 三种方式获取时间戳
1．使用 getTime (）方法
 let date = new Date (）
 console . log ( date . getTime ())
2．简写+ new Date ()
 console . log (+ new Date ())

3 .使用 Date . now ()

console . log ( Date . now ())

无需实例化

但是只能得到当前的时间戳，而前面两种可以返回指定时间的时间戳

console . log (+ new Date ())
 console . log (+ new Date ('2021-8-3012:00:00'))

---

重绘和回流

回流（重排）

当 Render Tree 中部分或者全部元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档的过程称为回流。

布局发生改变，如尺寸

重绘

由于节点（元素）的样式的改变并不影响它在文档流中的位置和文档布局时（比如： color 、 background - color 、 outline 等），称为重绘。

样式发生改变，如背景颜色

重绘不一定引起回流，而回流一定会引起重绘。