DOM

前端小杨_
164 阅读5分钟

DOM

概述 DOM 全称（document object model 文档对象模型），主要用于操作对应的html文档中的内容。document是他的超类。

DOM中的对象

HTMLElement（元素对象 主要是标签） Attribute（属性对象 主要是标签中的属性） Text（文本对象 主要是里面的文本内容） Node（节点对象 包括html中的所有节点）

浏览器渲染HTML过程

  • 抽取对应的DOM树 （抽取html中的所有内容构成一个树状结构）
  • 抽取css规则树 （抽取css样式构成css规则树）
  • DOM树和css规则树进行合并形成渲染树 （render Tree）（js会阻塞渲染树的形成）进行渲染

image.png

DOM树的结构

树装图

image.png 获取元素的操作（document，HTMLElement的相关方法）

  • getElementById通过id获取元素，返回的是一个元素对象
  • getElementByCLassName 通过class来获取 返回的是HTMLCollection（伪数组）
  • grtElementByTagName通过标签名进行获取返回的是HTMLCollection（伪数组）
  • getElementByName通过name属性获取 返回的是NodeList（伪数组）
  • querySelector 通过选择器获取第一个找到的元素 返回的是元素对象
  • querySelector 通过选择器获取全部的元素 返回的是NodeList（伪数组）

伪数组特性 下标访问，length属性 HTMLCollection和NodeList的区别 HTMLCollection是及时更新的（live）；当其所包含的文档结构发生改变时，他会自动更新 NodeList是一个静态集合，也就意味着随后对文档对象模型的任何改动都不会影响集合的内容（相当于是一个快照） 关于document的相关属性

  • document.body 获取body
  • document.head 获取head
  • document.forms 获取所有的表单 （伪数组）
  • document.cookie 获取cookie
  • rootElemnt 包含文档的元素 默认为null
  • documentElement 文档元素（html）
  • .....

元素的相关属性

所有元素都具备的属性（可设置获取）

  • title标题
  • tagName 标签名（只读）
  • id id值
  • className class的值
  • classlist class值的列表 （add remove toggle）
  • style 样式设置
  • innerHtml ，innerText（双标签情况下才起作用）
  • textContent文本内容 （类似于innerText）

关于对象的属性元素的属性 对象属性（不会显示在DOM上） 元素属性（显示在DOM上） 元素属性的特性（相关的元素属性） 元素默认就携带的属性称为初始属性（所有的初始属性都可以直接被.出来）

  • img的src和alt
  • input的type和value及placeholder
  • a标签href属性target属性

元素属性操作的相关方法（可以操作任意属性）元素对象的方法

  • getAttribute属性获取
  • setAttribute设置属性
  • removeAttribute 删除属性

样式获取

使用style标签获取样式 使用getComputedStyle来获取样式 兼容写法

function getStyle(ele){
return getComputedStyle?getComputedStyle(ele):ele.currentStyle
}

重绘和回流

回流 回流又叫重排（对于页面的布局进行重新排列）。 触发回流的要求 当前对应的页面内容的布局发生变化 获取某些属性的时候需要计算对应的位置获取距离的时候（offsetTOP offset Left） 重绘 重绘就是重新绘制，也就是说对应的页面进行重新渲染 触发重绘的要求 页面的内容或者样式发生更改就会触发 回流必定重绘 重绘不一定回流 相关总结 重绘和回流会影响对应的渲染性能，重绘和回流的次数越多那么性能越差（避免重绘回流） 避免重绘回流 减少dom操作 减少css操作（设置样式尽量使用class来指定） Node 节点的分类

  • 元素节点Element
  • 属性节点attribute
  • 文本节点textNode

节点对应的属性

  • nodeType节点类型
  • nodeValue节点值
  • nodeName节点名

image.png

节点的属性（获取不到返回null）

  • attributes 获取该元素所有的属性节点的集合 （伪数组）
  • childNodes 获取该元素下的所有元素节点及文本节点的集合 （NodeList）
  • children 获取该元素下的所有的元素节点的集合（HTMLCollection）
  • lastChild 最后一个子节点 （文本节点和元素节点）
  • lastElementChild 最后一个子元素节点
  • firstChild 第一个子节点（文本节点和元素节点）
  • firstElementChild 第一个子元素节点
  • parent 获取该元素的父节点
  • parentElement 获取该元素的父元素节点
  • previousSibling 前一个兄弟节点 （包含文本节点和元素节点）
  • previousElementSibling 前一个兄弟元素节点
  • nextSibling 后一个兄弟节点 （包含文本节点和元素节点）
  • nextElementSibling 后一个兄弟元素节点

节点相关方法

  • createElement 创建元素节点
  • createAttribute 创建属性节点
  • createTextNode 创建文本节点
  • createDocumentFragmen 创建文档片段

节点操作的方法 添加节点的方法

  • append 支持多个参数 支持字符串（追加到后面）
  • appendChild 只有一个参数 不支持字符串（追加到后面）
  • insertBefore 插入到对应的子元素的前面
  • insertAdjacentHTML 插入对应的html代码到指定位置
  • insertAdjacentText 插入对应的文本到指定位置
  • insertAdjacentElement 插入对应的元素到指定位置 克隆节点的方法 cloneNode 将当前节点进行克隆返回新的节点（传入boolean类型的值 true 深度克隆 false为浅度克 隆） removeChild删除节点 remove删除自身 封装删除空文本节点的方法
// 删除空文本节点
function removeEmptyText(node){
//判断类型
if(!(node instanceof Node)){
throw new Error('类型错误')
}
//遍历所有的节点
for(var i=0;i<node.childNodes.length;i++){
//判断是否为空
if(node.childNodes[i].nodeType == 3 &&
node.childNodes[i].nodeValue.trim().length==0){
node.removeChild(node.childNodes[i])
}
}
}

替换的相关方法 replaceChild替换子节点 replaceChildren替换里面的所有内容 replaceWidth将自身进行替换

avatar
文章
阅读
粉丝