JavaScript-DOM(3)

日期对象

const date = new Date() /实例化

时间戳

• 是指1970年1月1日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()) //只能返回当前的时间戳，不能指定时间

DOM节点

DOM树里的每一个内容都是节点

查找节点

父节点

const box =document.querySelector('.box')
console.log(box.parentNode)

子节点

const box =document.querySelector('.box')
console.log(box.children) //返回所有的元素 伪数组,选择的是亲儿子
console.log(box.childNodes) //获得所有子节点,包括注释节点等(不用)

兄弟节点

const box =document.querySelector('.box')
console.log(box.previousElementSibling) //上一个兄弟
console.log(box.nextElementSibling)	//下一个兄弟

增加节点*

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

创建

const li=document.createElement('li') //创建li元素

插入节点

document.body.appendChild(li) //插入到父元素最后一个子元素后面
document.body.insertBefore(li, ul.children[0])  //(插入的元素，放在哪个元素的前面)

克隆节点

true 代表包括后代节点一起克隆 (深克隆)

false 代表克隆时不包括后代节点（浅克隆）

默认为 false

const ul = document.querySelector('ul')
ul.children[0].cloneNode(true) 

删除节点

const ul = document.querySelector('ul')
ul.removeChild(ul.children[0])

手机端事件（了解）

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

Swiper插件

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

轮播图插件

重绘和回流

重绘不一定引起回流， 回流一定会引起重绘