1. DOM节点
- DOM树里每一个内容都称之为节点
节点类型
-
元素节点
所有的标签 比如 body、 div
-
属性节点
所有的属性 比如 href
-
文本节点
所有的文本
小结：
1\. 什么是DOM 节点？
Ø DOM树里每一个内容都称之为节点
2\. DOM节点的分类？
Ø 元素节点 比如 div标签
Ø 属性节点 比如 class属性
Ø 文本节点 比如标签里面的文字
3\. 我们重点记住那个节点？
Ø 元素节点
2. 查找节点
-
父节点查找：
parentNode 属性 ( 子元素 . parentNode )
-
子节点查找：
1、children （**重点方法： 父元素 . children**）获得所有元素节点
返回的还是一个伪数组
2、childNodes获得所有子节点、包括文本节点（空格、换行）、注释节点等
-
兄弟关系查找：
下一个兄弟节点 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秒起至现在的毫秒数，它是一种特殊的计量时间的方式
三种方式获取时间戳
- 使用 getTime() 方法
- 简写 +new Date()
- 使用 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
网友评论