8.节点操作
（1）查找节点
节点关系：针对的找亲戚返回的都是对象。
1.查找父节点
语法：子元素.parentNode
备注：返回最近一级的父节点，找不到返回null。
<body>
<div class="yeye">
<div class="dad">
<div class="baby">x</div>
</div>
</div>
<script>
const baby = document.querySelector('.baby')
console.log(baby) // 返回dom对象(div.baby)
console.log(baby.parentNode) // 返回dom对象(div.dad)
console.log(baby.parentNode.parentNode) // 返回dom对象(div.yeye)
</script>
</body>
2.查找子节点
childNodes：获得所有子节点，包括文本节点（空格、换行）、注释节点
children属性（重点）：仅获得所有元素节点；返回的还是一个伪数组
语法：父元素.children
3.查找兄弟节点
下一个兄弟：nextElementSibling
上一个兄弟：previousElementSibling
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
// const ul = document.querySelector('ul') // ul
// console.log(ul.children) // 得到伪数组 选择的是 亲儿子
const li2 = document.querySelector('ul li:nth-child(2)')
console.log(li2.previousElementSibling) // 上一个兄弟
console.log(li2.nextElementSibling) // 下一个兄弟
</script>
</body>
（2）增加节点
在页面中增加元素。
操作：创建一个新的节点，把创建的新的节点放入到指定的元素内部
1.创建节点
创造一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点
语法：document.createElement('标签名')
2.追加节点
要想在界面看到，得插入到某个父元素中。
插入到父元素的最后一个子元素：父元素.appendChild(要插入的元素)
<body>
<ul>
<li>我是老大</li>
</ul>
<script>
const ul = document.querySelector('ul')
const li = document.createElement('li')
li.innerHTML = '我是li'
ul.appendChild(li)
</script>
</body>
插入到父元素中某个子元素的前面：父元素.insertBefore(要插入的元素，在哪个元素前面)
ul.insertBefore(li, ul.children[0]) //children为一个数组
3.克隆节点
复制一个原有的节点，把复制的节点放入指定的元素内部。
语法：元素.cloneNode(布尔值)
备注：布尔值若为true，则代表克隆时会包含后代节点一起克隆；若为false，则代表克隆时不包含后代节点。默认为false。
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
const ul = document.querySelector('ul')
// 1 克隆节点 元素.cloneNode(true)
const li1 = ul.children[0].cloneNode(true)
// 2. 追加
ul.appendChild(li1)
//或者克隆追加写在一起:ul.appendChild(ul.children[0].cloneNode(true))
</script>
</body>
4.删除节点
删除现有的 DOM 节点：首先由父节点删除子节点，其次是要删除哪个子节点。
语法：父元素.removeChild(要删除的元素)
备注：如不存在父子关系则删除不成功。
<body>
<div class="box">123</div>
<ul>
<li>没用了</li>
</ul>
<script>
const ul = document.querySelector('ul')
// 删除节点 父元素.removeChlid(子元素)
ul.removeChild(ul.children[0])
</script>
</body>
备注：删除节点直接从html删除节点，隐藏节点（display：none）知识隐藏，实际上还是存在的。
9.M端事件（移动端）
触屏事件touch，touch对象代表一个触摸点，触摸事件可响应用户手指对屏幕或触控板的操作。
| 触屏事件 | 说明 |
|---|---|
| touchstart | 手指触摸到一个DOM元素时触发 |
| touchmove | 手指在一个DOM元素上滑动时触发 |
| touchend | 手指从一个DOM元素上移开时触发 |
<body>
<div></div>
<script>
const div = document.querySelector('div')
// 1. 触摸
div.addEventListener('touchstart', function () {
console.log('开始摸我了')
})
// 2. 离开
div.addEventListener('touchend', function () {
console.log('离开了')
})
// 3. 移动
div.addEventListener('touchmove', function () {
console.log('一直摸，移动')
})
</script>
</body>
swiper插件使用的网站：Swiper中文网-轮播图幻灯片js插件,H5页面前端开发
学生信息表案例：
<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>
</tbody>
</table>
<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)
// console.log(arr)
// 清空表单 重置
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)
console.log(arr)
// 从新渲染一次
render()
}
})
</script>
</body>
