1.日期对象
1.实例化
在代码中发现了 new 关键字时,一般将这个操作称为实例化
创建一个时间对象并获取时间
获得当前时间
获得指定时间
2.日期对象方法
3.时间戳
是指1970年01月01日00时00分00秒起至现在的毫秒数,它是一种特殊的计量时间的方式
算法: 将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数
三种方式获取时间戳:
2.节点操作
1.DOM节点
DOM节点 DOM树里每一个内容都称之为节点
节点类型
元素节点
所有的标签 比如 body、 div html 是根节点
属性节点
所有的属性 比如 href
文本节点
所有的文本
2.查找结点
父节点查找:
parentNode 属性 返回最近一级的父节点 找不到返回为null
子节点查找:
childNodes 获得所有子节点、包括文本节点(空格、换行)、注释节点等
children 属性 (重点) 仅获得所有元素节点 返回的还是一个伪数组
兄弟关系查找:
1. 下一个兄弟节点 nextElementSibling 属性
2. 上一个兄弟节点 previousElementSibling 属性
3.增加节点
创建元素节点方法:
追加节点:
插入到父元素的最后一个子元素:
插入到父元素中某个子元素的前面
克隆节点
cloneNode会克隆出一个跟原标签一样的元素,括号内传入布尔值
若为true,则代表克隆时会包含后代节点一起克隆
若为false,则代表克隆时不包含后代节点
默认为false
4.删除节点
语法
注:
如不存在父子关系则删除不成功
删除节点和隐藏节点(display:none) 有区别的: 隐藏节点还是存在的,但是删除,则从html中删除节点
方法二:
要删除的子元素.remove()
3.M端事件
移动端也有自己独特的地方。比如触屏事件 touch(也称触摸事件)
4.JS插件
5.重绘和回流
1. 浏览器是如何进行界面渲染的
解析(Parser)HTML,生成DOM树(DOM Tree)
同时解析(Parser) CSS,生成样式规则 (Style Rules)
根据DOM树和样式规则,生成渲染树(Render Tree)
进行布局 Layout(回流/重排):根据生成的渲染树,得到节点的几何信息(位置,大小)
进行绘制 Painting(重绘): 根据计算和获取的信息进行整个页面的绘制
Display: 展示在页面上
回流(重排)
当 Render Tree 中部分或者全部元素的尺寸、结构、布局等发生改变时,浏览器就会重新渲染部分或全部文档的过 程称为 回流。
重绘
由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时(比如:color、background-color、 outline等), 称为重绘。
重绘不一定引起回流,而回流一定会引起重绘。
会导致回流(重排)的操作:
页面的首次刷新
浏览器的窗口大小发生改变
元素的大小或位置发生改变
改变字体的大小
内容的变化(如:input框的输入,图片的大小)
激活css伪类 (如::hover)
脚本操作DOM(添加或者删除可见的DOM元素)
简单理解影响到布局了,就会有回流