Web APIs Web APIs第三天

Web APIs

老师：黑马程序员

Web APIs第三天

1. 节点操作

1.1 DOM节点

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

1.1.1 节点类型

• 元素节点

  所有的标签比如body、div

  html是根节点

• 属性节点

  所有的属性比如href

• 文本节点

  所有的文本

• 其他

1.2 查找节点

1.2.1 节点关系

• 父节点
• 子节点
• 兄弟节点

1.2.2 父节点查找

parentNode属性

返回最近一级的父节点找不到返回为null

1.2.3 子节点查找

childNodes

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

children

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

1.2.4 兄弟关系查找

• 下一个兄弟节点

  nextElementSibling属性

• 上一个兄弟节点

  previousElementSibling属性

1.3 增加节点

1.3.1 创建节点

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

创建元素节点方法:

1.3.2 追加节点

要想在界面看到，还得插入到某个父元素中

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

  

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

  

1.3.3 克隆节点

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

若为true，则代表克隆时会包含后代节点一起克隆

若为false，则代表克隆时不包含后代节点

默认为false

1.4 删除节点

若一个节点在页面中已不需要时，可以删除它

在JavaScript原生DOM操作中，要删除元素必须通过父元素删除

语法：

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

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

2. 时间对象

时间对象:用来表示时间的对象

作用:可以得到当前系统时间

2.1 实例化

2.1.1 获得当前时间

let date = new Date()
1

2.1.2 获得指定时间

let date = new Date('1949-10-01')
1

2.2 时间对象方法

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

2.3 时间戳

2.3.1 什么是时间戳

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

2.3.2 三种方式获取时间戳

• 使用getTime()方法
• 简写 + new Date()
• 使用Date().now()

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

3 重绘和回流

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

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

3.2 重绘和回流(重排)

3.2.1 回流(重排)

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

3.2.2 重绘

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

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

3.2.3 会导致回流(重排)的操作

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

【影响到布局了，就会有回流】