JS API操作节点的一些方式
操作节点：查、增、删
查询节点：
1、查找父元素：子元素.parenNode 。查找最近的父元素，返回DOM元素
// 查找所有的span元素
let spans = document.querySelectorAll('span')
// 为每一个span绑定单击事件--遍历
spans.forEach(function(span) {
span.addEventListener('click', function() {
// 通过当前span查找父节点
// parentNode:通过当前节点查找最近一级的父节点，获取到的是dom元素
console.log(this.parentNode)
this.parentNode.style.display = 'none'
})
})
2、查找子集：父元素.children 。 返回一个伪数组
//srcCity是父元素
let options = srcCity.children
// // 遍历伪数组，将元素一个一个追加到右侧容器中
for (let i = 0; i < options.length; ) {
console.log(options[i])
}
})
3、查找兄弟：
3.1、nextElementSibling ： 下一个兄弟元素
let p = document.querySelector('p')
console.log(p.nextElementSibling);
3.2、previousElementSibling ： 上一个兄弟元素
let p = document.querySelector('p')
console.log(p.previousElementSibling);
增加节点：
1、创建一个新节点：document.createElement(标签)
1.1创建完节点还需要给节点设置属性和样式
内容设置：innerText innerHTML
属性设置： 元素.属性
2、追加节点:
2.1、父元素.appendChild(child)：将child的元素添加到父元素里面(最后面)
box.appendChild(newP)
2.2、父元素.insertBofore(child, 父元素.children[0])：将child元素添加到父元素的最前面去； 一定要传递第二个参数，否则报错。
box.insertBefore(newP, box.children[0])
3、克隆节点：模板元素.cloneNode(布尔值) false: 浅拷贝。只拷贝元素结构 true: 深拷贝。拷贝元素结构及内容 作用：用于需要创建一个复杂的标签 前提: 页面上有一个模板节点
// 按钮
let btn = document.querySelector('button')
// 源元素
let originP = document.querySelector('.first > p')
// 目标容器
let second = document.querySelector('.second')
//绑定单击事件
btn.addEventListener('click', function() {
// 元素.cloneNode():可以将指定的元素复制一份
second.appendChild(originP.cloneNode(true))
})
删除节点
1、父元素.removeChild(child)：通过父元素删除直接子元素 2、元素.remove():删除元素本身
