【WEB APIs】DOM-节点操作
1. 日期对象
1.1 实例化
<script>
// 实例化
// 1.得到当前时间
const date = new Date()
console.log(date);
// 2.得到指定时间
const date1 = new Date('2025-3-14')
console.log((date1));
</script>1.2 日期对象方法
千万不要忘记加小括号
// 获得日期对象
const date2 = new Date()
// 使用里面的方法
console.log(date2.getFullYear());
console.log(date2.getMonth() + 1); //getMonth()取值0~11
console.log(date2.getDate());
console.log(date2.getDay()); //星期几，getDay()取值范围0~6，星期日是第0天显示格式化时间
<script>
const div = document.querySelector('div')
function getMyDate() {
const date = new Date()
// 不足10，前补0
let h = date.getHours()
h = h < 10 ? '0' + h : h
let m = date.getMinutes()
m = m < 10 ? '0' + m : m
let s = date.getSeconds()
s = s < 10 ? '0' + s : s
return `今天是：${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日 ${h}:${m}:${s}`
}
div.innerHTML = getMyDate() //防止刚刷新时1秒的空白
setInterval(function () {
div.innerHTML = getMyDate()
}, 1000)
</script>另一种写法（不用手动补0）
const div = document.querySelector('div')
const date = new Date()
div.innerHTML = date.toLocaleString()
setInterval(function () {
const date = new Date() //要获取最新的时间
div.innerHTML = date.toLocaleString() // 2025/3/16 11:46:04
// div.innerHTML = date.toLocaleDateString() // 2025/3/16
// div.innerHTML = date.toLocaleTimeString() // 11:46:04
}, 1000)1.3 时间戳
//1. getTime()
const date = new Date()
console.log(date.getTime())
// //2. +new Date()
console.log(+new Date()) //new Date()是字符串 +转化成数字型
// // 3. Date.now() 不需要实例化
console.log(Date.now())//返回指定时间的时间戳
console.log(+new Date('2025/3/16 11:46:04')) //2025-3-16 11:46:04 也行 //返回星期几
const arr = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
console.log(arr[new Date().getDay()])倒计时效果
<script>
// 随机颜色函数
// 1. 自定义一个随机颜色函数
function getRandomColor(flag = true) {
if (flag) {
// 3. 如果是true 则返回 #ffffff
let str = '#'
let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
// 利用for循环随机抽6次 累加到 str里面
for (let i = 1; i <= 6; i++) {
// 每次要随机从数组里面抽取一个
// random 是数组的索引号 是随机的
let random = Math.floor(Math.random() * arr.length)
// str = str + arr[random]
str += arr[random]
}
return str
} else {
// 4. 否则是 false 则返回 rgb(255,255,255)
let r = Math.floor(Math.random() * 256) // 55
let g = Math.floor(Math.random() * 256) // 89
let b = Math.floor(Math.random() * 256) // 255
return `rgb(${r},${g},${b})`
}
}
// 页面刷新随机得到颜色
const countdown = document.querySelector('.countdown')
countdown.style.backgroundColor = getRandomColor()
// 函数封装 getCountTime
function getCountTime() {
// 1. 得到当前的时间戳
const now = +new Date()
// 2. 得到将来的时间戳
const last = +new Date('20225-3-16 13:30:00')
// console.log(now, last)
// 3. 得到剩余的时间戳 count 记得转换为 秒数
const count = (last - now) / 1000
// console.log(count)
// 4. 转换为时分秒
// h = parseInt(总秒数 / 60 / 60 % 24) // 计算小时
// m = parseInt(总秒数 / 60 % 60); // 计算分数
// s = parseInt(总秒数 % 60);
// let d = parseInt(count / 60 / 60 / 24) // 计算当前秒数
let h = parseInt(count / 60 / 60 % 24)
h = h < 10 ? '0' + h : h
let m = parseInt(count / 60 % 60)
m = m < 10 ? '0' + m : m
let s = parseInt(count % 60)
s = s < 10 ? '0' + s : s
console.log(h, m, s)
// 5. 把时分秒写到对应的盒子里面
document.querySelector('#hour').innerHTML = h
document.querySelector('#minutes').innerHTML = m
document.querySelector('#scond').innerHTML = s
}
// 先调用一次
getCountTime()
// 开启定时器
setInterval(getCountTime, 1000)
// 日期
const next = document.querySelector('.next')
function getDate() {
const date = new Date()
next.innerHTML = `今天是：${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
}
getDate()
setInterval(getDate, 1000)
</script>2. 节点操作—元素节点
2.1 DOM节点
2.2 查找结点（通过关系 属性）
//关闭广告
<body>
<div class="box">
我是广告1
<div class="box1">X</div>
</div>
<div class="box">
我是广告2
<div class="box1">X</div>
</div>
<div class="box">
我是广告3
<div class="box1">X</div>
</div>
</div>
<script>
//单个广告
// const box1 = document.querySelector('.box1')
// box1.addEventListener('click', function () {
// this.parentNode.style.display = 'none'
// })
//多个广告
const closeBtn = document.querySelectorAll('.box1')
for (let i = 0; i < closeBtn.length; i++) {
closeBtn[i].addEventListener('click', function () {
this.parentNode.style.display = 'none'
})
}
</script>
</body>
得到的是伪数组，包含所有的亲儿子
2.3 增加节点（重点）
<script>
// 1.创建节点
const li = document.createElement('li')
// 2.追加节点
const ul = document.querySelector('ul')
li.innerHTML = '我是新增的li'
// ul.appendChild(li) //尾增
ul.insertBefore(li, ul.children[0]) //将li插入到ul中第一个li的前面
</script> <script>
// 1. 重构
let data = [
{
src: 'images/course01.png',
title: 'Think PHP 5.0 博客系统实战项目演练',
num: 1125
},
{
src: 'images/course02.png',
title: 'Android 网络动态图片加载实战',
num: 357
},
{
src: 'images/course03.png',
title: 'Angular2 大前端商城实战项目演练',
num: 22250
},
{
src: 'images/course04.png',
title: 'Android APP 实战项目演练',
num: 389
},
{
src: 'images/course05.png',
title: 'UGUI 源码深度分析案例',
num: 124
},
{
src: 'images/course06.png',
title: 'Kami2首页界面切换效果实战演练',
num: 432
},
{
src: 'images/course07.png',
title: 'UNITY 从入门到精通实战案例',
num: 888
},
{
src: 'images/course08.png',
title: 'Cocos 深度学习你不会错过的实战',
num: 590
},
]
const ul = document.querySelector('.box-bd ul')
// 1. 根据数据的个数，创建 对应的小li
for (let i = 0; i < data.length; i++) {
// 2. 创建新的小li
const li = document.createElement('li')
// 把内容给li
li.innerHTML = `
<a href="#">
<img src=${data[i].src} alt="">
<h4>
${data[i].title}
</h4>
<div class="info">
<span>高级</span> • <span>${data[i].num}</span>人在学习
</div>
</a>
`
// 3. ul追加小li
ul.appendChild(li)
}
</script>
const ul = document.querySelector('ul')
// 克隆节点 元素.cloneNode(true) 深克隆 将被克隆元素中所有内容都克隆
//.cloneNode(false) 浅克隆 只克隆标签
const li1 = ul.children[0].cloneNode(true)
// console.log(li1);
ul.appendChild(li1)2.4 删除节点
ul.removeChild(ul.children[0])3. M端事件（了解）
4. JS插件
5. 案例—学生信息表
<script>
// 获取元素
const uname = document.querySelector('.uname')
const age = document.querySelector('.age')
const gender = document.querySelector('.gender')
const salary = document.querySelector('.salary')
const city = document.querySelector('.city')
const tbody = document.querySelector('tbody')
// 获取所有带有name属性的 元素
const items = document.querySelectorAll('[name]')
// 声明一个空的数组， 增加和删除都是对这个数组进行操作
const arr = []
// 1. 录入模块
// 1.1 表单提交事件
const info = document.querySelector('.info')
info.addEventListener('submit', function (e) {
// 阻止默认行为 不跳转
e.preventDefault()
// console.log(11)
// 这里进行表单验证 如果不通过，直接中断，不需要添加数据
// 先遍历循环
for (let i = 0; i < items.length; i++) {
if (items[i].value === '') {
return alert('输入内容不能为空')
}
}
// 创建新的对象 取得表单元素的值
const obj = {
stuId: arr.length + 1,
uname: uname.value,
age: age.value,
gender: gender.value,
salary: salary.value,
city: city.value
}
// console.log(obj)
arr.push(obj) // 追加给数组里面
this.reset() // 清空表单 重置
render() // 调用渲染函数
})
// 2. 渲染函数 因为增加和删除都需要渲染
function render() {
// 先清空tbody 以前的行 ，把最新数组里面的数据渲染完毕
tbody.innerHTML = ''
// 遍历arr数组
for (let i = 0; i < arr.length; i++) {
// 生成 tr
const tr = document.createElement('tr')
tr.innerHTML = `
<td>${arr[i].stuId}</td>
<td>${arr[i].uname}</td>
<td>${arr[i].age}</td>
<td>${arr[i].gender}</td>
<td>${arr[i].salary}</td>
<td>${arr[i].city}</td>
<td>
<a href="javascript:" data-id=${i}>删除</a>
</td>
`
// 追加元素 父元素.appendChild(子元素)
tbody.appendChild(tr)
}
}
// 3. 删除操作
// 3.1 事件委托 tbody
tbody.addEventListener('click', function (e) {
if (e.target.tagName === 'A') {
// 得到当前元素的自定义属性 data-id
// console.log(e.target.dataset.id)
// 删除arr 数组里面对应的数据
arr.splice(e.target.dataset.id, 1)
render() // 重新渲染一次
}
})
</script>