DOM

w3c提供了一些操作HTML、XHTML的一些API。目前主要出现三个级别。

DOM LEVEL 1

dom1的主要作用是将HTML、XML文档描绘成一个多层不同节点，并把节点分为几种类型。出现在1998年

1. Node 类型 所有的节点都是继承该节点，提供一些基本的属性跟方法。比如节点的增删改查。

• 1.1 增 appendChild insertBefore replaceChild

2. Document 类型
   标识代表整个html页面。一般其子节点未document.documentElement该属性指向html。 document.documentBody该属性指向body。 document.title设置标题，document.domain获取域名，document.referrer获取来源，document.getElementById()查找元素id

3. Element 类型 元素标签，包含的id classname title 等属性，方法包含getAttribute``setAttribute document.createElement('div')

4. Text 类型 纯文本。创建文本document.createTextNode('txt')

5. Comment 类型 注释类型

6. DocumentType 类型 html第一段 ;早期的时候是为了让浏览器识别当前文件是html而不是xml文件类型作用。现在网上基本都是html。所以可以忽略

7. DocumentFragment 类型 文档碎片，临时变量

8. Attr 类型

DOM LEVEL 2

此后大概2008年后，w3c把市面用的比较多、又很多不错的操作htmlAPI,又纳入的标准，此时出现dom2

选择器

1. document.querySelector()
2. document.querySelectorAll()

HTML5

1. classList 属性

element.classList.add().remove().toggle().contains()
               

2. 自定义数据属性 规定可以为元素添加非标准属性，但要添加前缀data-

3. innerHTML

4. srollIntoView() 让元素滚动到可视区

DOM LEVEL 2-3 扩展

到了现在又加了些东西，

1. style dom2的时候为元素类型的节点添加了style属性 可以直接通过element.style.width="200px"来设置

2. getComputedStyle() 获取元素所有计算的样式

元素大小

1. 偏移量 offsetTop，offsetLeft，offsetWidth，offsetHeight

2. 客户区大小 clientWidth，clientHeight

3. 滚动大小 scrollHeight，scrollWidth，scrollLeft，scrollTop