什么是DOM？
DOM是w3c标准，全称Document Object Model，翻译为文档对象模型。DOM定义了表示和修改文档所需的方法。DOM对象，即为宿主对象，由浏览器厂商定义，用来操作HTML和XML功能的一类对象的集合。也有人称DOM是对HTML以及XML的标准编程接口。
DOM的基本操作
对于对象、数组，我们的基本操作都为增删改查插，对于DOM来说，也是相同。
增加
DOM的最基本的增有三种：
1. document.createElement();
2. //这个方法是创建一个元素节点，即标签，但是生成的标签在js里面，不会在页面生成，我们平时用的较多，建议重点掌握。
3. document.createTextNode();//创建文本节点
4. document.createComment();//创建注释节点
5. //DOM的增操作一般和插入操作一起
删除
DOM的删除有两种：谋杀和自杀。
1. parent.removeChild(要被删除的标签);
2. //相当于父杀子的谋杀，但实际上可以等同于剪切，被删除的值会被保留
3. ep:
4. var div = document.getElementsbyTagName('div')[0];//取出div标签
5. var span = document.getElementsbyTagName('span')[0];
6. var strong = document.createElement('strong');//创建strong标签
7. var i = document.creatElement('i');
8. div.insertBefore(strong,span);//把strong插入到span前面
9. div.insertBefore(i,strong);
10. div.removeChild(i); //删除i
11. //运行结果为--> <i> <i>
12. child.remove();
13. //可以理解为一个人不想存在，然后抹杀了自己的存在，即自杀，删除了就不在存在
14. strong.remove();//strong的自我删除
修改
在DOM里面，修改即替换
1. parentNode.replaceChild(new，origin);
2. //用新的去替换旧的，原先旧的会被剪切出来
插入
DOM的插入操作对于我们来说会使用的十分频繁，一定要好好掌握！共有两种方法：
1. appendChild(标签名);
2. //剪切操作，通过这个方法我们可以把一个创建好的标签插入到另外一个标签，可以理解为.push
3. ep：
4. var div = document.getElementsbyTagName('div')[0];//取出div标签
5. var span = document.getElementsbyTagName('span')[0];
6. var strong = document.createElement('strong');//创建strong标签
7. var i = document.creatElement('i');
8. div.appendChild(span);//把span放到div里面
9.
10. insertBefore(a,b);
11. //这个方法的意思为在父级元素里面插入一个值，即在b之前插入a，insert a,before b。
12. div.insertBefore(strong,span);//在span前面插入strong
13. 结果应该为：
14. <div>
15. <strong> <strong>
16. <span> <span>
17. <div>
查询
DOM的查询应该是我们重点掌握的对象，方法如下：
1. document.getElementById();
2. //通过id标签去选出元素，注意：选出的是单个元素
3. document.getelementsByTagName();
4. //通过标签名来选出一组元素
5. 例如：
6. var div = document.getElementsByTagName('div')[0];
7. //我们这时选出的是第一个div标签
8. document.getElementsByClassName();
9. //通过类名来选出，但是IE8及以下不兼容
10. document.getElementsName();
11. //只对部分标签生效（表单，表单元素，img，iframe），IE浏览器不支持
12. document.querySelector();//css选择器，只能选出来一个，IE7及以下没有这个方法
13. document.querySelectorAll();//同样是css选择器，可以选出来一组，IE7及以下没有这个方法。
14. //注意，最后两种方法还有一个缺点：被选出来的元素不是实时的。
dom节点的基本概念
根据w3c的dom标准，文档中所有的内容都是节点，节点是dom的最小组成单元。浏览器会根据dom模型将文档解析成一系列节点。因为所有节点最终都继承自Node节点类，所以dom节点也可以称之为Node节点。
dom节点类型
DOM节点的类型有：
1. 元素节点 1
2. 属性节点 2
3. 文本节点 3
4. 注释节点 8
5. Document 9
6. DocumentFragment 11 //文档碎片
dom的基本属性
常见的有四种，我们今天就来大概介绍一下这四个属性值
DOM节点的基本属性：
1.nodeName //标签名，大写表示，只读
2.nodeValue //只有文本、注释节点有，可读写
3.nodeType //节点类型，只读,它返回的就是相对的数值
4.attributes //Element节点集合的属性
//通过这个属性我们可以改变相应属性的属性值，不能改变属性名，但是我们一般不用这种方法，我们一般用 getAttribute 和 setAttribute 去取
在这里，我们也来介绍一种方法，来看这个节点有无子节点。
hasChildNodes(); //返回值是true or false。
Element节点的一些属性和方法
Element节点的两个属性：
1. innerHTML();//改变HTML里面的内容
2. 如果我们要改变一个div标签的值，代码如下：
3. div.innerHTML = "";
4. //在""里放入你要修改的内容
5. innerTEXT();//可以直接取出标签的文本内容，也可以赋值
6. //该属性火狐不兼容，但是可以使用textConent(老版IE不可用）
Element节点的两个方法：
1. getAttribute();//设置一个行间属性，前面是属性名，后面是属性值 如果我们要给div设置一个行间属性，就可以使用这种方法： div.getAttribute(‘class’,‘demo’);
2. setAttribute();//取这个行间属性的值
1. 在开发中我们可以使用getAttribute()方法来取data-log的值.
2. //如果我们要取出a的data-log
3. <div>
4. <a href = "#" data-log = "0">点我吧 <a>
5. <div>
6. js:
7. var div = document.getElementsByTagName('div')[0];
8. var a = document.getElementsByTagName('a')[0];
9. a.onclink = function() {
10. console.log(this.getAttribute('data-log'));
11. }
DOM的非方法操作
通过一些非方法的操作，我们也能对节点进行查询
遍历节点数
1.parentNode；
//父节点，只有一个。遍历节点数，最顶端的parentNode是#document
ep:strong.parentNode;
2.childNodes;//子节点们
ep:div.childNodes;
3.firstChild;//第一个子节点
ep:div.firstChild;
4.lastChild;//最后一个子节点
ep:div.lastChild;
5.nextSibling;//下一个兄弟节点
ep:span.nextSibling;
6.previousSibling;//上一个兄弟节点
ep:span.previousSibling;
基于元素节点树的遍历
1.parentElement;//返回当前元素的父元素节点
ep:div.parentElement;
2.children;//元素子节点
3.firstElementChild;//第一个元素节点
4.lastElementChild;//最后一个元素节点
5.nextElementSibling;//返回后一个兄弟元素节点
6.previousElementsibling；//返回前一个兄弟元素节点
//这6个除了children，其他的IE9及以下都不兼容
