前端学习--JS入门(7) 日期对象/节点操作

一、日期对象

1.1 实例化

得到当前的系统时间

//得到当前时间
const date = new Date()

//获取指定时间
//倒计时使用
const date1 = new Date('2023-04-07 15:30:00')

1.2 日期对象方法

方法	作用	取值
getFullYear()		四位年份
getMonth()		0-11
getDate()	月份中的每一天	每个月份不一样
getDay()	获取星期	0-6
getHours()		0-23
getMinutes()		0-59
getSeconds()		0-59

1.3 时间戳

1970.01.01 00:00:00 距离现在的毫秒数

获取时间戳

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

//2 +new Date()
console.log(+new Date())

//3 Date.now()
console.log(Date.now())

//前两种可以得到指定时间的时间戳
//第三种只能得到当前时间戳

案例-毕业倒计时（快点毕业

  
  
  
  
  



  

    
今天是0000年0月0日
    
毕业倒计时
    

      00
       天 
      00
      :
      25
      :
      20
    
    
离毕业又近了1秒钟
  
  

二、节点操作

2.1 DOM节点

节点类型

• 元素节点 所有的标签
• 属性节点 所有的属性
• 文本节点 所有的文本

2.2 查找结点

站在元素关系的角度（父子、兄弟）查找

//父节点查找
子元素.parentNode

//子元素查找
//获得所有子节点（包括文本节点 注释节点）
父元素.childNodes
//仅获得所有标签节点
//得到伪数组 选择的是亲儿子
父元素.children

//兄弟查找
//下一个兄弟
element.nextElementSibling
//上一个兄弟
element.previousElementSibling

2.3 增加节点

创建一个新的节点

把该节点加入指定元素内部

//创建一个新节点
document.createElement('标签名')

//将该节点插入指定父元素的最后
父元素.appendChild('要插入的元素')

//插入父元素中某个元素的前面
父元素.insertBefore(要插入的元素, 在哪个元素前面)

//克隆一个已有元素的节点 true表示连带后代一起克隆 false表示克隆不包含后代节点
元素.cloneNode(true/false)

2.4 删除节点

删除元素必须通过父元素删除

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

三、移动端事件

3.1 touch事件

touchstart	手指触摸到一个DOM元素时触发
touchmove	手指在一个DOM元素上滑动触发
touchend	手指从一个DOM元素上移开时触发

四、插件 

https://www.swiper.com.cn/