节点树状图
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、减少向服务器请求的次数
原文地址:https://www.cnblogs.com/wkxdd/p/10044784.html