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

站在巨人的肩膀上

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

(九)Dom 节点&移动端滑动

1. 日期对象

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

1.1 实例化

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

      js 复制代码
      const date = new Date()
    • 获取指定时间:

      js 复制代码
      const 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() 方法

      js 复制代码
      const date = new Date()
      console.log(date.getTime())
    • 简写 +new Date()

      js 复制代码
      console.log(+new Date())
    • 使用 Date.now()

      • 无需实例化

      • 但是只能得到当前的时间戳,而前面两种可以返回指定时间的时间戳

      • 例子:

        js 复制代码
        console.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
        
  • 兄弟关系查找:

    • 下一个兄弟节点
      • nextElementSibling 属性
    • 上一个兄弟节点
      • reviousElementSibling 属性

2.3 增加节点

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

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

    • 即创造出一个新的网页元素,再添加到网页内,一般先创建节点,然后插入节点

    • 创建元素节点方法:

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

    • 要想在界面看到,还得插入到某个父元素中

    • 插入到父元素的最后一个子元素:

      // 插入到这个父元素的最后
      父元素.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插件

5. 综合案列

5.1 重绘和回流

  1. 浏览器是如何进行界面渲染的
  • 解析(Parser)HTML,生成DOM树(DOM Tree)
  • 同时解析(Parser) CSS,生成样式规则 (Style Rules)
  • 根据DOM树和样式规则,生成渲染树(Render Tree)
  • 进行布局 Layout(回流/重排):根据生成的渲染树,得到节点的几何信息(位置,大小)
  • 进行绘制 Painting(重绘): 根据计算和获取的信息进行整个页面的绘制
  • Display: 展示在页面上
  1. 回流(重排)
  • 当 Render Tree 中部分或者全部元素的尺寸、结构、布局等发生改变时,浏览器就会重新渲染部分或全部文档的过程称为 回流。
  1. 重绘
  • 由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时(比如:color、background-color、outline等), 称为重绘。
  • 重绘不一定引起回流,而回流一定会引起重绘。
  • 会导致回流(重排)的操作:
    • 页面的首次刷新
    • 浏览器的窗口大小发生改变
    • 元素的大小或位置发生改变
    • 改变字体的大小
    • 内容的变化(如:input框的输入,图片的大小)
    • 激活css伪类 (如::hover)
    • 脚本操作DOM(添加或者删除可见的DOM元素)
  • 简单理解:影响到布局了,就会有回流
相关推荐
mqiqe23 分钟前
Python MySQL通过Binlog 获取变更记录 恢复数据
开发语言·python·mysql
AttackingLin25 分钟前
2024强网杯--babyheap house of apple2解法
linux·开发语言·python
IT女孩儿25 分钟前
CSS查缺补漏(补充上一条)
前端·css
Ysjt | 深1 小时前
C++多线程编程入门教程(优质版)
java·开发语言·jvm·c++
ephemerals__1 小时前
【c++丨STL】list模拟实现(附源码)
开发语言·c++·list
码农飞飞1 小时前
深入理解Rust的模式匹配
开发语言·后端·rust·模式匹配·解构·结构体和枚举
一个小坑货1 小时前
Rust 的简介
开发语言·后端·rust
湫ccc1 小时前
《Python基础》之基本数据类型
开发语言·python