元素节点

Posted 2021-01-23 wkxdd

节点树状图

　　Document>documentElement>body>tagName

我们常用的节点类型

　　元素节点（标签）

　　文本节点（文本节点）

　　属性节点（标签里的属性）

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

 节点的获取

　　元素节点获取有很多方法

　　Document.getElementById()

　　Document.getElementsByClassName()

　　Document.getElementsByTagName()

　　Document.querySelector()

 

属性节点的获取

　　元素.attributes获取元素身上所有属性构成的集合

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

　　元素.setAttribute（“属性名”，“属性值”）给元素设置属性和属性值

　　元素.removeAttribute（“属性”）删除属性

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

获取元素的子节点

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

获取单个子节点：firstElementChild

获取最后一个子节点：元素.lastElementchild

获取上一个兄弟节点：元素.previousElementSibling

获取下一个兄弟节点：元素.nextElementSibling

获取父节点：元素.parentNode没有兼容性

　　

Dom2动态创建节点

　　生成节点的方法：document.createElement（“div”）

　　插入节点的方法：父元素.appendChild（新节点）

　　在指定的位置插入新的节点：父元素.insertBefore（新节点，谁的前面）将新节点插入指定元素前面

　　删除元素节点 ：  父元素.removeChild（）

拓展一个知识点：字符串拼接和Dom创建都是渲染的方式

　　字符串拼接：优点：简单，层次感强，可以处理大量数据

　　　　　　　　缺点：字符串斌姐会影响到原有子元素的事件

　　Dom创建：优点：是一个独立的个体，不会影响到原有的元素

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

Dom回流：

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

补充：

　　提升页面性能优化：

　　　　1、多采用雪碧图

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

　　　　3、减少Dom回流

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