常用节点分为4类

	nodeName	nodeType	nodeValue
文档节点	#document	9	null
元素节点	元素名	1	null
属性节点	属性名	2	属性值
文本节点	#text	3	文本内容
注释节点	comment	8	注释

文档节点

• document 浏览器已经为我们提供 文档节点对象 这个对象是window的属性 可以在页面中直接使用，文档节点代表的是整个网页

元素节点

• document.createElement('img')
• document.createDocumentFragment 创建文档片段节点(虚拟节点),能提升多次appendChild产生的回流性能问题
• document.createTextNode
  - document.createComment 创建注释节点
• ele .appendChild(ele) 在最后追加 ,返回新插入的节点
• ele .insertBefore(ele,[参照节点]) 指定插入某个节点前面 , 返回新插入的节点
• ele .cloneNode([true深复制]) 返回克隆出来的节点, 传入true 同时复制该节点下的子节点
• ele .removeChild(删除的子节点) 必须传参,要想全删了要么遍历要么 innerHTML=' '
• ele .remove() 删除自身 IE9及以下不支持
• ele .replaceChild(新节点,旧节点) 返回被替换的节点
  - ele.normalize() 将相邻的多个文本节点合并成1个文本节点
  - ele.splitText(5) 按照指定的位置把文本节点分割为两个节点。返回第二个文本节点。

属性节点

固有属性可以直接获取和设置,哪些是固有属性得看是什么元素 如div它就不存在src属性

• imgs.src
• className class比较特殊 需要以className获取
• checked
• readOnly
• innerHTML 插入script标记字符串这种,脚本是不会执行的
• innerText 低版本firefox不支持需要用textContent,碰到再说
• outerHTML 返回包括自身和子节点,修改时也会将自身替换掉
• outerText 知道就好 不要使用

非固有属性 如自定义属性等

- ele.attributes.getNamedItem('属性名').nodeValue 获取属性值
- ele.attributes.removeNamedItem('属性名') 删除属性
- ele.attributes.setNamedItem(attr) 需要创建属性节点对象来设置属性值

<div id="box" data-title="aaaa"></div>
var box = document.querySelector('#box');
// 已存在的属性可以直接修改nodeValue
var dataTitle = box.attributes.getNamedItem('data-title');
dataTitle.nodeValue="bbbbb";
//不存在的属性,以对象的形式进行添加和修改
var dataSrc = document.createAttribute('data-src');
dataSrc.nodeValue="http://www.xxx.com";
box.attributes.setNamedItem(dataSrc);

固有和自定义属性 通用获取和设置方法,最好别拿来操作布尔值属性

• getAttribute('title')
• setAttribute('title', ‘牛逼’)
• removeAttribute('title')
• getAttributeNode('id').nodeValue 获取属性节点

专为data数据设计的接口

• ele.dataset.xx: data-aaa-bbb="123" 多个-获取时使用驼峰式 ele.dataset.aaaBbb

class便捷操作 classList 不支持ie9及以下 若兼容使用jquery或者自定义class操作,或者参考此篇改写原型

• ele.classList.add() 添加一个class
• ele.classList.remove() 删除一个class
• ele.classList.contains() 判断是否有这个class
• ele.classList.toggle()切换class 有则删除,没有则添加

文本节点

- ele.childNodes[0].nodeValue 获取文本节点