JavaScript进阶-WebAPI（DOM节点操作）-CSDN博客

本文链接：https://blog.csdn.net/DAZZPNB/article/details/124261532

本文详细介绍了JavaScript中DOM节点的操作，包括获取、增加和删除节点的方法，如appendChild、insertBefore和removeChild等。同时，文章还探讨了时间对象的使用，如toLocaleString、getFullYear等方法，以及如何创建和操作指定时间。此外，通过实例展示了实时显示当前日期和时间的功能，以及时间戳的获取。

摘要由CSDN通过智能技术生成

文章目录

- - 二、JavaScript进阶-WebAPI
  - - DOM节点操作

二、JavaScript进阶-WebAPI

DOM节点操作

获取节点

本质: 针对标签本身的增删查
父级: parentNode
子集: children 伪数组
兄弟：
　　nextElementSibling 下一个兄弟
　　previousElementSibling 上一个兄弟

增加节点

方法一：
　　创建新节点
　　　　let result = document.createElement(‘标签名称’)
　　追加节点
　　　　parent.appendChild(child)
　　　　　　将child的元素添加到parent元素里面去(最后面)
　　　　parent.insertBofore(child, refChild)
　　　　　　将child元素添加到refChild的前面去
　　　　　　如果refChild元素获取不到, 会默认以appendChild形式添加
　　　　　　追加的节点可以是新创建的也可以是页面上已经存在 (移动)
方法二：
　　insertAdjacentHTML(position, text)
　　　　position：
　　　　　　beforebegin：元素自身的前面
　　　　　　afterbegin：插入元素内部的第一个子节点之前
　　　　　　beforeend：插入元素内部的最后一个子节点之后
　　　　　　afterend：元素自身的后面
　　　　将指定的文本解析为Element元素，并将结果节点插入到DOM树中的指定位置。
　　　　它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。
　　　　这避免了额外的序列化步骤，使其比直接使用innerHTML操作更快。
克隆节点
　　模板元素.cloneNode(布尔值)
　　　　false: 浅拷贝，不克隆后代节点
　　　　true: 深拷贝，克隆后代节点
　　　　用于需要创建一个复杂的标签
　　　　　　前提: 页面上有一个模板节点

删除节点

parent.removeChild(child)

拓展-时间对象

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Title</title>
 <style>
     div {
         margin: 0 auto;
         width: 300px;
         height: 50px;
         background-color: skyblue;
         line-height: 50px;
         text-align: center;
     }
 </style>
</head>
<body>
<div></div>
<script>
 // 实例化对象
 let arr = []
 let arr1 = new Array()
 let obj = {}
 let obj1 = new Object()

 let time = new Date()
 console.log(time) // Fri Apr 08 2022 14:39:32 GMT+0800 (中国标准时间)
 console.log(time.toLocaleString()) // 2022/4/12 15:22:47
 console.log(time.toLocaleDateString()) // 2022/4/12
 console.log(time.toLocaleTimeString()) // 15:22:47
 console.log(time.getFullYear()) // 年份 2022
 console.log(time.getMonth() + 1) // 月份 0-11
 console.log(time.getDate()) // 日期 8
 console.log(time.getDay()) // 星期 0-6
 console.log(time.getHours()) // 时
 console.log(time.getMinutes()) // 分
 console.log(time.getSeconds()) // 秒

 /************ 实例化指定时间 ************/
 let last = new Date('2021-8-29 9:00:00')
 console.log(last)

 /************ 显示时间格式 ************/
 let div = document.querySelector('div')
 let dayArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
 let time2
 getTime()

 setInterval(getTime, 1000);

 function getTime() {
     time2 = new Date()
     let year = time2.getFullYear()
     let month = time2.getMonth() + 1
     let data = time2.getDate()
     let day = time2.getDay()
     let hour = time2.getHours()
     let min = time2.getMinutes()
     let sec = time2.getSeconds()
     div.innerHTML = `今天是：${year}年${month}月${data}日\t${hour}:${min}:${sec}\t${dayArr[day]}`
 }

 /************ 时间戳 ************/
	let time3 = new Date()
 console.log(time3.getTime())
 console.log(+new Date())
 console.log(+new Date('2021-4-8 9:00:00')) // 输出指定时间的时间戳
 console.log(Date.now())
</script>
</body>
</html>