一、节点操作
1. DOM节点
DOM 树里面的每一个内容都称之为节点。
1.1 节点类型:
元素节点:
所有的标签,比如 body、 div
html 是根节点
属性节点:
所有的属性 ,比如 href
文本节点:
所有的文本
2. 查找节点
节点关系:父节点、子节点、 兄弟节点
父节点查找:
parentNode 属性;
返回最近一级的父节点 找不到返回为null。
let son = document.querySelector('.son')
// 找爸爸
// console.log(son.parentNode) 这里是通过控制台看是否打印父节点
// parentNode 就是要找父亲的意思
son.parentNode.style.display = 'none'
子节点查找:
childNodes :获得所有子节点、包括文本节点(空格、换行)、注释节点等。
children (重点):仅获得所有元素节点;返回的还是一个伪数组。
兄弟关系查找:
a . 下一个兄弟节点
nextElementSibling 属性
b. 上一个兄弟节点
previousElementSibling 属性
3. 增加节点
1.1 创建节点
即创造出一个新的网页元素,再添加到网页内,一般先创建节点,然后插入节点.
创建元素节点方法:
1.2 追加节点
要想在界面看到,还得插入到某个父元素中
a. 插入到父元素的最后一个子元素:
b. 插入到父元素中某个子元素的前面:
1.3 克隆节点
cloneNode会克隆出一个跟原标签一样的元素,括号内传入布尔值:
若为true,则代表克隆时会包含后代节点一起克隆;
若为false,则代表克隆时不包含后代节点;
默认为false.
let ul = document.querySelector('ul')
// 父级.cloneNode(布尔值)
/* 布尔值为false,则不克隆后代节点;是true则克隆后代节点 */
let newUl = ul.cloneNode(true)
// 追加克隆节点
document.body.appendChild(newUl)
4. 删除节点
若一个节点在页面中已不需要时,可以删除它;
在 JavaScript 原生DOM操作中,要删除元素必须通过父元素删除.
语法:
注意:
如不存在父子关系则删除不成功 ;
删除节点和隐藏节点(display:none) 有区别的: 隐藏节点还是存在的,但是删除,则从html中删除节点。
二、时间对象
时间对象:用来表示时间的对象。
作用:可以得到当前系统时间。
1. 实例化
在代码中发现了 new 关键字时,一般将这个操作称为实例化。
创建一个时间对象并获取时间:
获得当前时间:
获得指定时间:
2. 时间对象方法
因为时间对象返回的数据我们不能直接使用,所以需要转换为实际开发中常用的格式。
方法 | 作用 | 说明 |
getFullYear() | 获得年份 | 获取四位年份 |
getMonth() | 获得月份 | 取值为 0 ~ 11 |
getDate() | 获取月份中的每一天 | 不同月份取值也不相同 |
getDay() | 获取星期 | 取值为 0 ~ 6 |
getHours() | 获取小时 | 取值为 0 ~ 23 |
getMinutes() | 获取分钟 | 取值为 0 ~ 59 |
getSeconds() | 获取秒 | 取值为 0 ~ 59 |
// new 实例化 事件对象
// 小括号为空可以得到当前的时间
// 年月日
let date = new Date()
console.log(date.getFullYear())
console.log(date.getMonth() + 1) //getMonth只有0-11
console.log(date.getDate())
// 时分秒
console.log(date.getHours())
console.log(date.getMinutes())
console.log(date.getSeconds())
// 星期
console.log(date.getDay()) //0-6
3. 时间戳
是指1970年01月01日00时00分00秒起至现在的毫秒数,它是一种特殊的计量时间的方式。
三种方式获取时间戳:
1. 使用 getTime() 方法
// 1. 第一中方法 getTime()
let date = new Date()
console.log(date.getTime())
2. 简写 +new Date()
// 2. 第二种方法 +new Date() //当前的时间戳
console.log(+new Date())
console.log(+new Date('2022-9-24 12:00:00')) //指定时间的时间戳
3. 使用 Date().now()
// 3. 第三种方法 Date.now() 只能得到当前,不能得到以前的
console.log(Date.now())
注意:
1. 通过时间戳得到是毫秒,需要转换为秒在计算。
2. 转换公式:
d = parseInt(总秒数/ 60/60 /24); // 计算天数
h = parseInt(总秒数/ 60/60 %24) // 计算小时
m = parseInt(总秒数 /60 %60 ); // 计算分数
s = parseInt(总秒数%60); // 计算当前秒数
三、重绘和回流
1. 浏览器是如何进行界面渲染的
解析(Parser)HTML,生成DOM树(DOM Tree)
同时解析(Parser) CSS,生成样式规则 (Style Rules)
根据DOM树和样式规则,生成渲染树(Render Tree)
进行布局 Layout(回流/重排):根据生成的渲染树,得到节点的几何信息(位置,大小)
进行绘制 Painting(重绘): 根据计算和获取的信息进行整个页面的绘制
Display: 展示在页面上
2. 重绘和回流(重排)
回流(重排)
当 Render Tree 中部分或者全部元素的尺寸、结构、布局等发生改变时,浏览器就会重新渲染部分或全部文档的过 程称为 回流。
重绘
由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时(比如:color、background-color、 outline等), 称为重绘。
总结: 重绘不一定引起回流,而回流一定会引起重绘。