【JS】Chapter9-Dom 节点&移动端滑动

站在巨人的肩膀上

黑马程序员前端JavaScript入门到精通全套视频教程，javascript核心进阶ES6语法、API、js高级等基础知识和实战教程

（九）Dom 节点&移动端滑动

1. 日期对象

• 日期对象：用来表示时间的对象
• 作用：可以得到当前系统时间

1.1 实例化

• 在代码中发现了 new 关键字时，一般将这个操作称为实例化
• 创建一个时间对象并获取时间
  • 获取当前时间：

    const date = new Date()
    1

  • 获取指定时间：

    const date = new Date('2008-8-8')
    console.log(date)
    1
    2

1.2 时间对象方法

• 使用场景：因为日期对象返回的数据我们不能直接使用，所以需要转换为实际开发中常用的格式

1.3 时间戳

使用场景：如果计算倒计时效果，前面方法无法直接计算，需要借助于时间戳完成

• 什么是时间戳:
  • 是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式
• 算法：
  • 将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数
  • 剩余时间毫秒数 转换为 剩余时间的 年月日时分秒 就是 倒计时时间
  • 比如 将来时间戳 2000ms - 现在时间戳 1000ms = 1000ms
  • 1000ms 转换为就是 0小时0分1
• 三种方式获取时间戳：
  • 使用 getTime() 方法

    const date = new Date()
    console.log(date.getTime())
    1
    2

  • 简写 +new Date()

    console.log(+new Date())
    1

  • 使用 Date.now()
    • 无需实例化
    • 但是只能得到当前的时间戳，而前面两种可以返回指定时间的时间戳
    • 例子：

      console.log(Date.now())
      1

• 重点记住 +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
    1

• 子节点查找：
  • childNodes
    • 获得所有子节点、包括文本节点（空格、换行）、注释节点等
  • children 属性 （重点）
    • 仅获得所有元素节点
    • 返回的还是一个伪数组
    • 语法：

      父元素.children
      1

• 兄弟关系查找：
  • 下一个兄弟节点
    • nextElementSibling 属性
  • 上一个兄弟节点
    • reviousElementSibling 属性

2.3 增加节点

一般情况下，我们新增节点，按照如下操作：

• 创建一个新的节点
• 把创建的新的节点放入到指定的元素内部

1. 创建节点
   • 即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点
   • 创建元素节点方法：

     // 创造一个新的元素节点
     document.createElement('标签名')
     1
     2

2. 追加节点
   • 要想在界面看到，还得插入到某个父元素中
   • 插入到父元素的最后一个子元素:

     // 插入到这个父元素的最后
     父元素.appendChild(要插入的元素)
     1
     2

   • 插入到父元素中某个子元素的前面

     // 插入到某个子元素的前面
     父元素.insertBefore(要插入的元素, 在哪个元素前面)
     1
     2

• 特殊情况下，我们新增节点，按照如下操作：
  • 复制一个原有的节点
  • 把复制的节点放入到指定的元素内部
• 克隆节点：

  // 克隆一个已有的元素节点
  元素.cloneNode(布尔值)
  1
  2

• cloneNode 会克隆出一个跟原标签一样的元素，括号内传入布尔值。
  • 若为true，则代表克隆时会包含后代节点一起克隆
  • 若为false，则代表克隆时不包含后代节点
  • 默认为false

2.4 删除节点

• 若一个节点在页面中已不需要时，可以删除它
• 在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除
• 语法：

  父元素.removeChild(要删除的元素)
  1

• 注：
  • 如不存在父子关系则删除不成功
  • 删除节点和隐藏节点（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 重绘和回流

1. 浏览器是如何进行界面渲染的

• 解析（Parser）HTML，生成DOM树(DOM Tree)
• 同时解析（Parser） CSS，生成样式规则 (Style Rules)
• 根据DOM树和样式规则，生成渲染树(Render Tree)
• 进行布局 Layout(回流/重排):根据生成的渲染树，得到节点的几何信息（位置，大小）
• 进行绘制 Painting(重绘): 根据计算和获取的信息进行整个页面的绘制
• Display: 展示在页面上

2. 回流(重排)

• 当 Render Tree 中部分或者全部元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档的过程称为 回流。

3. 重绘

• 由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时(比如：color、background-color、outline等), 称为重绘。
• 重绘不一定引起回流，而回流一定会引起重绘。
• 会导致回流（重排）的操作：
  • 页面的首次刷新
  • 浏览器的窗口大小发生改变
  • 元素的大小或位置发生改变
  • 改变字体的大小
  • 内容的变化（如：input框的输入，图片的大小）
  • 激活css伪类 （如：:hover）
  • 脚本操作DOM（添加或者删除可见的DOM元素）
• 简单理解：影响到布局了，就会有回流