API

1、日期对象

1.时间对象的创建

• 获取当前时间：const date = new Date()
• 获取指定时间：const date = new Date('2010-9-8')

2.日期对象方法

3.时间戳

概念

• 是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式

获取时间戳

1. 使用 getTime() 方法

   • const date = new Date()
     console.log(date.getTime())
     

2. 简写 +new Date()

   • console.log(+new Date())或console.log(+new Date('2024-5-1 19:30:01'))

3. 使用 Date.now()

2、节点操作

1.DOM节点

概念

• DOM 树里每一个内容都称之为节点

节点类型

• 元素节点
  • 所有的标签，如 body、div
  • html是根节点
• 属性节点
  • 所有的属性，如 href
• 文本节点
  • 所有的文本

2.查找节点

父节点查找

• parentNode 属性

• 返回最近一级的父节点，找不到返回为 null

• 示例代码：子元素.parentNode

子节点查找

• childNodes 属性
  • 获取所有子节点、包括文本节点、注释节点等
• children 属性
  • 仅获得所有元素节点
  • 返回的还是一个伪数组
• 示例代码：父元素.children

兄弟关系查找

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

3.增加节点

创建节点

• 创建出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点
• 创建元素节点方法：
  • document.createElement('标签名')

追加节点

• 插入到父元素的最后一个子元素：
  • 父元素.appendChild(要插入的元素)
• 插入到父元素中某个元素的前面
  • 父元素.insertBefore(要插入的元素，在哪个元素前面)
• 克隆节点
  • 元素.cloneNode(布尔值)，其中布尔值：
    • 若为true，则代表克隆时会包含后代节点一起克隆
    • 若为false，则代表克隆时不包含后代节点
    • 默认为false

4.删除节点

• 在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除
  • 语法：父元素.removeChild(要删除的元素)
• 注：
  • 如不存在父子关系则删除不成功
  • 删除节点和隐藏节点（display:none）有区别的：隐藏节点是存在的，但是删除，则从html中删除节点

3、M端事件

概念

• 触屏事件 touch（也称触摸事件）

常见的触屏事件

• 触屏 touch 事件	说明
  touchstart	手指触摸到一个 DOM 元素时触发
  touchmove	手指从一个 DOM 元素上滑动时触发
  touchend	手指从一个 DOM 元素上移开时触发

• 示例代码：

  • const div = document.querySelector('div')
    div.addEventListener('touchstart',function(){
        //执行代码
    })
    

4、Window对象

1. BOM

概念

• BOM（Browser Object Model）是浏览器对象模型

2. 定时器--延时函数

• JavaScript 内置的一个用来让代码延迟执行的函数，叫 setTimeout

• 语法：setTimeout(回调函数，等待的毫秒数)

• 清除延迟函数：

  • let timer = setTimeout(回调函数，等待的毫秒数)
    clearTimeout(timer)
    

• 注意：

  • 延迟器需要等待，所以后面的代码先执行
  • 每一次调用延迟器都会产生一个新的延迟器

3. JS 执行机制

同步任务

• 同步任务都在主线程上执行，形成一个执行栈。

异步任务

• JS 的异步是通过回调函数实现的。示例：
  • 普通事件，如 click、resize 等
  • 资源加载，如 load、error等
  • 定时器，包括 setInterval、setTimeout 等

执行顺序

1. 先执行执行栈中的同步任务
2. 异步任务放入任务队列中
3. 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。

事件循环

• 由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为世界循环（event loop）

4. location的常用属性

1. href：获取完整的URL地址，对其赋值时用于地址的跳转
2. search：获取地址中携带的参数，符号？后面的部分
3. hash：获取地址中的哈希值，符号#后面的部分
4. reload：用来刷新当前页面，传入参数true时表示强制刷新

5. navigator对象

• navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息

• 常用属性和方法

• 通过userAgent检测浏览器的版本及平台

• 示例代码：

 <script>
     //检测 userAgent
    !(function () {
      const userAgent = navigator.userAgent;
      // 验证是否为 Android 或 iPhone
      const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/);
      const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/);
      //如果是Android 或 iPhone，则跳转至移动站点
      if (android || iphone) {
        location.href = 'https://www.baidu.com'
      }
    })()
  </script>

6. histroy对象

• history的数据类型是对象，主要管理历史记录，该对象与浏览器地址栏的操作相对应，如前进，后退，历史记录等

常用属性和方法

7.本地存储

• 存储数据：localStorage.setItem(key,value)