JavaScript日期对象、DOM节点操作(查找、增加、克隆、删除)-CSDN博客

本文链接：https://blog.csdn.net/yy8623977/article/details/134739901

1. 日期对象

实例化日期对象：

获取当前时间: new Date()
获取指定时间: new Date('2023-12-1 17:12:08')

日期对象方法:

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

时间格式转换：

date.toLocaleString(): 日期 + 时间
date.toLocaleDateString(): 日期
date.toLocaleTimeString(): 时间

示例如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>test title</title>

</head>
<body>

  <script>
    // 获取当前时间
    const nowDate = new Date()
    console.log(nowDate)  // Fri Dec 01 2023 17:23:08 GMT+0800 (中国标准时间)
    // 获取指定时间
    const date2 = new Date('2023-12-1 17:23:06')
    console.log(date2)  // Fri Dec 01 2023 17:23:06 GMT+0800 (中国标准时间)

    // 获取月份
    console.log(nowDate.getMonth() + 1)  // 12

    // 时间格式传唤
    console.log(nowDate.toLocaleString())   // 2023/12/1 17:23:08
    console.log(nowDate.toLocaleDateString())  // 2023/12/1
    console.log(nowDate.toLocaleTimeString())  // 17:23:08
  </script>
</body>
</html>

时间戳：
指1970年01月01日00时00分00秒起至指定时间的毫秒数。有三种方式获取时间戳，如下所示：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>test title</title>

</head>
<body>

  <script>
    // 方式一: 使用getTime()方法
    const date = new Date()
    console.log(date.getTime())
    // 方式二: 使用+new Date()
    console.log(+new Date())
    // 方式三: 使用Date.now()
    console.log(Date.now());
  </script>
</body>
</html>

2. DOM节点操作

2.1 查找节点

查找父节点：通过子元素.parentNode，找最近一级的父节点，找不到返回null
查找子节点：
- 通过父元素.childNodes，获得所有子节点，包括文本节点(空格、换行)、注释节点等
- 通过父元素.children，仅获得所有元素子节点，返回一个伪数组
查找兄弟节点：
- 通过元素.previousElementSibling，获取上一个兄弟节点
- 通过元素.nextElementSibling，获取下一个兄弟节点

示例如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>test title</title>

</head>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>

  <script>
    // 查找父节点
    const li2 = document.querySelector('ul li:nth-child(2)')
    const ul = li2.parentNode
    console.log(ul)

    // 查找子节点
    console.log(ul.children)

    // 查找兄弟节点
    console.log(li2.previousElementSibling.innerHTML)
    console.log(li2.nextElementSibling.innerHTML)
  </script>
</body>
</html>

控制台打印的消息如下：
查找节点效果

2.2 增加节点

先创建一个新的节点(例如: document.createElement('div'))
然后把创建的新的节点放入到指定的元素内部
- 方式一: 插入到父元素的最后一个子元素: 父元素.appendChild(要插入的新元素)
- 方式二: 插入到父元素中某个子元素的前面: 父元素.insertBefore(要插入的新元素, 放到哪个元素的前面)。如果放到哪个元素的前面获取不到，则以appendChild方式插入

示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>test title</title>

</head>
<body>
  <ul>
    <li>中间</li>
  </ul>
  <script>
    const ul = document.querySelector('ul')

    const lastLi = document.createElement('li')
    lastLi.innerHTML = '最后'
    ul.appendChild(lastLi)

    const firstLi = document.createElement('li')
    firstLi.innerHTML = '第一'
    ul.insertBefore(firstLi, ul.children[0])
  </script>
</body>
</html>

页面效果如下：
增加节点效果

2.3 克隆节点

cloneNode会克隆出一个跟原标签一样的元素。元素.cloneNode(布尔值)，布尔值默认为false

若为true，则代表克隆时会包含后代节点、文本节点、属性节点
若为false，则代表克隆时不包含后代节点、文本节点，但包含属性节点

示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>test title</title>

</head>
<body>
  <ul>
    <li>1</li>
  </ul>
  <script>
    const ul = document.querySelector('ul')
    const li1 = ul.children[0].cloneNode(true)
    ul.appendChild(li1)
  </script>
</body>
</html>

页面效果如下：
克隆节点效果

2.4 删除节点

删除元素必须通过父元素删除，父元素.removeChild(要删除的元素)。如不存在父子关系则删除不成功
隐藏节点(display:none)只是将节点隐藏，但还是存在的

示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>test title</title>

</head>
<body>
  <ul>
    <li>我要被删除了</li>
  </ul>

  <script>
    const ul = document.querySelector('ul')
    ul.removeChild(ul.children[0])  // 删除完后，页面为空白
  </script>
</body>
</html>