WebAPI_DAY3_DOM节点和时间戳

DOM节点

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

1. 元素节点：如body、div
2. 属性节点：如href、src
3. 文本节点：所有的文本
4. 其他

查找节点

节点关系：

1. 父节点

   1. parentNode属性

   2. 返回最近一级的父节点，找不到返回null

   3. 子元素.parentNode
      

2. 子节点

   1. childNodes:获得所有子节点
   2. children：仅获得所有元素节点

3. 兄弟节点

   1. 下一个兄弟节点：nextElementSibling
   2. 上一个兄弟节点：previousElementSibling

增加节点

1. 创建节点

   document.createElement('标签名')//注意引号
   

2. 追加节点

   1. 插入到父元素的最后

      父元素.appendChild(要插入的元素)
      

   2. 插入到某个子元素后面

      父元素.insertBefore(要插入的元素,在哪个元素前面)
      

克隆节点

元素.cloneNode(bool)

• 若为true，会包含后代节点

• 若为false，不包含后代节点

• 默认false

删除节点

原生DOM中必须通过父元素进行删除

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

时间对象

let date = new Date()//获取当前时间
let date = new Date('2022-8-29 12:12:12')//获取指定时间

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

时间戳

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

let date = new Date()
console.log(date.getTime())
console.log(+new Date())//简写
console.log(Date.now())//静态方法，只能得到当前的时间戳

回流和重绘

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

重绘不一定引起回流，回流一定引起重绘

简单理解：影响到布局，就会有回流