DOM 获取DOM动态创建节点

Posted 2021-01-23 yangxueyan

一、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、减少向服务器请求次数