获取DOM节点的几种方式与区别
DOM是一个树形结构，操作一个DOM节点，实际上就是这几个操作：更新，删除，添加，遍历。
在操作DOM几点之前，需要通过各种方式拿到这个DOM节点，常用的方法有：
一，通过元素类型的方法来操作：
1.document.getElementById();//id名，在实际开发中较少使用，选择器多用class id 一般只用在顶层存在，不能太过于依赖id；
2.document.getElementsByTagName（）；//标签名
3.document.getElementsByClassName(); //类名
4.document.getElementsByName();//name 属性值，一般不用
5.document.querySelector();//css选择符模式，返回与该模式匹配的第一个元素，结果为一个元素；如果没找到匹配的元素，则返回null
6.document.querySelectorAll(); //css选择符模式，返回与该模式的所有元素，结果为一个类数组；
注意：
*前缀为document，意思是在document节点下调用这些方法，当然也可以在其他元素节点下调用，如：
<div id="1">
<p>lihao</p>
<p>niubi</p>
<p>dui</p>
</div>
<p>xuexi</p>
<script>
var div=document.getElementById("1");
var p1=div.getElementsByTagName("p");//在div下调用
alert(p1.length);//3 div节点下的p元素只有3个
var p2 = document.getElementsByTagName("p");
alert(p2.length);//4 document节点下的p元素有四个
</script>
*querySelector()和querySelectorAll()方法，最后两个为静态的，不是实时的，保存的是当时的状态，
是一个副本，既：在以后的代码中通过方法使所选元素发生了变化，但该值依然不变，因此使用有局限性，
一般不用，除非就想得到副本。
举例如下;
<div id="myDiv">
<p>html</p>
<p>css</p>
<p>javascript</p>
</div>
<p>jquery</p>
<script>
var div=document.getElementById("myDiv");
var p1=div.getElementsByTagName("p");
alert(p1.length);//3
var p2 = document.getElementsByTagName("p");
alert(p2.length);//4
var p3=document.querySelectorAll("p");
alert(p3.length);//4
document.body.appendChild(document.createElement("p"));//创建新元素P,并添加到body中
alert(p1.length);//3 div节点下的p元素依然只有三个
alert(p2.length);//5 在body中添加了一个新的P元素，该方法是“动态的”，因此，长度发生了变化
alert(p3.length);//4 该方法是“静态的”，因此，无论发生什么变化，p3的值依然不会发生改变二，根据关系树来选择（遍历节点树）：
【介绍节点：
DOM（文档对象模型）可以将任何HTML,XML文档描绘成一个多层的节点树。所有的页面都表现以一个特定节点为根节点的树形结构。HTML文档中根节点为document节点。
所有节点都有nodeType属性，代表节点的不同类型，通过nodeType属性可以判断节点的类型。经常使用的节点主要有以下几种类型：
1.Element类型（元素节点）：nodeType值为1；
2.Text类型（文本节点）;nodeType值为 3；
3.Comment类型（注释节点）:nodetype 值为 8；
4.Document类型（document节点）：nodeType值为9；其规定的一些常用的属性有document.boy ，document.head 分别为Html中的《body》，《head》
document.documentElement 为《HTML》标签
所有的节点都有 hasChildeNodes（）方法 判断有无子节点 有一个或多个子节点时返回true】
通过一些属性可以遍历节点树：
1.parentNode//获取所选几点的父节点，最高层的几点为#document
2.childNodes//获取所选节点的子节点们
3.firstChild //获取所选节点的第一个节点
4.lastChild// 获取所选节点的最后一个节点
5.nextSibling //获取所需按节点的后一个兄弟节点 列表中最后一个节点的nextSibling属性值为null
6.prviousSibling//获取所需按节点的前一个兄弟节点 列表中的第一个节点的prviousSibling属性值为null
<div id="myDiv">
<p>html</p>
<p>css</p>
<p>javascript</p>
</div>
<p>jquery</p>
<script>
var div = document.getElementById("myDiv");
alert(div.childNodes.length);//7
</script>在上边例子中可以看出，div元素节点的所有子节点一共有7个，在后台查看可以得知：div元素节点的所有子节点包括 4个文本节点（在此全为空文本）和三个元素节点
<div id="myDiv">第一个
文本节点<p>html</p>第二个
文本节点<p>css</p>第三个
文本节点<p>javascript</p>第四个
文本节点</div>
三、基于元素节点树的遍历（遍历元素节点树）：
- parentElement //返回当前元素的父元素节点（IE9以下不兼容）
- children // 返回当前元素的元素子节点
- firstElementChild //返回的是第一个元素子节点（IE9以下不兼容）
- lastElementChild //返回的是最后一个元素子节点（IE9以下不兼容）
- nextElementSibling //返回的是后一个兄弟元素节点（IE9以下不兼容）
- previousElementSibling //返回的是前一个兄弟元素节点（IE9以下不兼容）
遍历元素节点虽然方便，但是除了children属性外，其他的属性则IE9以下不兼容
注意一点：这些获取节点的方式，返回值要么是一个特定的节点，要么是一个集合HTMLCollection,这个节点的集合是一个类数组
-----------------------------------------------------------------------------------------------------------------------
获取节点的方法：
nodeType------节点类型，元素节点是1，文本节点是3.
firstChild----该元素节点包含的第一个子节点
lastChild---该元素节点包含的最后一个子节点
nextSibling----该节点的后一个兄弟节点
previousSibling---该节点的前一个兄弟节点
childNodes----子节点列表，可以通过node.childNodes[index]来获取子节点
nodeName----节点名称，对于元素节点，返回tagName，对于文本返回#text
DOM方法大全：
document.createElement(TagName) --创建指定元素
dom.appendChild(子元素)----添加新节点
dom.getAttribute(属性名)----返回元素的属性
dom.setAttribute(属性名，属性值)----设置元素属性
dom.removeAtrribute(属性名)----删除属性
dom.removeChild(子元素)----删除节点
dom.replaceChild(新元素，子元素)----替换节点
dom.hasChildNodes()-----是否有子元素
DOM操作——怎样添加、移除、移动、复制、创建和查找节点。
（1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
（2）添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子节点前插入一个新的子节点
（3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
getElementById() //通过元素Id，唯一性