Dom操作

 /**
	* dom 树中，元素 属性 文本 注释 都被看作是节点
	*
	* nodeName
	*      元素节点的节点名是大写的标签名
	*      文本节点节点名是#text
	*      注释的节点名是#comment
	*      文档节点的节点名是#docoument
	*      属性的节点名是属性名
	* nodeType
	*      元素节点的节点类型是 1
	*      文本节点的节点类型是 3
	*      属性节点的节点类型是 2
	*
	* nodeValue
	*      元素节点的节点值是null
	*      文本节点的节点值是文本值
	*      属性的节点值是属性值
	*
	* 文本内容
	*      元素节点对象的textContent 用户读取，或者设置元素节点的中的文本内容
	*
	* 属性操作
	*     var attrs = document.getElementById('id').attributes;
	*     获取独赢属性
	*     attrs[index] or attrs['class']  获取到一个属性节点对象
	*     attrs['class'].nodeValue
	*     attrs['class'].nodeName
	*     attrs['class'].nodeType
	*     attrs['class'].value
	*
	*     document.getAttributeNode('id').value;
	*     var idValue = document.getAttribute('id')
	*
	*
	*     document.setAttribute('id','btn');
	*
	*     var nameAttr= document.createAttribute('name');
	*     nameAttr.nodeValue = 'new name';
	*     document.setAttributeNode(nameAttr);
	*
	*     element.removeAttribute(attrName);
	*
	*     element.hasAttribute(attrName); bool
	*
	*     类操作
	*     var list = document.getElementById('list');
	*     var  classListObj =  list.classList
	*     classListObj.value
	*
	*     classList.add('red');
	*     classList.remove('title');
	*     classList.replace('hello','word');
	*
	* 节点的创建
	*
	*    var tag =  document.createElement('tagName');
	*
	*    var span = document.createElement('span');
	*    span.textContent = 'hello word';
	*    //在指定父节点的结尾添加一个子节点;
	*    parentNode.appendChild(childNode);
	*    //在指定父节点的某个子节点之前插入一个子节点
	*    parentNode.insertBefore(newChild,existingChild);
	*
	* 节点的删除
	*    //返回被删除的节点
	*    var childNode = parentNode.removeChild(childNode);
	*    //无返回值,元素自己删除
	*    DOMElement.remove();
	*    
	* 节点的替换
	*    //新旧节点的替换
	*    parentNode.replaceChild(newNode,oldNode);
	*    
	* @type {HTMLElement}
	*/