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，不足两位补0
    let h = parseInt(count / 60 / 60 % 24)
    h = h < 10 ? '0' + h : h 
    let m = parseInt(count / 60 % 60)
    m = m < 10 ? '0' + m : m
    let s = parseInt(count % 60)
    s = s < 10 ? '0' + s : s
    console.log(h, m, s)
    //  5. 把时分秒写到对应的盒子里面
    document.querySelector('#hour').innerHTML = h
    document.querySelector('#minutes').innerHTML = m
    document.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 追加在末尾 appendChild
    ul.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中删除节点。