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

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:08console.log(nowDate.toLocaleDateString())  // 2023/12/1console.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.parentNodeconsole.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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/29784.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！