DOM 节点&移动端事件

日期对象

实例化

• const date1 = new Date()：获得当前时间
• const date2 = new Date('2022-5-1 2:00:00')：获得指定时间

常用方法

方法	作用	说明
getFullYear()	获得年份	获取 4 位年份
getMonth()	获得月份	取值为 0 ~ 11
getDate()	获取月份中的某一天	不同月份取值不相同
getDay()	获取星期	取值为 0 ~ 6
getHours()	获取小时	取值为 0 ~ 23
getMinutes()	获取分钟	取值为 0 ~ 59
getSeconds()	获取秒	取值为 0 ~ 59
toLocaleString()	格式化	例如：2023/6/26 11:57:35
toLocaleDateString()	格式化日期	例如：2023/6/26
toLocaleTimeString()	格式化时间	例如：11:57:35

时间戳

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

使用场景：计算倒计时效果，因为时间不能直接进行计算，所以使用时间戳

3 种获取时间戳的方式：

1. new Date().getTime()
2. +new Date()
3. Date.now()：只能得到当前的时间戳， 而前面两种可以返回指定时间的时间戳

节点操作

DOM 节点

• DOM 节点：DOM 树里每一个内容都称之为节点
• 节点类型：
  • 元素节点：
    • 所有的标签 比如 body、 div
    • html 是根节点
  • 属性节点：所有的属性 比如 href
  • 文本节点：所有的文本
  • 其他

查找节点

根据节点关系查找目标节点，可以减少 querySelector 的使用

父节点

子元素.parentNode

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

子节点

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

兄弟节点

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

增加节点

创建节点

即创造出一个网页元素，再添加到网页内，一般先创建节点，然后再插入节点，创建元素节点代码如下：

document.createElement('标签名')

插入节点

• 插入到父元素的最后一个子元素：父元素.appendChild(要插入的元素)
• 插入到父元素中某个子元素的前面：父元素.insertBefore(要插入的元素, 在哪个子元素前面)

克隆节点

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

1. 复制一个原有的节点
2. 把复制的节点插入到指定的元素内部

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

cloneNode 会克隆出一个跟原标签一样的元素，括号内传入布尔值：

• 若为 true，则代表克隆时会包含后代节点一起克隆
• 若为 false，则代表克隆时不包含后代节点，只克隆标签节点
• 默认为 false

删除节点

父元素.removeChild(子元素)

• 必须存在父子关系
• 删除节点和隐藏节点（display:none）有区别：隐藏节点还是存在的，但是删除节点的话是从 html 中删除节点

M端事件

M 端即移动端，常用事件如下：

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