JavaScript 日期对象、DOM节点操作-EW帮帮网

日期对象

日期对象：使用new关键字实例化出来的对象

const date = new Date() //这样就获取到了一个日期对象

直接打印对象：

console.log(date)

打印到控制台如截图所示

时间对象内的方法们：

1.获取对象

对象.getFullYear() -- 获取当前时间的年份
对象.getMonth() -- 获取当前时间的月数（0-11）
对象.geyDate() -- 获取当前时间的天数
对象.getDay() -- 获取当前星期几（0-6） -- 0是周天
对象.getHours() -- 获取当前时间的小时数
对象.getMinutes() -- 获取当前时间的分钟数
对象.getSeconds() -- 获取当前时间秒数
对象.getTime() -- 获取从1970.1.1到现在的毫秒数

2.设置对象

setFullYear(year)：设置年份
setMonth(month)：设置月份（0-11）
setDate(date)：设置日期（1-31）
setHours(hours)：设置小时（0-23）
setMinutes(minutes)：设置分钟（0-59）
setSeconds(seconds)：设置秒数（0-59）
setMilliseconds(milliseconds)：设置毫秒数（0-999）
setTime(milliseconds)：设置自1970年1月1日以来的毫秒数

运用实例

<body>
<div id="div1">

</div>
<script>
  let a = setInterval(function(){
    const date = new Date()
    let year = date.getFullYear()//获取年
    let month = date.getMonth() + 1//获取月
    let day = date.getDate()//获取天
    let hour = date.getHours()//获取小时
    let minute = date.getMinutes()//获取分钟
    let second = date.getSeconds()//获取秒数
    let time = `${year}-${month}-${day}-${hour}-${minute}-${second}`
    console.log(time) //拼接字符串
    document.getElementById("div1").innerHTML = "现在是:"+time
    if(time === "2025-1-18-18-30-0"){//一旦时间等于我们设置的事件就停止定时器
      clearInterval(a)
      const div1 = document.getElementById('div1')
      div1.innerText = time
    }
  },1000)
</script>

</body>

日期对象.toLocaleString()

还有一种非常简单的方法可以让日期以 xxxx/xx/xx xx：xx：xx的格式输出

我们首先获取日期对象date。然后直接date.toLocaleString()就可以了

运用示例：

<body>
<div id="div1">
</div>
<script>
 const div1 = document.getElementById('div1')
 let date = new Date().toLocaleString()
 div1.innerText = date
 setInterval(()=>{
   date = new Date().toLocaleString()
   div1.innerText = date
 },1000)
</script>
</body>

输出结果因为div设置了css样式，所以会显示为粉色

日期对象.toLocaleDateString()

用法相同，但是只获取年月日，不获取时分秒

时间戳

从1970.1.1 00：00：00到当前所经过的毫秒数（1000ms = 1s）

获取时间戳的三种方法
1.先获取日期对象，通过对象里面的getTime()方法获取时间戳
2.+new Date() 简写，直接返回时间戳
3.Date.now() 直接返回时间戳

获取到时间戳之后我们可以设计倒计时的时候使用它
算法：将来时间戳 - 现在时间戳 = 剩余毫秒数（转换进制1k毫秒 = 1秒）

示例

<body>
<div id="div1">
</div>
<script>
  const div1 = document.getElementById('div1')
 const now =+new Date("2025-1-18 21:50:00")//获取未来时间戳
 let a = setInterval(function(){
   const time = +new Date()//获取现在时间戳
   const time_1 = now - time//求出剩余毫秒数
   //一秒 = 1000  一分钟 = 1000*60  一小时 = 1000*60*60  一天 = 1000*60*60*24
   const hour = Math.floor(time_1/ (1000 * 60 * 60));//除掉 小时
   const minute = Math.floor((time_1% (1000 * 60 * 60))/(1000*60));//先模除掉小时，剩余的就是分钟的毫秒，然后再除以分钟
   const second = Math.floor((time_1% (1000 * 60))/1000);//先模除分钟 再除以一秒
   div1.innerHTML =`${hour}:${minute}:${second}`
 },1000)
</script>
</body>

输出结果

要注意的是毫秒到时分秒的转换

Dom节点操作

Dom节点主要学习节点的增删查这三个，我们之前获取元素对象都是通过document....来获取，这是通过元素的id class等属性来获取。现在我们可以通过元素之间的关系来获取

Dom元素可以看作一个树，有上层的父节点，下层的子节点，同层的兄弟节点

1.父节点

设有一个对象 alpha，想得到它的父节点。可以使用：alpha.parentNode 父节点存在返回一个父节点对象，不存在返回null
如果想设置父节点的样式（display之类的）则需要使用alpha.parentElement.style.backgroundColor或者 this.parentNode.style.backgroudnColor

从这个截图中可以看到，alpha去修改父元素的style是没法成功的

2.子节点

子节点查找有两个方法：
1.childNodes 获取所有的子节点（包括文本节点，注释节点......）
2.children 获取所有的元素节点（标签）返回的是伪数组。这个是我们要学习的

children即使只有一个子节点也会以伪数组形式返回

3.兄弟节点

兄弟节点的获取也有两个，分别对应上一个兄弟节点和下一个兄弟节点：

1.上一个兄弟节点：对象.previousElementSibling
2.下一个兄弟节点：对象.nextElementSibling

4.创建节点

const name = document.createElement('节点标签名')

示例：const name = document.createElement('div')//创建一个div

5.追加节点

追加节点有两个方法：1.追加到父元素的最后面 2.追加到指定的位置

1.追加
假设获取到父元素div，我有一个子元素想追加到div里面
div.appendchild(要追加的子元素)

2.插入
假设获取到父元素div，我有一个子元素想插入到指定的位置。
首先需要获取到div里面所有的子元素：const child = div.childern
div.childern会返回一个伪数组，可以使用下标访问这些数组元素，假设div有10个子元素，我像插入到最前面，代码如下：div.insertBefore(要插入元素，child[0])

6.克隆节点

语法格式: 元素.cloneNode(true/false) //克隆元素，返回值为克隆得到的元素

true和false的作用：
true表示深克隆，元素的子代元素也会被一起克隆。相当于一比一赋值
false表示浅克隆浅克隆只会克隆该元素，但不会克隆子元素以及文本内容

克隆出来的元素的class id ....属性也会一并克隆

7.删除节点

删除节点需要用到父元素，代码格式：父元素.removeChild(要删除的元素)

示例：ul1.removeChild(ul1.children[1]) ul1是一个父元素，删除父元素中的第二个子元素

JavaScript 日期对象、DOM节点操作