九、WEB APIs（四）

1. 日期对象

1.1 实例化

日期对象：用来表示时间的对象。

作用：可以得到当前系统时间。

在代码中发现了new关键字时，一般将这个操作称为实例化。

创建一个时间对象并获取时间：

获取当前时间：

const date = new Date()

获得指定时间：

        //2.指定时间const date1 = new Date('2025-11-20 00:00:00')console.log(date1);

1.2 时间对象方法

方法	作用	说明
getFullYear()	获得年份	获取四位年份
getMonth()	获得月份	取值为0~11
getDate()	获得月份中的每一天	不同月份取值也不相同
getDay()	获取星期	取值为0~6
getHours()	获取小时	取值为0~23
getMinutes()	获取分钟	取值为0~59
getSeconds()	获取秒	取值为0~59

        //获取日期对象const date = new Date();//使用里面的方法console.log(date.getFullYear());console.log(date.getMonth()+1);console.log(date.getDate());console.log(date.getDay());//星期几console.log(date.getHours());console.log(date.getMinutes());console.log(date.getSeconds());

1.3 时间戳

什么是时间戳？

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

算法：

1.将来的时间戳-现在的时间戳 = 剩余时间毫秒数。

2. 剩余时间毫秒数 转换为 剩余时间的 年月日时分秒 就是倒计时时间。

三种方式获得时间戳：

1. 使用getTime()方法

2. 简写 +new Date()

3. 使用Date.now()

这种只能得到当前的时间戳，而前面两种可以返回指定时间的时间戳。

        //1. getTime()const date = new Date();console.log(date.getTime());//2. +newDate()console.log(+new Date());console.log(+new Date('2025-10-10 10:10:10'));//3. Date.now()console.log(Date.now());

2. 节点操作

2.1 DOM节点

DOM节点：DOM树里每一个内容都称之为节点。

节点类型：

1. 元素节点：所有的标签、html是根节点。

2. 属性节点：所有的属性，比如href。

3. 文本节点：所有的文本。

4. 其他。

2.2 查找节点

父节点查找：

parentNode属性

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

子元素.parentNode

    <div class = 'ye'><div class="dad"><div class="baby">x</div></div></div><script>const baby = document.querySelector('.baby');console.dir(baby);//返回dom对象console.dir(baby.parentNode);//返回父节点console.dir(baby.parentNode.parentNode)</script>

子节点查找：

childNodes：获得所有子节点，包括文本节点（空格、换行）、注释节点等。

children属性（重点）：

1. 仅获得所有元素节点。

2. 返回的还是一个伪数组。

父元素.children

    <ul><li><p>这是一个段落</p></li><li></li><li></li><li></li><li></li></ul><script>const ul = document.querySelector('ul');console.dir(ul.children);</script>

兄弟关系查找：

1. 下一个兄弟节点：

nextElementSibling属性

2. 上一个兄弟节点：

previousElementSibling属性

    <ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><script>const li2 = document.querySelector('li:nth-child(2)');console.log(li2.previousElementSibling);//上一个兄弟console.log(li2.nextElementSibling);//下一个兄弟</script>

2.3 增加节点

1. 创建一个新的节点

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

创建元素节点方法：

        //创造一个新的元素节点document.createElement('标签名');

2. 把创建的新的节点放入到指定的元素内部

追加节点：要想在界面看到，还得插入到某个父元素中。

插入到父元素的最后一个子元素：

        //插入到这个父元素的最后父元素.appendChild(div);

    <ul><li>我是第1个li</li><li>我是第2个li</li><li>我是第3个li</li></ul><script>//1. 创造一个新的元素节点const ul = document.querySelector('ul');const li = document.createElement('li');console.log(li);//2. 追加节点 作为父元素的最后一个子节点//插入到这个父元素的最后li.innerHTML = '我是Li';ul.appendChild(li);</script>

插入到父元素中某个子元素的前面：

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

    <ul><li>我是第1个li</li><li>我是第2个li</li><li>我是第3个li</li></ul><script>//1. 创造一个新的元素节点const ul = document.querySelector('ul');const li = document.createElement('li');console.log(li);//2. 追加节点 作为父元素的最后一个子节点//插入到这个父元素的最后li.innerHTML = '我是Li';ul.appendChild(li);//3. 追加节点ul.insertBefore(li,ul.children[0]);</script>

克隆节点：

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

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

若为true，则代表克隆时会包括后代节点一起克隆（深克隆），

若为false，则代表克隆时不包含后代节点（浅克隆），

默认为false。

    <ul><li>我是第1个li</li><li>我是第2个li</li><li>我是第3个li</li></ul><script>const ul = document.querySelector('ul')//1.克隆节点//const li1 = ul.children[0].cloneNode(true)//console.log(li1)//2. 追加//ul.appendChild(li1)ul.appendChild(ul.children[0].cloneNode(true))</script>

2.4 删除节点

若一个节点在页面中已不需要时，可以删除它

在JavaScript原生DOM操作中，要删除元素必须通过父元素删除

语法：

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

注：

1. 如不存在父子关系则删除不成功。

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

    <ul><li>没用了</li></ul><script>const ul = document.querySelector('ul')//删除节点 父元素.removeChild(子元素)ul.removeChild(ul.children[0])</script>