一、日期对象
获取时间戳的方法，分别为 getTime 和 Date.now 和 +new Date()
// 1. 实例化const date = new Date()// 2. 获取时间戳console.log(date.getTime())
// 还有一种获取时间戳的方法console.log(+new Date())// 还有一种获取时间戳的方法console.log(Date.now())
二、DOM 节点
DOM节点的类型
- DOM树里每一个内容都称之为节点
- 节点类型：元素节点，所有的标签 比如 body、 div。html 是根节点。 属性节点，所有的属性 比如 href。文本节点，所有的文本。其他
（1）查找父节点
parentNode 属性，返回最近一级的父节点 找不到返回为null
（2)查找子节点
childNodes：获得所有子节点、包括文本节点（空格、换行）、注释节点等
children 属性 （重点）
- 仅获得所有元素节点
- 返回的还是一个伪数组
（3）查找兄弟结点
下一个兄弟节点：nextElementSibling 属性
上一个兄弟节点：previousElementSibling 属性
（4）插入（增加）节点
a:.创建节点
即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点
b:追加节点
要想在界面看到，还得插入到某个父元素中,插入到父元素的最后一个子元素:
插入到父元素中某个子元素的前面
（5）删除节点
若一个节点在页面中已不需要时，可以删除它
l 在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除
三、综合案例
要求：根据输入的内容注册学生信息，点击录入按钮增加学生信息列，点击对应的删除按钮可以删除对应的信息列
<!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></head><style>.box {margin: 0 auto;text-align: center;}.box .formbox {width: 1000px;height: 80px;line-height: 80px;margin: 0 auto;}input {width: 100px;margin-right: 20px;}select {margin-right: 20px;width: 80px;}button {background-color: rgb(57, 57, 97);color: aliceblue;width: 80px;}.tablebox {width: 800px;margin: 0 auto;}table {border-collapse: collapse;}th {width: 111px;padding: 10px;background: #cfe5ff;font-size: 20px;font-weight: 400;}td,th {border: 1px solid #b8daff;}td {padding: 10px;color: #666;text-align: center;font-size: 16px;}tbody tr {background: #fff;}.delete {border: 0;width: 40px;background-color: #fff;color: rgb(24, 21, 21);border-bottom: 1px solid rgb(102, 137, 240);}</style><body><div class="box"><h1>学生注册信息表</h1><div class="formbox"><form action="#">姓名：<input class="name" name="name" /> 年龄：<inputclass="age"name="age"/>性别：<select class="sex" name="sex"><option value="男">男</option><option value="女">女</option></select>班级：<input class="banji" name="banji" /> 城市：<selectclass="city"name="city"><option>北京</option><option>上海</option><option>广州</option><option>深圳</option></select><button class="luru">录入</button></form></div><h2>信息榜</h2><div class="tablebox"><table><thead><th>学号</th><th>姓名</th><th>年龄</th><th>性别</th><th>班级</th><th>城市</th><th>操作</th></thead><tbody></tbody></table></div></div><script>const name = document.querySelector(".name");const age = document.querySelector(".age");const sex = document.querySelector(".sex");const city = document.querySelector(".city");const banji = document.querySelector(".banji");const tbody = document.querySelector("tbody");const arr = [];const btn = document.querySelector(".luru");// 获取所有带有name属性的 元素const items = document.querySelectorAll("[name]");btn.addEventListener("click", function (e) {// 阻止默认行为 不跳转e.preventDefault();for (let i = 0; i < items.length; i++) {if (items[i].value == "") {return alert("输入不能为空");}}let obj = {id: arr.length + 1,name: name.value,age: age.value,sex: sex.value,banji: banji.value,city: city.value,};arr.push(obj);render();});// 点击录入时调用的函数function render() {// 先清空tbody 以前的行 ，把最新数组里面的数据渲染完毕tbody.innerHTML = "";for (let j = 0; j < arr.length; j++) {let node = document.createElement("tr");node.innerHTML = `<td>${arr[j].id}</td><td>${arr[j].name}</td><td>${arr[j].age}</td><td>${arr[j].sex}</td><td>${arr[j].banji}</td><td>${arr[j].city}</td><td><a class="delete" data-id=${j}>删除</a></td>`;// 追加元素 父元素.appendChild(子元素)tbody.appendChild(node);}}tbody.addEventListener("click", function (e) {console.log(e.target.tagName);if (e.target.tagName == "A") {arr.splice(e.target.dataset.id, 1);}render();});</script></body>
</html>
