APIs学习记录-日期对象,DOM的增删改查,学生信息表案例
一.学习内容
1)日期对象(Date)
- 实例化
const date = new Date() // 默认此时此刻的时间
const date = new Date('2023-04-13') // 自定义时间
- 方法
const year = date.getFullYear()
getFullYear() 四位年份
getMonth() 0~11
getDate() 月份中每一天
getDay() 星期几 0~6
getHours() 0~23
getMinutes() 0~59
getSeconds() 0~59 - 时间戳
时间戳是指1970年01月01日00时00分00秒起至现在的总秒数或毫秒数,它是一种特殊的计量时间的方式。
console.log(date.getTime())
console.log(+new Date())
console.log(Date.now)
- 倒计时案例
key:目标时间 - 现在时间 = 总秒数
h = parseInt( 总秒数 / 60 / 60 % 24)
m = parseInt( 总秒数 / 60 % 60)
s = parseInt( 总秒数 % 60)
2) DOM节点的增删改查
- 插入节点(重点是创建新的节点,和找到插入的位置)
相关语法:
creatElement
(动态创建任意DOM节点)
eg:const p = document.creatElement( 'p' )
cloneNode
(复制现有的DOM节点,参数true会复制所有的节点)
eg:const p2 = document.querySelector( 'p' ).cloneNode( true )
appendChild
(在末尾插入节点)
eg:document.querySelector( '.box' ).appendChild( p2 )
insertBefore
(在父节点中任意子节点前插入新节点)(下面的relative是一个子节点)
eg:document.querySelector( 'ul' ).insertBefore( li1, relative )
- 删除节点
相关语法:
removeChild
由父节点删除子节点,删除哪个子节点
eg:ul.removeChild( lis[0] )
// 删除ul里的第一个小li - 查找节点
相关语法:
子节点
childNodes
获取全部的子节点,回车换行会被认为是空白文字节点
children
只获得元素类型节点
父节点
parentNode
获取父节点
eg:this.parentNode.parentNode.style.color = 'red'
兄弟节点
previousSibling
前一个节点
nextSibling
后一个节点
二. 学生信息表案例(对象放入数组来增删数据)
功能:
- 能通过填写表单信息录入学生信息
- 能通过点击删除按钮删除学生信息
html结构,上面是填写信息表单模块,下面是展示信息模块
<h1>新增学员</h1>
<form class="info" autocomplete="off">
姓名:<input type="text" class="uname" name="uname" />
年龄:<input type="text" class="age" name="age" />
性别:
<select name="gender" class="gender">
<option value="男">男</option>
<option value="女">女</option>
</select>
薪资:<input type="text" class="salary" name="salary" />
就业城市:<select name="city" class="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
<option value="曹县">曹县</option>
</select>
<button class="add">录入</button>
</form>
<h1>就业榜</h1>
<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>薪资</th>
<th>就业城市</th>
<th>操作</th>
</tr>
</thead>
<tbody>
关键代码:
- 获取元素
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 = []
- 录入信息模块
const info = document.querySelector('.info')
info.addEventListener('submit', function (e) {
// 阻止默认行为 不跳转
e.preventDefault()
// 这里进行表单验证 如果不通过,直接中断,不需要添加数据
// 先遍历循环
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
}
// 对象追加给数组里面
arr.push(obj)
// 清空表单 重置
this.reset()
// 调用渲染函数
render()
})
- 渲染模块
function render() {
// 先清空tbody 以前的行 ,把最新数组里面的数据渲染完毕
tbody.innerHTML = ''
// 遍历arr数组
for (let i = 0; i < arr.length; i++) {
// 生成 tr, 只有这里用到DOM的知识
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)
}
}
- 删除模块
tbody.addEventListener('click', function (e) {
if (e.target.tagName === 'A') {
// 得到当前元素的自定义属性 data-id
// 删除arr 数组里面对应的数据
arr.splice(e.target.dataset.id, 1)
console.log(arr)
// 重新渲染一次
render()
}
})