节点
DOM树里每一个内容都称之为节点
节点类型
-
元素节点
- 所有的标签 比如 body、 div
- html 是根节点
-
属性节点
- 所有的属性 比如 href
-
文本节点
- 所有的文本
节点操作
-
查找节点
-
节点关系
- 父节点
- 子节点
- 兄弟节点
-
父节点查找
- 子元素 . parentNode
- 返回最近一级的父节点 找不到返回为null
-
子节点查找
-
childNodes
-
获得所有子节点、包括文本节点（空格、换行）、注释节点等
-
children
- 仅获得所有元素节点
- 返回的还是一个伪数组
- 父元素 . children
-
-
兄弟关系查
-
下一个兄弟节点
- nextElementSibling
-
上一个兄弟节点
- previousElementSibling
-
-
-
-
增加节点
-
一般情况下，我们新增节点，创建一个新的节点，把创建的新的节点放入到指定的元素内部
-
创建节点
-
document.createElement('标签名')
-
-
追加节点
-
插入到父元素的最后一个子元素:
-
父元素 . apendChild(要插入的元素)
-
-
插入到父元素中某个子元素的前面
-
父元素 . insertBefore(要插入的元素，在哪个元素前面)
-
-
-
特殊情况下，我们新增节点，复制一个原有的节点，把复制的节点放入到指定的元素内部
-
克隆节点
-
元素.cloneNode(布尔值) - cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值
- 若为true，称为深克隆，克隆时会包含后代节点一起克隆
- 若为false，称为浅克隆，克隆时不包含后代节点
- 默认为false
-
-
-
删除节点
-
父元素 . removeChild(要删除的元素) - 要删除元素必须通过父元素删除
- 如不存在父子关系则删除不成功
-
时间对象
实例化时间对象
- 在代码中发现了 new 关键字时，一般将这个操作称为实例化
获得当前时间
-
let date = new Date()
获得指定时间
-
let date = new Date('1999-09-21') -
因为时间对象返回的数据我们不能直接使用，所以需要转换为实际开发中常用的格式
时间戳
-
指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式
-
console.log(date.getTime()); -
console.log(+new date()); -
console.log(Date.now());- 只能得到当前的时间戳
重绘和回流
-
回流(重排)
- 当 Render Tree 中部分或者全部元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档 的过程称为 回流
-
重绘
- 由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时(比如：color、background-color、 outline等), 称为重绘。
-
重绘不一定引起回流，而回流一定会引起重绘。
