DOM概述 DOM全称（document Object model 文档对象模型）主要用于操作对应的html文档的内容，

概述

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

DOM中的对象

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

浏览器渲染HTML过程&&&

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

DOM树的结构

html代码

树状图

DOM的相关操作

获取元素的操作&&

获取元素的操作（document.htmlElemennt的相关方法）

getElementByld 通过id获取元素返回的是一个元素对象
getElementByclassName 通过class 来获取返回的是HTMLcollection（伪数组）
getElmentsByTagName 通过标签名进行获取返回的是HTMLcollection（伪数组
getElementsByName 通过name属性获取返回的是NodeList （伪数组）
querSlector 通过选择器获取第一个找到的元素
querYSselectorAll 通过选择器获取全部的元素返回的是Nodelist(伪数组）

伪数组特性下标访问，length 属性

Htmlcollection 和NodeList的区别

HTMLCollection 是即时更新的（live）；当其所包含的文档结构发生改变时，它就会自动更新

NodeList 是一个集合，也就意味着随后对文档对象模型的任何改动都不会影响集合的内容。（相当于是一个快照） 关于document的相关属性&&

document.body 获取body
document.heaad 获取head
document.form 获取所有的表单
document.cookie 获取cookie
rootElement 包含文档的元素默认为null
doucumentElement 文档元素（html）
....

元素的相关属性

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

title 标题
tagName 标签名
id id值
className class的值
style 样式设置
innerHtml innerText （双标签情况下起作用)

关于对象的属性元素的属性

对象属性&&（不会显示在dom上）

元素属性&&（显示在Dom上）

元素属性（相关的元素属性）元素默认就携带的属性称为初始属性（所有的初始属性都可以直接被.出来

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

属性操作的相关方法&& （可以操作任意属性）

getAttribute 获取属性

setAttribute 设置属性

removeAAttrubute 删除属性

示例

样式获取

使用style 标签获取

使用getComputedStyle来获取样式（重点）

兼容写法

重绘和回流&&&

回流

回流又叫重排（对应页面的布局重新排列）。

触发回流的要求

当前对应的页面的内容的位置布局等发生变化获取某些属性的时候需要计算对应的位置获取距离的时候（offsetTop offsetLeft...）

重绘

重绘就是重新绘制，也就是说对应的页面进行重新渲染

触发重绘的要求

页面的内容或者样式发生更改就会触发

回流必定重绘重绘不一定回流

Node

节点的分类

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

节点对应的属性

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

元素节点的属性

attributes 获取该元素所有的属性节点（伪数组）
childNodes 获取该元素下所有元素节点及文本节点的集合（NodeLIst）
children 获取该元素下的所有元素节点的集合（HTMLCollection）
parent 获取该元素的父节点
parentElement 获取该元素的父元素节点
previousSibling 上一个兄弟节点
previousElementSibling 前一个兄弟元素节点
nextSibling 后一个兄弟节点
nextElementSibling 后一个兄弟元素节点

节点相关方法

创建节点的方法（document）

        - 创建属性节点 createELment
        - 创建元素节点 createAttribute
        - 创建文本节点 createTextNode 
        - 创建文档片段 creareDocumentFragmen

节点操作的方法&&

添加节点的方法

append 支持多个参数支持字符串（追加到后面）
appendChild 只有一个参数不支持字符串（追加到后面）
insertBefore 插入到对应的子元素的前面
insertAdjacentHTML 插入对应的html 代码到指定位置
insertAdjacentText 插入对应的文本到指定位置
insertjacentElement 插入对应的元素到指定位置

克隆节点的方法

cloneNode将当前节点进行克隆返回新的节点（传入boolean类型的值 true 深度克隆 false 为浅度克隆）

替换的相关方法

replacechild 替换子节点
replaceChildren 替换里面的所有内容
replaceWith 将自身进行替换

DOM

概述