web API-day03-节点操作,时间对象,重绘和回流

1. DOM节点

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

节点类型

• 元素节点

  所有的标签 比如 body、 div

• 属性节点

  所有的属性 比如 href

• 文本节点

  所有的文本

小结：
1\. 什么是DOM 节点？ 
Ø DOM树里每一个内容都称之为节点 
2\. DOM节点的分类？ 
Ø 元素节点 比如 div标签 
Ø 属性节点 比如 class属性 
Ø 文本节点 比如标签里面的文字 
3\. 我们重点记住那个节点？ 
Ø 元素节点

2. 查找节点

1. 父节点查找：

   parentNode 属性 ( 子元素 . parentNode )

2. 子节点查找：

   1、children （**重点方法： 父元素 . children**）
   

   获得所有元素节点

   返回的还是一个伪数组

   2、childNodes
   

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

3. 兄弟关系查找：

   下一个兄弟节点 nextElementSibling 属性

   上一个兄弟节点 previousElementSibling 属性

3. 增加节点

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

Ø创建一个新的节点

Ø把创建的新的节点放入到指定的元素内部

学习路线：

创建节点

追加节点

1. 创建节点

创建元素节点方法：

2. 追加节点

创建的节点要想在界面看到，还得插入到某个父元素中

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

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

1\. 创建节点的方法？// 新增标签 
Ø document.createElement(‘标签名’) 

2\. 添加节点方法？ 
Ø appendChild 
Ø insertBefore 

3\. 添加节点方法的区别？ 
Ø appendChild 添加到父节点里面的最后面 
Ø insertBefore 可以指定位置

新增节点的特殊情况：

复制一个原有的节点

把复制的节点放入到指定的元素内部

克隆节点

cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值
Ø若为true，则代表克隆时会包含后代节点一起克隆
Ø若为false，则代表克隆时不包含后代节点
Ø默认为false

4. 删除节点

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

语法：

注：

Ø如不存在父子关系则删除不成功

Ø删除节点和隐藏节点（display:none） 有区别的： 隐藏节点还是存在的，但是删除，则从html中删除节点

二. 时间对象

1. 创建时间对象

获得当前时间

获得指定时间

2.时间对象方法

时间对象中的方法可以得到对应的年月日 时分秒

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

3. 时间戳

什么是时间戳

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

三种方式获取时间戳

1. 使用 getTime() 方法

2. 简写 +new Date()

3. 使用 Date.now()

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

小结:
1. 实例化时间对象 
Ø new Date() 

2. 时间对象方法 

3. 时间戳 
Ø new Date().getTime() 
Ø +new Date() 
Ø Date.now() 
Ø 重点记住 +new Date() 因为可以返回当前时间戳或者指定的时间戳

三. 拓展-重绘和回流

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

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

2. 重绘和回流(重排)

• 回流(重排)

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

• 重绘

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

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

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

    Ø页面的首次刷新
  
    Ø浏览器的窗口大小发生改变
  
    Ø元素的大小或位置发生改变
  
    Ø改变字体的大小
  
    Ø内容的变化（如：input框的输入，图片的大小）
  
    Ø激活css伪类 （如：:hover）
  
    Ø脚本操作DOM（添加或者删除可见的DOM元素）
  
  

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

image.png