day21 Web APIs 3

目录

一、节点操作

1、DOM节点

2、查找节点

3、增加节点

4、删除节点

二、时间对象

1、实例化

2、时间对象方法

3、时间戳

 三、重绘和回流

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

2、回流(重排)

3、重绘

---

一、节点操作

1、DOM节点

（1）什么是DOM 节点？

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

（2）DOM节点的分类？

• 元素节点比如div标签（重点）
• 属性节点比如class属性
• 文本节点比如标签里面的文字

 2、查找节点

（1）父节点查找

• parentNode属性
• 返回最近一级的父节点找不到返回为null

 （2）子节点查找

childNodes

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

children（重点）

• 仅获得所有元素节点
• 返回的还是一个伪数组

 （3）兄弟关系查找

下一个兄弟节点

• nextElementSibling属性

上一个兄弟节点

• previousElementSibling属性

3、增加节点

        很多情况下，我们需要在页面中增加元素，比如，点击发布按钮，可以新增一条信息。

        一般情况下，我们新增节点，按照如下操作：创建一个新的节点把创建的新的节点放入到指定的元素内部

（1）创建节点

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

 例：

 （2）追加节点

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

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

（3）克隆节点

克隆节点按照如下操作：

•  复制一个原有的节点
• 把复制的节点放入到指定的元素内部

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

• 若为true，则代表克隆时会包含后代节点一起克隆
• 若为false，则代表克隆时不包含后代节点
• 默认不填为false

4、删除节点

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

 注意点：

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

二、时间对象

          时间对象是用来表示时间的对象，通过时间对象可以得到当前系统时间

1、实例化

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

获得当前时间：

获得指定时间：

 2、时间对象方法

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

 3、时间戳

什么是时间戳：

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

三种方式获取时间戳：

（1）使用getTime() 方法

 （2）简写+new Date()

（3）使用Date().now()

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

三种方式打印的结果都是从1970年01月01日00时00分00秒起至现在的毫秒数1658583765361

 三、重绘和回流

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

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

2、回流(重排)

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

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

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

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

3、重绘

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

 总结：

• 简单来说，影响页面布局就是重排，不影响页面布局的就是重绘
• 重绘不一定引起回流，而回流一定会引起重绘。