先上个最灵活，且难把握的(创建、克隆节点)：
node.insertAdjacentHTML('beforeBegin', html); //在此node之前插入html代码
node.insertAdjacentHTML('afterEnd', html); //在此node之后插入html代码
node.insertAdjacentHTML('beforeEnd', html); //在此node的最后一个子元素之后插入html代码
node.insertAdjacentHTML('afterBegin', html); //在此node的第一个子元素之前插入html代码
newNode = node.cloneNode(boolean) //true表示复制该节点下的所有子节点；false表示只复制该节点
还有insertAdjacentText、insertAdjacentElement，用法一样插入文本、节点。
节点增删改查（从重要且陌生到次要且熟悉向下排序）：
新增节点首先要创建节点 document.createElement(htmlcode) // 按照指定的标签名创建一个新的元素节点 document.createDocumentFragment() //创建代码片段（为避免频繁刷新DOM）可参考https://blog.csdn.net/u010582082/article/details/70196854 插入节点 parentNode.appendChild(childNode); // 将新节点追加到子节点列表的末尾 parentNode.insertBefore(newNode, targetNode); //将newNode插入targetNode之前 替换节点 parentNode.replace(newNode, targetNode); //使用newNode替换targetNode 删除节点 parentNode.removeChild(childNode); // 移除目标节点 node.parentNode.removeChild(node); //在不清楚父节点的情况下使用 子节点 Node.children //获取DOM子元素 Node.childNodes //获取子节点列表NodeList; 注意换行在浏览器中被算作了text节点 Node.firstChild //返回第一个子节点 Node.lastChild //返回最后一个子节点 父节点 Node.parentNode // 返回父节点 同胞节点 Node.previousSibling // 返回前一个节点，如果没有则返回null Node.nextSibling // 返回后一个节点 获取DOM getElementByID() getElementsByTagName() //数组 getElementsByClassName() //数组
HTML5为元素提供了一个新的属性classList，来实现对class的增删改查：
node.classList.add(value); //为元素添加指定的类 node.classList.contains(value); // 判断元素是否含有指定的类，如果存在返回true node.classList.remove(value); // 删除指定的类 node.classList.toggle(value); // 有就删除，没有就添加指定类
修改DOM属性：
Node.getAttribute('id') // 获取
Node.setAttribute('id') // 设置
Node.removeAttribute() // 移除
Node.attributes // 获取DOM全部特性
Node.style查询行内样式，通过赋值实现增删改：
node.style.本身的属性和方法 //行内样式 node.style.cssText //获取node行内样式字符串 node.style.length //获取行内样式个数 node.style.item(0) //获取指定位置的行内样式
最后，获取CSS外部样式（无法修改）：
getComputedStyle(document.getElementById('div1'),false).width; //chrome,firefox
document.getElementById('div1').currentStyle.width; //IE