WebAPI(三)、 DOM 日期对象Date；获取事件戳；根据节点关系查找节点

DOM

1. 日期对象

日期对象就是用来表示时间的对象，可以得到当前的时间

//  获取当前时间
const current = new Date() 
console.log(current) // Fri Sep 06 2024 18:02:43 GMT+0800
// 获取指定时间
const date = new Date('2025-06-01 08:30:00')
console.log(date) // Sun Jun 01 2025 08:30:00 GMT+0800

(1)、日期对象方法

方法	作用	说明
getFullYear()	获得年份	四位数的年份
getMonth()	获得月份	取值为0~11
getDate()	获得月份中的一天	不同月份取值不同
getDay()	获得周几	取值0~6，0代表星期日
getHours()	获取小时	取值0~23
getMinuates()	获取分钟	取值0~59
getSeconds()	获取秒	取值0~59

比如：

const currentDate = new Date()
console.log(currentDate.getFullYear());
console.log(currentDate.getMonth() + 1); // getMonth 0-11
console.log(currentDate.getDate());
console.log(currentDate.getDay()); // 0-6  星期天是0
//  getDay() 0-6
const arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
console.log(arr[new Date().getDay()]);

(2)、时间戳

时间戳就是获取毫秒数，可用来计算倒计时效果。
获取时间戳的三种方法
getTime()：可返回指定时间的时间戳
new Date()：可返回指定时间的时间戳—常用
Date.now(): 这个方法无法返回指定时间的时间戳，

// F1: getTime() 可返回指定时间的时间戳
console.log(new Date().getTime()); // 1725617212649
// F2: +new Date() 可返回指定时间的时间戳---常用
// new Date()返回的是字符串，前边+号将字符串转为数字型，就是时间戳了
console.log(+new Date()); // 1725617212649
//F3: Date.now() 这个方法无法返回指定时间的时间戳，console.log(Date.now()); // 1725617212649

(3)、下课倒计时

• 将来的时间戳-现在的时间戳 = 剩余的时间毫秒数
• 把剩余时间转换为时、分、秒。
• 转换公式
  • 天数： d = parseInt(总秒数/ 60 / 60 % 24);
  • 小时：h = parseInt(总秒数/ 60 / 60 % 24)
  • 分钟数：m = parseInt(总秒数 / 60 % 6);
  • 秒数： s = parseInt(总秒数 % 60）

function getCountTime () {// 1. 得到当前的时间戳const now = +new Date()// 2. 得到将来的时间戳const last = +new Date('2022-4-1 18:30:00')// 3. 得到剩余的时间戳 count  记得转换为 秒数const count = (last - now) / 1000// console.log(count)// 4. 转换为时分秒, 格式是HH-MM-SS，不足两位补0let h = parseInt(count / 60 / 60 % 24)h = h < 10 ? '0' + h : h let m = parseInt(count / 60 % 60)m = m < 10 ? '0' + m : mlet s = parseInt(count % 60)s = s < 10 ? '0' + s : sconsole.log(h, m, s)//  5. 把时分秒写到对应的盒子里面document.querySelector('#hour').innerHTML = hdocument.querySelector('#minutes').innerHTML = mdocument.querySelector('#scond').innerHTML = s
}
getCountTime()
setInterval(getCountTime, 1000) // 设一个定时器，实时更新倒计时

2. 节点操作

dom树里有不同类型的节点，重点关注元素节点

(1)、 查找节点（根据节点关系找）

此处查找节点是根据节点之间的关系来查找
查找父节点：子元素.parentNode，返回最近一级的父节点，找不到返回null

<div class="grandpa"><div class="father"><div class="son"></div></div>
</div>
<script>const son = document.querySelector('.son')console.log(son);console.log(son.parentNode);console.log(son.parentNode.parentNode);
</script>

查找子节点: 父元素.children, 仅获得所有元素节点，返回的是一个伪数组
兄弟关系查找：下一个兄弟——nextElementSibling；上一个兄弟——previousElementSibling

<ul><li>one</li><li>two</li><li>three</li><li>four</li><li>five</li>
</ul>
<script>// 1.2 获得所有子元素的children元素节点const ul = document.querySelector('ul')console.log(ul.children);         // 伪数组// 1.3 兄弟节点const fourLi = document.querySelector('ul li:nth-child(4)')console.log(fourLi);// 上一个console.log(fourLi.previousElementSibling);// 下一个console.log(fourLi.nextElementSibling);
</script>

(2)、 增加节点：创建create、追加append、克隆clone

• 创建节点
  • document.createElement(‘标签名’) 创建一个新的元素节点
• 追加节点
  • 父元素.appendChild(要插入的元素)：追加为父元素的最后一个子元素
  • 父元素.insertBefore(要插入的元素，在哪个元素前面)：追加在某个元素前边

<ul><li>one</li><li>two</li><li>three</li><li>four</li><li>five</li>
</ul>
<script>const ul = document.querySelector('ul')// 1. 创建节点 creatElement('标签名')const li = document.createElement('li')li.innerHTML = '在末尾追加的元素'// 2. 追加// 2.1 追加在末尾 appendChildul.appendChild(li)// 2.2 追加在某个位置 insertBefore('要插入的元素',位置)const topLi = document.createElement('li')topLi.innerHTML = 'topLi'ul.insertBefore(topLi, ul.children[0])
</script>

• 克隆元素
  • 某个子元素.clone(布尔值)

// true--克隆个跟原标签一样的元素，括号内传入布尔值
// false就只克隆标签，其余的都不管
ul.appendChild(ul.children[0].cloneNode(true))

(3)、 删除节点remove

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

// 原生DOM操作中，删除元素必须通过父元素删除
ul.removeChild(ul.children[1])

删除节点和隐藏节点（display:none）区别： 隐藏节点还是存在的，但是删除，则从html中删除节点。