【精华】Javascript对DOM增删改查，class及CSS操作，一篇全，绝对实用！

先上个灵活实用，又难把握的(创建、克隆节点)：

    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

删除节点
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