什么是DOM？###

定义：文档对象模型 (DOM) 是HTML和XML文档的编程接口。
DOM是浏览器提供的接口，想要操作DOM就要使用DOM。

什么是Node？###

节点(Node)是组成DOM的最小单位。DOM树，就是由各种不同类型的节点组成。

Element和Node的区别?####

对于HTML文档，节点(Node)主要有以下六种类型：

So： Element继承了Node类，也就是说Element是Node多种类型中的一种，也叫作ELEMENT_NODE 。
也就是说我们平时使用的html上的元素，即Element是类型为ELEMENT_NODE的Node。

获取DOM####

 //获取节点（不会搜索不在文档中的元素）
var getnode1 = document.getElementById('test')
var getnodes1 = document.getElementsByClassName('test1 test2')

 //获取多个节点（返回的HTML集合是动态的）
var getnodes2 = document.getElementByTagName('p')

//支持更高级节点查询方法(只会返回第一个符合的元素)
var getnode2 = document.querySelector('div#test')

//返回与指定的选择器组匹配的元素列表(按出现的顺序排列)
var getnode3 = document.querySelectorAll("div.test, div.test2,div.test3")

创建DOM####

var createEle = document.createElement('div')
var createNode = document.createTextNode('hello world!')

查找DOM####

// 获取父元素、父节点(空时返回null)
var parent = node.parentElement;
var parent = node.parentNode;

// 返回包含指定节点的子节点的集合，该集合为即时更新的集合
var childrens = node.childrenNodes;   

// 当前元素的第一个/最后一个子元素节点
var el = node.firstElementChild;
var el = node.lastElementChild;

// 下一个/上一个兄弟元素节点
var el = node.nextElementSibling;
var el = node.previousElementSibling;

修改DOM####

// 删除一个子节点。返回删除的节点（oldChild === child）
var oldChild = node.removeChild(child);

//将一个节点添加到指定父节点的子节点列表末尾。
var newChild = node.appendChild(child);

// 指定的节点替换当前节点的一个子节点（newChild 替换 oldChild）
// 返回被替换掉的节点（ replacedNode === oldChild相等）
var replacedNode = node.replaceChild(newChild, oldChild);

// 在当前节点的某个子节点之前再插入一个子节点
var insertedElement = parentElement.insertBefore(newElement, referenceElement);

//方法返回一个布尔值，判断当前节点是否有子节点。
element.hasChildNodes()

// textContent属性返回当前节点和它的所有后代节点的文本内容(textContent会把后代的div吃掉)
element.textContent = 'hello world'

操作属性####

// 获取数组
ele.attributes;
// 获取属性
ele.getAttribute('class');
//设置属性
ele.setAttribute('class', 'highlight');
// 判断属性
ele.hasAttribute('class');
//移除属性
ele.removeAttribute('class');
// 是否有属性设置
ele.hasAttributes();