DOM操作主要是针对HTML的标签进行添加，移除和修改，其本质是操作HTML文件的一个API。
一、节点
1、nodeName 返回元素名称 标签-div ，文本-#text 。
2、nodeType 返回元素节点类型 标签-1 ，文本-3 ， 注释-8。
3、nodeVale 设置或返回元素值 标签-null ，文本-“文本内容”。
4、tagName 返回元素的标签名。
//element.nodeName返回元素名称 标签-div ，文本-#text；
console.log(h1.nodeName);
//element.nodeType返回元素的节点类型 标签-1 ，文本-3 ， 注释-8；
console.log(h1.nodeType);
//element.nodeValue设置或返回元素值 标签-null ，文本-‘文本内容’;
var value = bts.childNodes[0].nodeValue;
console.log(value);
// 设置元素的值
value = bts.childNodes[0].nodeValue = '点我试试';
console.log(value);
console.log(h1.tagName);
二、选择器
1、document.querySelector() 获取元素。
2、document.querySelectorAll() 获取全部元素。
3、document.getElementById() 通过id获取元素。
4、document.getElementsByClassName() 通过class值获取元素。
5、document.getElementsByTagName() 通过标签名获取元素。
6、document.getElementsByName() 通过name属性值获取元素。
7、document.body 获取body。
8、document.documentElement IE获取body。
//querySelector获取某一个元素
var ul = document.querySelector('ul');
console.log(ul);
//querySelectorAll获取一组元素
var lis = document.querySelectorAll('li');
console.log(lis);
//getElementsByClassName根据class的值获取元素
var container = document.getElementsByClassName('container')[0];
console.log(container);
//getElementsByName根据name的值获取元素
var input = document.getElementsByName('name')[0];
console.log(input);
//getElementsTagName根据标签名获取元素
var p = document.getElementsByTagName('p')[0];
console.log(p);
//getElementById根据id值获取元素
var title = document.getElementById('title');
console.log(title);
var body = document.body;
console.log(body);
三、关系
1、parentNode 返回父元素的节点
2、childNodes 返回元素子节点的数组，包含空格。
3、children 返回元素子节点的数组，不含空格。
// element.parentNode返回父元素的节点
console.log(p.parentNode);
// childNodes返回元素子节点的集合包含空格，输出为[text,li,text,li,text,li,text]
console.log(ul.childNodes);
// children返回元素子节点的集合，输出为[li , li , li ]
console.log(ul.children);
4、previousSibling 返回元素位于相同节点树层级的前一个元素，含空格。
5、previousElementSibling 返回位于相同节点树层级的前一个元素，不含空格。
6、nextSibing 返回元素位于相同节点树层级的下一个节点，含空格。
7、nextElementSibing 返回元素位于相同节点树层级的下一个节点，不含空格。
8、firstChild 返回元素的首个子节点，含空格。
9、firstElementChild 返回元素的首个子节点，不含空格。
10、lastChild 返回元素的最后一个子元素，含空格。
11、lastElementChild 返回元素的最后一个子元素，不含空格。
//previousSibling返回位于相同节点树层级的前一个元素，包含空格
console.log(p.previousSibling);
//previousElementSibling返回位于相同节点树层级的前一个元素，自动过滤空格
console.log(p.previousElementSibling);
//nextSibling返回位于相同节点树层级的下一个节点，包含空格
console.log(h1.nextSibling);
//nextElementSibling返回位于相同节点树层级的下一个节点，自动过滤空格
console.log(h1.nextElementSibling);
// firstChild 返回文档的首个子节点，包含空格
console.log(p.firstChild);
// firstElementChild返回文档的首个子节点，自动过滤空格
console.log(ul.firstElementChild);
//lastChild返回元素的最后一个子元素，包含空格
console.log(ul.lastChild)
//lastElementChild返回元素的最后一个子元素，自动过滤空格
console.log(ul.lastElementChild);
四、增加
1、document.createElement() 新建节点。
2、appendChild() 在节点的子节点末尾添加新的子节点。
3、insertBefore(newNode, target) 在子节点列表的任意位置之前插入新节点。
4、createTextNode() 创建文本节点。
5、createAttribute() 创建属性节点。
6、setAttributeNode() 设置属性节点。
//document.createElement(),在对象中新建一个对象，要与appendChild
// 或insertBefore方法联合使用
var li = document.createElement('li');
li.innerHTML = '刀剑如梦';
//element.appendChild()方法在节点的子节点列表末添加新的子节点
ul.appendChild(li)
//insertBefore(newNode,target)方法在节点的子节点列表任意位置插入新的节点
var h2 = document.createElement('h2');
page.insertBefore(h2,p);
// document.createTextNode()创建文本节点
var text = document.createTextNode('古典音乐');
h2.appendChild(text);
// document.createAttribute() 创建属性节点
var att = document.createAttribute('title');
// 设置属性值
att.value = "我是一个二级标题";
// 设置属性节点
h2.setAttributeNode(att);
五、修改和删除
1、cloneNode(true/false) 复制元素。
true 复制当前节点和其下所有子节点。
false 仅复制当前节点。
2、removeChild(target) 删除节点。
3、replaceChild(newEle, target) 修改替换节点。
// cloneNode(true/false) 复制元素
// true复制当前节点和其下所有子节点
var deeplist =ul.cloneNode(true);
console.log(deeplist);
// false仅复制当前节点
var showList = ul.cloneNode(false);
console.log(showList);
//container.removeChild(target)，删除
console.log(page.removeChild(h2));
//container.replaceChild(newEle,oldEle)，修改
var H1 = document.createElement('h1');
H1.innerHTML = '英文舞曲';
page.replaceChild(H1,h1)
六、属性和内容操作
1、getComputedStyle(obj).attr 获取样式值。
2、obj.CurrentStyle(attr) 获取样式值，兼容IE。
3、getAttribute() 获取属性。
4、setAttribute() 设置属性。
5、hasAttribute() 判断属性，有返回true没有返回false。
// getAttribute获取属性
console.log(p.getAttribute('class');
console.log(input.getAttribute('name'));
// setAttribute设置属性
H1.setAttribute('style','font-size:80px;color:purple;')
// hasAttribute判断属性
console.log(p.hasAttribute('class'));
// getComputedStyle(obj).attr获取样式值
console.log(getComputedStyle(H1).color);
6、innerHTML 返回对象的起始位置到终止位置的全部内容，包含标签。
7、innerText 返回对象的起始位置到终止位置的全部内容，不含标签，只适用IE浏览器。
//innerHTML返回对象的起始位置到终止位置的全部内容,包括Html标签
p.innerHTML
console.log(ul.innerHTML);
//innerText返回对象的起始位置到终止位置的全部内容,除去Html标签，只适用IE浏览器
console.log(ul.innerText);
以上内容纯属个人理解，由于水平有限，若有错漏之处敬请指出斧正，小弟不胜感激。
