什么是DOM 节点？什么是DOM节点？ DOM节点 DOM树里每一个内容都称之为节点节点类型元素节点所有的标签比

DOM节点

DOM节点 DOM树里每一个内容都称之为节点
节点类型
- 元素节点
  - 所有的标签比如 body、 div
  - html 是根节点
- 属性节点
  - 所有的属性比如 href
- 文本节点
  - 所有的文本
- 其他

查找节点

parentNode 父节点

父节点查找：

具备根据节点关系查找目标节点的能力

parentNode 属性

返回最近一级的父节点找不到返回为null

子元素.parentNode

children 子节点

子节点查找：

childNodes 获得所有子节点、包括文本节点（空格、换行）、注释节点等 children （重点）
仅获得所有元素节点
返回的还是一个伪数组

父元素.children
父元素.childNodes

兄弟节点

兄弟关系查找：

下一个兄弟节点

**nextElementSibling 属性**

上一个兄弟节点

**previousElementSibling 属性**

增加节点

创建节点

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

document.createElement('标签名')

追加节点

要想在界面看到，还得插入到某个父元素中插入到父元素的最后一个子元素

父元素.appendChild(要插入的元素) //插入到父元素最后
父元素.inserBefore(要插入的元素) //插入到父元素前面

特殊情况下，我们新增节点，按照如下操作：复制一个原有的节点把复制的节点放入到指定的元素内部

克隆节点

元素.cloneNode(布尔值) //克隆一个已经有的元素节点

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

若为true，则代表克隆时会包含后代节点一起克隆--深拷贝
若为false，则代表克隆时不包含后代节点--浅拷贝
默认为false

删除节点

若一个节点在页面中已不需要时，可以删除它在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除

父元素.removeChild(要删除的元素)

注：

如不存在父子关系则删除不成功
删除节点和隐藏节点（display:none）有区别的：隐藏节点还是存在的，但是删除，则从html中删除节点

实例化

在代码中发现了 new 关键字时，一般将这个操作称为实例化
创建一个时间对象并获取时间

获得当前时间

let date = new Date()

获得指定时间

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

时间对象方法

因为时间对象返回的数据我们不能直接使用，所以需要转换为实际开发中常用的格式

方法	作用	说明
getFullYear()	获得年份	获取四位年份
getMonth()	获得月份	取值0~11
getDate()	获得月份中的每一天	不同月份取值也不相同
getDay()	获取星期	取值0~6
getHours()	获取小时	取值0~23
getMinutes()	获取分钟	取值0~59
getSeconds()	获取秒	取值0~59

时间戳

什么是时间戳
- 是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式

三种方法:

getTime()

let date = new Date() //实例化

console.log(date.getTime()) //获取时间戳

+new Date()

简写

console.log(+new Date())

Date.now()

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

console.log(Date.now())

重绘和回流

浏览器是如何进行界面渲染的？

解析（Parser）HTML，生成DOM树(DOM Tree)
同时解析（Parser） CSS，生成样式规则 (Style Rules)
根据DOM树和样式规则，生成渲染树(Render Tree)
进行布局 Layout(回流/重排):根据生成的渲染树，得到节点的几何信息（位置，大小）
进行绘制 Painting(重绘): 根据计算和获取的信息进行整个页面的绘制
Display: 展示在页面上

重绘和回流(重排)

回流(重排) 当 Render Tree 中部分或者全部元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档的过程称为回流。
重绘由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时(比如：color、background-color、outline等), 称为重绘。
重绘不一定引起回流，而回流一定会引起重绘。

会导致回流（重排）的操作：

页面的首次刷新
浏览器的窗口大小发生改变
元素的大小或位置发生改变
改变字体的大小
内容的变化（如：input框的输入，图片的大小）
激活css伪类（如：:hover）
脚本操作DOM（添加或者删除可见的DOM元素）简单理解影响到布局了，就会有回流

总结

什么是DOM 节点？ DOM树里每一个内容都称之为节点
DOM节点的分类？ 元素节点比如 div标签属性节点比如 class属性文本节点比如标签里面的文字
查找父节点用那个属性？ parentNode
查找所有子节点用那个属性？ children

childNodes
查找兄弟节点用那个属性？ nextElementSibling previousElementSibling
实例化时间对象 new Date()
时间对象方法 时间对象里面的方法转换实际所用
时间戳 date.getTime() +new Date() Date.now() 重点记住 +new Date() 因为可以返回当前时间戳或者指定的时间戳

什么是DOM 节点？