DOM概念以及基础操作

一、树形结构

说白了就是嵌套，非线性结构，非对称。HTML的标签逻辑就是树形结构

二、DOM是什么？

document object model 文档对象模型

提供了狠多对标签进行增删改查的操作

三、DOM操作

1.增：

新建：

（1）fn createElement（标签名） 创建元素节点

（2）fn setAttribute（name，value） 直接设置属性

（3）fn cloneNode（true、false） true包含子节点，false不包含

插入：

（1）拼接节点 fn appendChild()

(2) 插入节点 fn insertBefore(old,new)

2.删

（1）删除子节点：fn removeChild（）

（2）删除属性节点： fn removeAttributeNode（）

3.改

（1）替换节点：fn replaceChild（new，old） 需要用父级来调用

（2）修改属性值： fn setAttribute（）

4.查

（1）fn getElementById（） 通过id名获取元素，返回匹配元素

（2）fn getElementsByTagName（）通过标签名获取元素，返回类数组集合

（3）fn getElementsByClassName（） 通过class名来获取元素，返回类数组集合，ie6、ie7不适用

（4）fn getElementsByName（） 表单常用，通过表单的name名获取元素，返回类数组集合

（5）fn querySelector（）新的ECMA6标准，通过css选择器获取元素，返回匹配元素

（6）fn querySelectorAll（）新的ECMA6标准，通过css选择器获取元素，返回类数组集合

获取下一个兄弟节点

（1）pro nextSibling

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

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

nodeType返回值：元素节点、属性节点、文本节点、注释

兼容使用：dEI.nextSibling.nodeType == 1 ? dEI.nextSibling : dEI.nextSibling.nextSibling

（2）pro nextElementSibling

可以忽略文档节点，只获取元素节点，但是ie6、ie7、ie8不认

获取上一个兄弟节点：

（1）pro previousSibling     兼容使用：dEI.nextSibling.nodeType == 1 ? dEI.nextSibling : dEI.nextSibling.nextSibling

（2）pro previousElementSibling：直接获取元素节点，可以忽略文档节点，只获取元素节点，但是ie6、ie7、ie8不认

获取子节点

（1）第一个子节点：

pro firstChild   ie6、ie7、ie8没问题，但是现代浏览器有问题

pro  firstElementChild   ie6、ie7不兼容

需要判断当前浏览器的版本

（2）最后一个子节点：

pro lastChild

pro lastElementChild

需要判断当前浏览器的版本

（3）获取子节点：

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

pro children  获取元素子节点，没有兼容问题，建议使用

获取父级节点：pro parentNode

获取节点后操作

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

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

（3）通过classList控制样式

fn add（class1,class2,....）   添加类名

fn remove（class1，class2，...）删除类名

fn  replace（oldClass，newClass）替换类名

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

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