学习JS中的DOM节点以及操作
dom操作在js中可以说是非常常见了吧，很多网页的小功能的实现，比如一些元素的增删操作等都可以用js来实现。那么在dom中我们需要知道些什么才能完成一些功能的实现呢？今天这篇文章就先简单的带大家入一下js中dom操作的门吧！！
一、dom树的节点
1、 dom节点分为三大类: 元素节点(标签节点)、属性节点和文本节点。
属性节点和文本节点都属于元素节点的子节点。 因此操作时，需先选中元素节点，再修改属性和文本。
【查看元素节点】
1、 使用getelement系列方法：
具体的html代码如下图：
//通过id来查看元素属性
var li = document.getelementbyid("first");
//通过类名来查看元素属性
var lis1 = document.getelementsbyclassname("cls");
//通过名字来查看元素属性
var lis2 = document.getelementsbyname("name");
//通过标签名来查看元素属性
var lis3 = document.getelementsbytagname("li");
注意事项：
① id不能重名，如果id重复，只能取到第一个。
② 获取元素节点时，必须等到dom树加载完成后才能获取。
两种处理方式：
a.将js写在文档最后；
b.将代码写入window.onload函数中；
③ 通过getelements系列取到的为数组格式，操作时必须取到其中的每一个元素，才能进行操作，而不能直接对数组进行操作。
document.getelementsbytagname("li")[0].click = function(){}
④ 这一系列方法，也可以先选中一个dom节点，在从选中的dom节点中，选择需要的节点：
document.getelementbyid("div1").getelementsbytagname("li");
【通过queryselector系列方法】
① 传入一个选择器名称，返回第一个找到的元素。 通常用于查找id：
var dq1 = document.queryselector("#id");
② 传入一个选择器名称，返回所有找到的元素，无论找到几个，都返回数组格式。这种方法比较全能，不管什么属性都可以准确地找到。
var dqs1 = document.queryselectorall("#div1 li");
【查看\设置属性节点】
1、 查看属性节点：.getattribute("属性名");
2、 设置属性节点：.setattribute("属性名","属性值");
注意事项：.setattribute() 在老版本ie中会存在兼容性问题，可以使用.符号代替。
【js修改css的多种方式】
1、 使用setattribute设置class和style。
document.getelementbyid("first").setattribute("class","class1");
document.getelementbyid("first").setattribute("style","color:red;");
2、使用.classname添加一个class选择器。
document.getelementbyid("first").classname = "class1";
3、 使用.style.样式 直接修改单个样式。 注意样式名必须使用驼峰命名法。
document.getelementbyid("first").style.fontsize = "18px";
4、 使用.style 或 .style.csstext 添加一串行级样式：
// ie不兼容
document.getelementbyid("first").style = "color:red;";
//所有浏览器兼容
document.getelementbyid("first").style.csstext = "color:red;";
【查看/设置文本节点】
1、.innerhtml: 取到或设置一个节点中的html代码。
2、.innertext: 取到或设置一个节点中的文本，不能设置html代码。
二、层次节点操作
1. .childnodes： 获取当前节点的所有子节点（包括元素节点和文本节点）。
.children： 获取当前节点的所有元素子节点（不包含文本节点）。
2. .parentnode: 获取当前节点的父节点。
3. .firstchild： 获取第一个子节点，包括回车等文本节点；
.firstelementchild： 获取第一个元素节点。 不含文本节点；
.lastchild： 获取最后一个子节点，包括回车等文本节点；
.lastelementchild： 获取最后一个子节点，不含文本节点；
4. .previoussibling： 获取当前节点的前一个兄弟节点，包括文本节点；
.previouselementsibling： 获取当前节点的前一个元素兄弟节点；
.nextsibling：获取当前节点的后一个兄弟节点，包括文本节点；
.nextelementsibling：获取当前节点的后一个元素兄弟节点；
5. .attributes: 获取当前节点的所有属性节点。 返回数组格式。
【创建并新增节点】
1. document.createelement("标签名")： 创建一个新节点，并将创建的新节点返回。
需要配合.setattribute()为新节点设置属性。
2. 父节点.insertbefore(新节点,目标节点)： 在父节点中，将新节点插入到目标节点之前。
父节点.appendchild(新节点)： 在父节点的内部最后，插入一个新节点。
3. 源节点.clonenode(true)： 克隆一个节点。
传入true表示克隆源节点以及源节点的所有子节点；
传入false或不传，表示只克隆当前节点，而不克隆子节点。
【删除、替换节点】
1. 父节点.removechild(子节点)： 从父节点中，删除指定子节点。
2. 父节点.replacechild(新节点,老节点)： 从父节点中，用新节点替换老节点。