DOM的增删改查操作的基本内容

1. 增：

（1）.新建：

      createElement(标签名）创建元素节点

      setAttribute(name,value) 直接设置属性

      cloneNode(true、false) true表示包含子节点；false表示不包含

  (2). 插入：

     拼接节点：appendChild();

     插入节点：insertBefore(new,old)

2.删

removeChild(); 删除子节点；

removeAttributeNode(); 删除属性节点；

3.改

replaceChild(new,old) 替换节点、需要用父级来调用

setAttribute() 修改属性值

4.查

getElementById()	通过id名获取元素，返回匹配元素
getElementsByTagName()	通过标签名获取元素，返回类数组集合
getElementsByClassName()	通过class名获取元素，返回类数组集合，ie6,  ie7 不适用
getElementsByName()	表单常用，通过表单的name名获取元素，返回类数组集合
querySelector()	新的ECMA6标准，通过css选择器获取元素。返回匹配元素
querySelectorAll()	新的ECMA6标准，通过css选择器获取元素，返回类数组集合

（2）. 获取下一个兄弟节点：

        nextSibling:  有兼容问题，ie9以上及safari、chrome、firefox会将后边的换行部分作为节点进行处理；可以使用nodeType来查看节点类型；nodeType返回值（元素节点、属性节点文本节点、注释），兼容使用需要写入dEl.nextSibling.nodeType == 1? dEl.nextSibling : dEl.nextSibling.nextSibling  的语句

       nextElementSibling:  可以忽略文档节点，只获取元素家电，但是，ie6,  ie7不支持

       previousSibling：    同上  兼容使用需要写入dEl.previousSibling.nodeType == 1?     dEl.previousSibling: dEl.previousSibling.nextSibling  的语句

 previousElementSibling  直接获取元素节点，问题同上

（3）.获取子节点：

   1）.第一个子节点：firstChild     现代浏览器不适用，ie6,  ie7适用；   firstElementChild   ie6,  ie7不兼容

在使用之前判断浏览器的版本

   2）.最后一个节点 ：lastChild    lastElementChild  问题同上

   3）.获取字节点：childNodes   会获取非元素类型的子节点

   4）.获取元素子节点，没有兼容问题：children

(4) . 获取父级节点： parentNode

5.获取节点后的操作：

（1）. 通过点语法调用标签属性

（2）. 通过style属性控制样式

（3）.通过classList控制样式

        add(class1,class2.....)添加类名

        remove(class1,class2...)删除类名

      replace(oldClass,newClass) 替换类名

      contain(class)  是否包含某个类名，返回布尔值

 toggle(class, true|false)  如果类名存在就删除，不存在就添加，第二个参数代表强制，ture添加，false删除。