DOM概述

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

DOM中的对象

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

浏览器渲染HTML的过程

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

DOM树大的结构

DOM的相关操作

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

getElementById通过id获取元素返回的是一个元素对象
getElementsByClassName 通过class来获取返回的是HTMLCollection（伪数组）有兼容问题
getElementByTagName 通过标签名进行获取返回的是HTMLCollection(伪数组)
getElementByName 通过name属性进行获取返回的是NodeList(伪数组) 有兼容问题
querySelector 通过选择器获取第一个找到的元素（返回的是元素对象）有兼容问题
querySelectorAll 通过选择器获取全部的元素返回的是NodeList(伪数组) 有兼容问题

伪数组特性下标访问 length长度

HTMLCollection 伪数组和 NodeList 伪数组的区别

HTMLCollection 是即时更新的（live）；当其所包含的文档结构发生变化时，它会自动更新
NodeList 是一个静态集合，也就意味着随后对文档对象模型的任何改动都不会影响集合的内容（相当于是一个快照）

关于document的相关元素获取

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

元素的相关属性

所有元素都具备的属性（可读可写）

title 标题
tagName 标签名
id id值
classNmae class名
classList class列表 (add 添加 remove 移除 toggle 切换 )返回的是一个数组或者伪数组
style 样式
innerText 显示的文本
innerHTML 显示的html
textContent 获取标签内所有的内容类似于innerText 他抽取所有的显示的文本内容

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

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

var obj={}
obj.name='jack'

元素属性（显示在DOM上）

var element=new HTMLElement()
element.id='box'

元素类型的特点（相关的元素属性）

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

原本就有的元素属性有

img的 src和alt
input的 type 、value、placeholder
a标签的href 、target

元素属性操作的方法（可以操作任意属性初始属性自定义属性）元素对象的方法

getAttribute获取属性只看你的DOM元素上写没写没写就是null
setAttribuute 设置属性将对应的属性设置到DOM上显示
removeAttribute 删除属性通过属性名来移除对应的属性完全为空
elememt.getAttribute(attributeName)

样式获取

使用style标签获取样式

使用getComputedStyle全局方法来获取样式
兼容写法

重绘和回流

回流回流又叫重排（对于页面的布局进行重新排列）

触发回流的要求

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

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

触发重回的要求

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

Node

节点的分类

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

节点对应的属性

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

元素节点的属性

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

节点相关方法

创建节点的方法（document）

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

DOM