节点操作
DOM节点
- DOM树里每一个内容都称之为节点
- 节点类型
①元素节点：所有的标签 比如 body、 div，html 是根节点
② 属性节点：所有的属性 比如 href
③ 文本节点：所有的文本，即标签的内容
查找节点
父节点
- parentNode 属性
- 返回最近一级的父节点找不到返回为null
- 代码：子元素.parentNode
子节点
childNodes:
获得所有子节点、包括文本节点(空格、换行)、注释节点等
children (重点)
①仅获得所有元素节点 ②返回的还是一个伪数组
-
兄弟节点
- 下一个兄弟节点：nextElementSibling 属性
- 上一个兄弟节点： previousElementSibling 属性
增加节点
- 很多情况下，我们需要在页面中增加元素 比如，点击发布按钮，可以新增一条信息
- 创建节点：即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点
代码：document.createlement('标签名') - 追加节点
插入到父元素的最后一个子元素:父元素.appendchild(要插入的元素)
插入到父元素中某个子元素的前面:父元素.insertBefore(要插入的元素,在哪个元素前面)
克隆节点
- 步骤：
①复制一个原有的节点
②把复制的节点放入到指定的元素内部 - 代码：元素.cloneNode(布尔值)
- cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值
若为true，则代表克隆时会包含后代节点一起克隆
若为false，则代表克隆时不包含后代节点,默认为false
删除节点
- 语法：父元素.removeChild(要删除的元素)
- 删除节点和隐藏节点(display:none) 有区别的: 隐藏节点还是存在的，但是删除，则从html中删除节点
时间对象
实例化
- 在代码中发现了 new 关键字时，一般将这个操作称为实例化
- 创建一个时间对象并获取时间
获取当前时间： let date = new Date()
获取指定时间： let date = new Date('1949-10-01 11:20:26')
- 把时间转换成当地时间的显示模式：new Date().toLocaleString()
时间对象方法
时间戳
- 什么是时间戳?是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式
- 三种方式获取时间戳
综合案例
把时间戳转化成XX:XX:XX(例如：10:36:55)
小时：（总秒数➗一小时的秒数）取整
分钟：【（总秒数%一小时的秒数）➗一分钟的秒数】取整
秒数：【（总秒数%一小时的秒数）%一分钟的秒数】取整
取整的几种方式：
-
Math.floor() 向下取整
Math.floor(3.141592654) // 3 -
Math.ceil() 向上取整
Math.ceil(3.141592654) // 4 -
Math.round() 四舍五入
Math.round(3.141592654) // 3 -
parseInt() 去掉小数点和小数点后的部分
parseInt(3.141592654) // 3 -
~~ 将数据转化为Number类型
~~3.141592654 // 3
重绘和回流
1. 浏览器是如何进行界面渲染的
- 解析(Parser)HTML，生成DOM树(DOM Tree)
- 同时解析(Parser) CSS，生成样式规则 (Style Rules)
- 根据DOM树和样式规则，生成渲染树(Render Tree)
- 进行布局Layout(回流/重排):根据生成的渲染树，得到节点的几何信息(位置，大小)
- 进行绘制Painting(重绘):根据计算和获取的信息进行整个页面的绘制
- Display:展示在页面上
2. 重绘和回流(重排)
- 回流(重排) 当 Render Tree 中部分或者全部元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档的过程称为 回流。
- 重绘
由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时(比如:color、background-color、outline等), 称为重绘。
补充： border和 outline 很类似，但有如下区别： ①outline不占据空间，绘制于元素内容周围。
②根据规范，outline通常是矩形，但也可以是非矩形的。 - 重绘不一定引起回流，而回流一定会引起重绘。
- 会导致回流(重排)的操作:
页面的首次刷新
浏览器的窗
大小发生改变
元素的大小或位置发生改变
改变字体的大小
内容的变化(如:input框的输入，图片的大小)
激活css伪类 (如::hover)
脚本操作DOM(添加或者删除可见的DOM元素)
简单理解影响到布局了，就会有回流
微博发布
