DOM manipulation
DOM节点（Node）通常对应于一个标签，一个文本，或者一个HTML属性。DOM节点有一个nodeType属性用来表示当前元素的类型，它是一个整数：
- Element，元素
- Attribute，属性
- Text，文本
-
DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。
- 当前对象为node
- 返回父节点：node.parentNode, node.parendElement,
- 返回所有子节点：node.childNodes（包含文本节点及标签节点）,node.children
- 返回第一个子节点：node.firstChild
- 返回最后一个子节点： node.lastChild
- 返回同属上一个子节点：node.nextSibling
- 返回同属下一个子节点：node.previousSibling
- parentNode和parentElement功能一样，childNodes和children功能一样。但是parentNode和childNodes是符合W3C标准的，可以说比较通用。而另外两个只是IE支持，不是标准，Firefox就不支持 ,所以大家只要记得有parentElement和children就行了 移位 ->
-
DOM操作 ——如何添加、移除、移动、复制、创建和查找节点等。
- // 添加、删除子元素
- ele.appendChild(el);
- ele.removeChild(el);
- // 替换子元素
- ele.replaceChild(el1, el2);
- // 插入子元素
- parentElement.insertBefore(newElement, referenceElement);
- //克隆元素
- ele.cloneNode(true) //该参数指示被复制的节点是否包括原节点的所有属性和子节点
-
childNodes vs children 返回所有子节点：
- node.childNodes（包含文本节点及标签节点）,
- node.children
- Element.children returns only element children(元素节点), while Node.childNodes returns all node children. Note that elements are nodes, so both are available on elements.（node节点包括element 节点）
-
getElementsByClassName(H5) compatible version
function getElementsByClassName(node, classname) { if (node.getElementsByClassName) { return node.getElementsByClassName(classname); } else { var results = new Array(); var elems = node.getElementsByTagName('*'); for (var i = 0; i < elems.length; i++) { if (elems[i].className.indexOf(classname) != -1) { result.push(elems[i]); } } return results; }}