Element 类型
Element 类型用于表现XML和HTML元素，提供了对元素标签名，子节点及特性的访问
我们平时创建的div、p、span等元素在DOM中表示为Element元素
常见属性
- 子元素 children childNodes
- tagName
- id/class
- clientWidth/clientHeight
- clientLeft/clientTop
- offsetLeft/offsetTop
常见方法
获取特性 getAttribute 修改某个特性 setAttribute
创建元素 document.createElement()
Text 类型
文本节点由Text类型表示，包含的是可以照字面解释的纯文本内容
- 创建文本节点：document.createTextNode()
Comment 类型
注释
DocumentFragment 类型
DOM规定文档片段是一种轻量级的文档，不会像完整的文档那样占有额外的资源
可以在里面保存将来会添加到文档的节点。要创建文档片段，可以使用document.createDocumentFragment()
文档片段本身永远不会成为文档树的一部分
Attr类型
元素的特性在DOM中用Attr类型来表示。很少使用。
总结
DOM1级将HTML和XML文档看作一个层次化的节点树，方便js来直接操作。
DOM 是由各种节点构成的
- 最基本节点是Node,所有的节点都继承自Node
- Document 表示整个文档
- Element 表示文档中的HTML 或者XML 元素
DOM扩展
对DOM的扩展主要包括 选择符API 和 HTML5
选择符API
选择符，最核心的两个API 就是 querySelector() 和 querySelectorAll()
可以通过Document 和 Element 类型的实例调用
const divEl1 = document.querySelector(".content") const divEl2 = document.querySelectorAll(".content")
HTML5
html5涉及的面非常广，我们这里这讨论与DOM 节点相关的内容
获取dom元素
- getElementsByClassName() 可以通过document 对象和所有HTML元素调用该方法，查询一个或者包含类名的字符串
自定义数据属性
可以为元素添加非标准的属性，但是要添加前缀 data-
通过元素的 dataset 属性来访问自定义的属性的值
<div id ="myDiv" data-appId = "12345" data-name="yz"></div> var div = document.getElementById('myDiv') var appId = div.dataset.appId var name = div.dataset.name
插入标记
innerHTML属性
- 可以获取调用元素的所有子节点对应的html片段
- 可以是根据指定的值创建DOM树，替换原有的元素节点
一般我们插入大量新HTML标记时，使用innerHTML 与通过多次DOM操作先创建节点再指定它们之间的关系相比，效率更高，因为在设置innerHTML 时就会先创建一个HTML解析器，这个解析是在浏览器级别的基础上代码（c++）运行的，因此比执行js 快得多，当然也会带来 创建销毁 html 解析器也有性能消耗。所以控制次数。
DOM2和DOM3
DOM1级主要定义的是HTML和XML文档的底层结构
DOM2级和DOM3级是在这个结构基础上引入了更多的交互能力和特性。扩展了DOM API,以满足操作DOM的所有需求，同时提供更好的错误处理和特性监测能力
DOM变化
- Node 类型 Document 类型 Element 类型 增加了命名空间的概念
- DOM3引入 两个辅助比较节点的方法 isSameNode() 和 isEqualNode( )
- 一个判断相同 两个节点引用的是同一个对象
- 一个判断相等 两个节点是同类型的对象，具有相等的属性（nodeName,nodeValue等等），而且他们的attributes和 childNodes属性也相等（相同位置包含相同的）
var div1 = document.createElement("div") div1.setAttribute("class","box") var div1 = document.createElement("div") div1.setAttribute("class","box") alert(div1.isSameNode(div1)) // true alert(div1.isEqualNode(div1)) // true alert(div1.isSameNode(div2)) // false
- iframe中的文档对象可以通过contentDocument 访问 所有浏览器都支持
var iframe = document.getElementById("myIframe") var iframe = iframe.contentDocuemnt || iframe.contentWindow.document
样式变化
访问元素的样式
- 新增style属性 可以通过style对象访问所有样式信息，也可以进行修改
- document.default.getComputedStyle(dom) 可以返回整个dom的样式
操作样式表
- 大多数情况下，使用style属性就可以满足所有操作样式柜子的需求
元素大小
- 偏移量
- offsetHeight offsetWdith offsetLeft offsetTop
- 可以通过以上四个属性计算
- 客户区大小
- clientHeight clientWidth
- 滚动大小
- scrollHeight scrollWidth scrollLeft scrollTop
- scrollLeft scrollTop可以用来确定当前元素滚动状态
确定元素大小
- getBoundClientRect()返回一个矩形对象，包含四个属性 left top right bottom,给出了元素在页面中相对于视口的位置。
- top/y：元素上边到视窗上边的距离;
- right：元素右边到视窗左边的距离;
- bottom：元素下边到视窗上边的距离;
- left/x：元素左边到视窗左边的距离;
- width：元素的宽度;
- height：元素的高度;
范围
为了让开发人员更方便得控制页面，dom2 定义了范围 range接口。
document.createRange()
- 用dom范围实现简单选择
var range1 = document.createRange() var p1 = document.getElementById('p1') range1.selcetNode(p1)
- 也可以操作修改dom范围中的内容
小结
dom2 级主要新增了操作样式的能力和操作范围内dom的能力
总结
对于dom和bom的学习，我所秉持的观点依然是，抓大放小，建立知识体系，常用的api可以了解，不常用的api知道去哪里查就好，因为平常业务开发也接触不到太底层的代码。
框架发展到今天，对我们前端开发来说，已经很少去操作Dom了，但框架已经帮助我们做了，对于Bom的交互也有很多封装成熟的函数库，但是如果要对前端深入学习，我觉得这些知识还是必须掌握的，前端学习js 永远是基础，框架函数库，都是锦上添花的东西。
我们要知其然，更要知其所以然。
