常见的DOM操作有哪些
（1）DOM节点获取
DOM 节点的获取的API及使用：
getElementById() // 根据id查询
getElementsByTagName // 根据标签名查询
getElementsByClassName // 根据类名查询
querySelectorAll // 根据 css 选择器查询
<div id="div">我是div</div>
<p class="p">p1</p>
<p class="p">p2</p>
// 根据id查询
document.getElementById('div') // 返回会div标签元素 <div id="div">我是div</div>
// 根据标签名获取
document.getElementsByTagName('div') // 返回div标签的集合
// 根据类名查询
document.getElementsByClassName('p') // 返回所有标签类名为p的集合
querySelectorAll // 可以实现上面的操作，返回的也是集合
（2）创建DOM节点
新创建一个节点，并把它添加到指定节点的后面
<html>
<head>
<title>DEMO</title>
</head>
<body>
<div class="container">
<h3>我是标题描述</h1>
</div>
</body>
</html>
现在要将一个有内容的span节点添加到h3标签节点后面
// 1. 获取父节点
let container = document.querySelector('.container')
// 2. 创建新节点
let span = document.createElement('span')
// 3. 设置span节点的内容
span.innerHtml = 'hello span'
// 4. 把新创建的元素添加到父节点里面
container.appenChild(span)
(3)删除DOM节点
<div class="container">
<h3 id="title">我是要被删除的内容</h3>
</div>
现在需要把id为title的元素删除
// 1. 获取父元素节点
let container = document.querySelector('.container')
// 2. 获取需要删除的元素
let title = document.querySelector('#title')
// 3. 删除元素
container.removeChild(title)
修改DOM元素 （移动DOM元素）
<div class="container">
<h3 id="t1">t1</h3>
<h3 id="t2">t2</h3>
</div>
现在需要调换t1和t2的位置
// 1. 获取父元素节点
let container = document.querySelector('.container')
// 获取需要调换位置的两个元素
let t1 = document.querySelector('#t1')
let t2 = document.querySelector('#t2')
// 交换两个元素的位置，把t2换到t1的前面
container.insertBefore(t2, t1)
