基础知识点掌握：
1.DOM节点
首先DOM树当做一颗到着生长的树，DOM树里面的每一个内容称为节点
节点类型：
- 属性节点
- 元素节点
- 文本节点
- 其他
2.查找节点：
查找节点分为3个类型：
- 父节点
- 子节点
- 兄弟节点
（1）父节点使用 parentNode 属性
使用模板 ：子元素.parentNode
<div class="one">
<div class="two">我是one的儿子</div>
</div>
<script>
//查找节点
const two = document.querySelector('.two')
console.log(two.parentNode)
</script>（2）子节点使用 children属性
使用模板：父元素.children (注意：得到的是一个伪数组，选择的是亲儿子)
<div class="students">
<p class="one">1</p>
<p class="one">2</p>
<p class="one">3</p>
<p class="one">4</p>
<p class="one">5</p>
</div>
<script>
// 子节点的使用 childNodes（可以获取所有子节点包括文本空格换行注释等） 或 children（仅获取所有元素节点，返回的还有一个伪数组）
const div = document.querySelector('div')
console.log('div.children') //得到的是伪数组，选择的是亲儿子
</script> （3）兄弟节点使用 ：
下一个兄弟节点 nextElementSibing 属性
上一个兄弟节点 previousElementSibing 属性
使用模板：同级元素.nextElementSibing 或 同级元素.previousElementSibing
<div class="students">
<p class="one">1</p>
<p class="one">2</p>
<p class="one">3</p>
<p class="one">4</p>
<p class="one">5</p>
</div>
<script>
//兄弟关系查找
//1.下一个兄弟节点 nextElementSibing 属性
//2.上一个兄弟节点 previousElementSibing 属性
const one2 = document.querySelector('div p:nth-child(2)')
console.log(one2.previousElementSibling) //上一个兄弟
console.log(one2.nextElementSibling) //下一个兄弟
</script>3.增加节点：很多时候我们需要使用到增加节点的功能，比如给一个视频进行评论
其中分为2个步骤：1）创建一个新的节点(docmennt.createElement('标签名')
const li = document.createElement（'li'）2）追加节点
（插入到父元素里面的最后：父元素：appendchild(要插入的元素)）
ul.appendchild(li)(插入到某个元素的前面：当前元素.insertBefore(需要插入元素,元素在哪个前面)
one.insertBefore(div,one.children[0])整体代码：
<div class="one">
<div></div>
<div></div>
</div>
<div class="two"></div>
<script>
// 获取第一个div
const one = document.querySelector('.one')
//1.创建一个新的节点
const div = document.createElement('div')
//2.追加接地单，插入到父元素的最后一个子元素
div.innerHTML = '我是第一个div的儿子'
// one.appendChild(div)
//插入到某个元素的前面，使用 父元素.insertBefore(要插入的元素，哪一个元素之前)
one.insertBefore(div,one.children[0])
</script>4.克隆节点：将原有的节点复制放到指定位置
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
//1.获得元素
const ul = document.querySelector('ul')
//2.克隆元素
const li = ul.children[0].cloneNode(true)
//3.追加节点
ul.appendChild(li)
</script>5.删除节点：注意删除节点和隐藏节点是不一样的，隐藏节点，隐藏后它还是占用位置display：none
// 删除节点 父元素.removeChlid(子元素)
const ul = document.querySelector('ul')
ul.removeChild(ul.children[0])学生管理系统管理页面实现（增加，删除）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>学生信息管理</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<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>
<!--
<tr>
<td>1001</td>
<td>欧阳霸天</td>
<td>19</td>
<td>男</td>
<td>15000</td>
<td>上海</td>
<td>
<a href="javascript:">删除</a>
</td>
</tr>
-->
</tbody>
</table>
<script>
// 获取所有带name属性的元素
const item = document.querySelectorAll('[name]')
// 创建数组
const arr = []
//获取元素
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')
// 表单提交事件
const info = document.querySelector('.info')
info.addEventListener('submit', function(e) {
// 阻止表单默认跳转行为
e.preventDefault()
// 进行表单验证，如果不通过直接中断，不进行添加元素
for(let i = 0;i <item.length; i++) {
if(item[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)
// console.log(arr)
// 清空表单
this.reset()
render()
})
// 渲染函数
function render() {
// 先清空tbody，把最新数组里面得到数据渲染完毕
tbody.innerHTML = ''
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>
`
// 追加元素
tbody.appendChild(tr)
}
}
// 数据删除
tbody.addEventListener('click',function(e) {
if(e.target.tagName === 'A') {
// 使用自己定义属性data-id
arr.splice(e.target.dataset.id,1)
render()
}
})
</script>
</body>
</html>
