WebAPI_DAY3

标签：WebAPI 元素 DAY3 节点 获取 Date 取值 重绘

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等),称为重绘。

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

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

标签：WebAPI,元素,DAY3,节点,获取,Date,取值,重绘
From： https://www.cnblogs.com/exungsh/p/17083333.html