DOM 获取、DOM动态创建节点

标签：mode   数据量   指定   attribute   影响   独立   rev   ntc   parent   

一、Dom获取

　　1、全称：Document     Object     Model　　文档对象模型

　　2、我们常用的节点类型

　　　　元素（标签）节点、文本节点、属性节点（也就是标签里的属性）、

　　3、document有个属性叫nodeType返回的是数字

　　　　1：代表元素节点

　　　　2：代表属性节点

　　　　3：代表文本节点

　　4、节点的获取

　　　　元素节点的获取方法

　　　　　　Document.getElementById()

　　　　　　Document.getElementsByClassName()

　　　　　　Document.getElementsByTagName()

　　　　　　Document.querySelector()

　　　　　　Document.querySelectorAll()

　　　　属性节点的获取方法

　　　　　　元素 . getAttribute（"属性名"）　　　　获取属性值的方法

　　　　　　元素 . attribuites　　　　　　　　　　 获取元素身上所有属性构成的集合（数组）

　　　　　　元素 . attribute [ 索引 ] . value　　　　　获取元素里面的值

　　　　　　 元素 . setAttribute（"属性名","属性值"）　　给元素设置属性和属性值

　　　　　　 元素 . remove（"属性"）　　　　　　　　删除元素

　　　　文本节点没有获取的方法，没有意义

　　5、获取元素的子节点

　　　　元素 . childNodes　　这个属性有兼容性，标准浏览器回获取文本节点，而低版本的浏览器不会，所以建议children属性

　　　　获取单个子节点：具有兼容问题

　　　　　　获取第一个子节点：

　　　　　　　　标准下：元素 . firstElementchild

　　　　　　　　非标准下：元素 . firstchild

　　　　　　获取最后一个子节点：

　　　　　　　　标准下：元素 .lastElementchild

　　　　　　　　非标准下：元素 . lastchild

　　　　　　获取上一个兄弟节点：

　　　　　　　　标准下：元素 . previousElementsibling

　　　　　　　　非标准下：元素 . previoussibling

　　　　　　获取上一个兄弟节点：

　　　　　　　　标准下：元素 . nextElementchild

　　　　　　　　非标准下：元素 . nextchild

　　　　　　解决兼容性问题：

　　　　　　　　拿获取第一个子节点为列：

　　　　　　　　　　var    list=document . getElementById（"list"）

　　　　　　　　　　var   ss=list . firstElementchild ||  list . firstchild

　　6、获取父节点

　　　　　　元素 . parentNode 　　　　没有兼容性

二、Dom 动态创建节点

　　1、生成节点的方法：

　　　　document . createElement（"div"）

　　2、插入节点的方法：

　　　　父节点 . appendChild（"新节点"）

　　3、在指定的位置插入节点

　　　　父节点 . inserBefore（新节点，谁的前面）　　　　将元素插入指定节点的前面

　　4、删除节点

　　　　父节点 . removechild（）　　　

 三、拓展

　　字符串中的拼接和Dom创建都是渲染的方试

　　字符串：

　　　　优点：简单，可以处理数据，层次感比较强

　　　　缺点：字符串拼接会影响到原来子元素的事件

　　Dom创建：

　　　　优点：是一个独立的个体，不会影响到原来的元素

　　　　缺点：处理数据量过大会比较麻烦，会造成Dom回流

　　Dom回流：

　　　　页面渲染时，我们对html结构简单的增删查改时，浏览器会对所有的dom重新排序，这就是Dom回流，严重影响浏览器的性能

　　提升页面性能优化：

　　　　1、多采用雪碧图

　　　　2、阻止超链接的默认行为

　　　　3、减少DOM回流

　　　　4、减少向服务器请求次数