目录
一、获取元素的通常使用方法
1、利用DOM提供的方法获取元素
document.getElementByld()
document.getElementsBtTagName()
document.querySeletor等
逻辑性不强且繁琐
2、利用节点的层次关系来获取元素
利用父子兄弟节点关系获取元素
逻辑性强，但是兼容性稍差
二、节点的概述
网页中的所有内容都是节点(标签、属性、文本、注释等)，在DOM中，节点使用node来表示
HTML DOM 树种的所有节点均可通过JavaScript进行访问，所有HTML元素（节点）均可被修改
也可以创建和删除。 一般情况下，节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeVaule(节点值)这三个基本属性
元素节点 nodeTpye 为 1
属性节点 nodeTpye 为 2
文本节点 nodeType 为 3 (文本节点包含文字、空格、换行等)
在我们实际开发中，节点操作主要操作的是元素节点
三、节点的类型
利用DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系
1、获取父级节点：node.parentNode
//获取erweima的父元素
var erweima = document.querySelector('.erweima')
console.log(erweima.parentNode);注意：
得到是离元素最近的父级节点(类似于它的亲爸爸) 如果找不到父节点就返回为null
2、获取子级节点：
方法一：parentNode.childNodes(标准)
返回包含指定节点的子节点的集合，该集合为即时更新的集合,childNodes 所有子节点 包含 元素节点 文本节点等等
如果只想要获得里面的元素节点，则需要专门处理。所以我们一般不提倡使用childNodes
代码展示：
var ul = document.querySelector('ul')
for(var i = 0; i < ul.childNodes.length; i++){
if(ul.childNodes[i].nodeType == 1){
// ul.childNodes[i]是元素节点
console.log(ul.childNodes[i]);
}
}结果展示：
方法二：parsentNode.childern(非标准)
获取所有的子元素节点 实际开发常用。
parsentNode.childern是一个只读属性，返回所以的子元素节点。它只返回子元素节点，其余节点不返回(这个是我们重点掌握的)。虽然children是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用。
3、获取第一个元素和最后一个元素
方法一：
parentNode.firstChild
返回parentNode第一个子节点，找不到则返回null。同样，也是包含所有的节点
parentNode.lastChild
返回parentNode最后一个节点，找不到则返回null。同样，也是包含所有的节点
方法二：
parentNode.firstElementChild 返回parentNode第一个子节点
parentNode.lastElementChild 返回parentNode最后一个节点
这两个方法友兼容性问题，IE9以上才支持
方法三：
parentNode.chilren[0] 返回parentNode的第一个元素节点
parentNode.children[parentNode.children.length-1] 返回parentNode的最后一个元素节点
这是我们在实际开发中所用的写法，它既没有兼容性问题又返回第一个子元素或者最后一个元素
4、获取兄弟节点
方法一：
node.nextSibling
返回当前元素的下一个兄弟节点，找不到则返回null。同样，也是包含所有的节点
node.previousSibling
返回当前元素的上一个兄弟节点，找不到则返回null。同样，也是包含所有的节点
方法二：
node.nextElementSibling 返回当前元素的下一个兄弟元素节点，找不到则返回null。
node.previousElementSibling 返回当前元素的上一个兄弟元素节点，找不到则返回null。
注意：这两个方法友兼容性问题，IE9以上才支持
如何解决兼容性问题：封装一个兼容性的函数
代码展示：
获取element的下一个兄弟元素节点的函数
//获取element的下一个兄弟元素节点的函数
function getNextElementSibliing(element) {
var el = element;
while (el = el.nextSibling) {
if(el.nodeType === 1) {
return el;
}
}
return null;
}获取element的上一个兄弟元素节点的函数
//获取element的上一个兄弟元素节点的函数
function getpreviousElementSibling(element){
var el = element;
while(el=el.previousSibling){
if(el.nodeType===1){
return el;
}
}
return null;
}
</script>
四、创建和添加节点
1、创建节点
document.createElement('tagName') 创建tagName为元素节点的名字
document.createElement()方法创建由tagName 指定的HTML元素。因为这次元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。
2、添加节点：
我们想要页面添加一个元素：
（1）创建元素
（2）添加元素
node.appendChild(child) 将一个节点添加到指定父节点node的子节点列表的末尾
node 父级 child 子级 后面追加元素 类似于数组中的push
//在ul里面添加一个li元素
var ul = document.querySelector('ul')
ul.appendChild(li);（3）添加指定节点
node.insertBefore(child,指定元素) 将一个节点添加到指定父节点node中的指定元素的前面
var lili = document.createElement('li')
ul.insertBefore(lili,ul.children[0])3、删除节点
node.removeChild(child)
在父节点node中删除子节点child，并返回删除的节点
如：ul.removeChild(ul.children[0]);删除ul中的第一个元素节点
注意：removeChild只能删除指定的一个节点
4、复制节点（克隆节点）
node.cloneNode()
node.cloneNode()方法返回调用函数的节点的第一个副本。也称为克隆节点/拷贝节点
注意：
1、如果括号参数为空或者false，则是浅拷贝，即只克隆赋值节点本身，不克隆里面的子节点
2、 node.cloneNode(false) 括号参数为空或者false，则是浅拷贝，即只复制标签，不复制里面的内容
3、 node.cloneNode(true) 括号为true，则是深拷贝，即复制标签，赋值里面的内容
—— 听闻少年二字，应与平庸相斥