站在巨人的肩膀上
黑马程序员前端JavaScript入门到精通全套视频教程,javascript核心进阶ES6语法、API、js高级等基础知识和实战教程
(九)Dom 节点&移动端滑动
1. 日期对象
- 日期对象:用来表示时间的对象
- 作用:可以得到当前系统时间
1.1 实例化
- 在代码中发现了 new 关键字时,一般将这个操作称为实例化
- 创建一个时间对象并获取时间
-
获取当前时间:
jsconst date = new Date()
-
获取指定时间:
jsconst date = new Date('2008-8-8') console.log(date)
-
1.2 时间对象方法
- 使用场景:因为日期对象返回的数据我们不能直接使用,所以需要转换为实际开发中常用的格式
方法 | 作用 | 说明 |
---|---|---|
getFullYear() | 获得年份 | 获取四位年份 |
getMonth() | 获得月份 | 取值为 0 ~ 11 |
getDate() | 获取月份中的每一天 | 不同月份取值也不相同 |
getDay() | 获取星期 | 取值为 0 ~ 6 |
getHours() | 获取小时 | 取值为 0 ~ 23 |
getMinutes() | 获取分钟 | 取值为 0 ~ 59 |
getSeconds() | 获取秒 | 取值为 0 ~ 5 |
1.3 时间戳
使用场景:如果计算倒计时效果,前面方法无法直接计算,需要借助于时间戳完成
-
什么是时间戳:
- 是指1970年01月01日00时00分00秒起至现在的毫秒数,它是一种特殊的计量时间的方式
-
算法:
- 将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数
- 剩余时间毫秒数 转换为 剩余时间的 年月日时分秒 就是 倒计时时间
- 比如 将来时间戳 2000ms - 现在时间戳 1000ms = 1000ms
- 1000ms 转换为就是 0小时0分1
-
三种方式获取时间戳:
-
使用 getTime() 方法
jsconst date = new Date() console.log(date.getTime())
-
简写 +new Date()
jsconsole.log(+new Date())
-
使用 Date.now()
-
无需实例化
-
但是只能得到当前的时间戳,而前面两种可以返回指定时间的时间戳
-
例子:
jsconsole.log(Date.now())
-
-
-
重点记住 +new Date() 因为可以返回当前时间戳或者指定的时间戳。
-
注意:
- 通过时间戳得到是毫秒,需要转换为秒再计算倒计时
- 转换公式:
- d = parseInt(总秒数/ 60/60 /24); // 计算天数
- h = parseInt(总秒数/ 60/60 %24) // 计算小时
- m = parseInt(总秒数 /60 %60 ); // 计算分数
- s = parseInt(总秒数%60); // 计算当前秒
2. 节点操作
2.1 DOM 节点
- DOM节点
- DOM树里每一个内容都称之为节点
- 节点类型
- 元素节点
- 所有的标签 比如 body、 div
- html 是根节点
- 属性节点
- 所有的属性 比如 href
- 文本节点
- 所有的文本
- 其他
- 元素节点
2.2 查找节点
-
父节点查找:
-
parentNode 属性
-
返回最近一级的父节点 找不到返回为null
-
语法:
子元素.parentNode
-
-
子节点查找:
- childNodes
- 获得所有子节点、包括文本节点(空格、换行)、注释节点等
- children 属性 (重点)
-
仅获得所有元素节点
-
返回的还是一个伪数组
-
语法:
父元素.children
-
- childNodes
-
兄弟关系查找:
- 下一个兄弟节点
- nextElementSibling 属性
- 上一个兄弟节点
- reviousElementSibling 属性
- 下一个兄弟节点
2.3 增加节点
一般情况下,我们新增节点,按照如下操作:
- 创建一个新的节点
- 把创建的新的节点放入到指定的元素内部
-
创建节点
-
即创造出一个新的网页元素,再添加到网页内,一般先创建节点,然后插入节点
-
创建元素节点方法:
// 创造一个新的元素节点 document.createElement('标签名')
-
-
追加节点
-
要想在界面看到,还得插入到某个父元素中
-
插入到父元素的最后一个子元素:
// 插入到这个父元素的最后 父元素.appendChild(要插入的元素)
-
插入到父元素中某个子元素的前面
// 插入到某个子元素的前面 父元素.insertBefore(要插入的元素, 在哪个元素前面)
-
-
特殊情况下,我们新增节点,按照如下操作:
- 复制一个原有的节点
- 把复制的节点放入到指定的元素内部
-
克隆节点:
// 克隆一个已有的元素节点 元素.cloneNode(布尔值)
-
cloneNode 会克隆出一个跟原标签一样的元素,括号内传入布尔值。
- 若为true,则代表克隆时会包含后代节点一起克隆
- 若为false,则代表克隆时不包含后代节点
- 默认为false
2.4 删除节点
-
若一个节点在页面中已不需要时,可以删除它
-
在 JavaScript 原生DOM操作中,要删除元素必须通过父元素删除
-
语法:
父元素.removeChild(要删除的元素)
-
注:
- 如不存在父子关系则删除不成功
- 删除节点和隐藏节点(display:none) 有区别的:隐藏节点还是存在的,但是删除,则从html中删除节点
3. M端事件
-
移动端也有自己独特的地方。比如触屏事件 touch(也称触摸事件),Android 和 IOS 都有。
-
touch 对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作。
-
常见的触屏事件如下:
触屏touch事件 说明 touchstart 手指触摸到一个DOM元素时触发 touchmove 手指在一个DOM元素上滑动时触发 touchend 手指在一个DOM元素上移开时触发
4. JS插件
- 插件: 就是别人写好的一些代码,我们只需要复制对应的代码,就可以直接实现对应的效果
- 学习插件的基本过程
- 熟悉官网,了解这个插件可以完成什么需求 https://www.swiper.com.cn/
- 看在线演示,找到符合自己需求的demo https://www.swiper.com.cn/demo/index.html
- 查看基本使用流程 https://www.swiper.com.cn/usage/index.html
- 查看APi文档,去配置自己的插件 https://www.swiper.com.cn/api/index.html
- 注意: 多个swiper同时使用的时候, 类名需要注意区分
5. 综合案列
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元素)
- 简单理解:影响到布局了,就会有回流