DOM以及DOM操作

一、DOM：（Document Object Model）文档对象模型

树形结构：嵌套、非线性结构、非对称

二、DOM操作

1.增

新建：

fn createElement(标签名)  创建元素节点（重点）

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

fn  cloneNode(true,false)  克隆节点   true包含子节点  false不包括

插入：

fn  appendChild()  拼接节点（重点）

fn insertBefore(new,old)  插入节点  new是要插入的新节点，old是被插入节点  表示在该节点前插入新节点

2.删

fn  removeChild()   删除子节点(重点)

fn removeAtrributeNode()  删除属性节点;

3.改

fn  replaceChild()  替换节点   需要父级调用

fn setAttribute()  修改属性值

4.查

获取元素

fn getElementById() 通过id名获取元素  返回匹配元素 *

fn getElementByTagName() 通过标签名获取与元素  返回类数组集合 *

fn getElementByClassName()  通过class名获取元素  返回类数组集合  ie6、7不适用 *

fn getElementByName()  表单常用，通过表单的name名获取元素  返回类数组集合

fn querySelector() 新的ECMA６标准 通过ｃｓｓ选择器获取元素 返回匹配元素＊

fn querySelectorAll()  新的ECMA６标准 通过ｃｓｓ选择器获取元素  返回类数组集合 *

获取下一个兄弟节点

1.pro  nextSibling

有兼容问题，ie9及以上safari  chrome firefox会将后边的换行的部分作为节点进行处理；

可以使用nodeType来查看节点类型；

nodeType返回值：1 元素节点  2 属性节点 3 文本节点 8 注释；

兼容使用：dEl.nextSiblig.nodeType==1?dEl.nextSiblig:dEl.nextSiblig.nextSiblig;

2.pro nextElementSibling  可以忽略文档节点，只获取元素节点但是ie6、7、8不认。

获取上一个兄弟节点

1.pro previousSibling 

同上兼容使用  ：dEl.previousSibling.nodeType==1?dEl.previousSibling:dEl.previousSibling.previousSibling;

2.pro previousElementSibling   直接获取节点，问题同上

获取子节点

1.第一个子节点

pro firstChild  ie6、7、8没问题，现代浏览器有问题

pro firstElementChild  ie6,7,8不兼容

注：判断当前浏览器版本

2.最后一个子节点

pro lastChild  问题同上

pro lastElementChild  问题同上

3.获取子节点

pro childNodes  会获取非元素类型子节点

pro  children  获取非元素类型子节点，没有兼容问题，推荐使用

4.获取父级节点 

pro parentNode

5.获取节点后操作

通过点语法调用标签属性

通过style属性 控制样式

通过classList控制样式

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

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

fn replace(class1,class2,....)  替换类名

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

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