一，定义
DOM(document object model)
javascript 中使用DOM来操作XHTML文档中的元素
浏览器窗口就是一个“对象”，当浏览器载入一个网页时，该网页被认为是一个文档，而文档本身也是一个“对象”，文档中也可以包含其他对象，例如图片，标题，段落，文本输入框等，对象具有某些属性，操作对象的动作叫做方法，DOM是对象，属性和方法的集合
二，获取dom元素的方法
1，getElementById('')根据ID获取元素；
2，getElementsByTagName('')根据标签名获取元素；
3，getElementsByName('')通过name属性获取元素；
4，getElementsByClassName('')通过类名获取元素；
5，document.querySelect('')通过css选择器获取，返回匹配指定选择器的第一个元素；
5，do'cument.querySelectAll('')通过css选择器获取，返回匹配指定选择器的全部元素；
三，事件和事件处理器
| 事件 | 事件处理器 | 用途 |
|---|---|---|
| click | onclick | 用户点击某个对象 |
| load | onload | 浏览器点击网页时触发 |
| mouseover | onmouseover | 鼠标经过某个对象 |
| mouseout | onmouseout | 鼠标离开某个对象 |
| submit | onsubmit | 用户提交表单中的按钮 |
| upload | onupload | 用户退出某网页时触发 |
四，DOM的尺寸和位置
1,clientWidth和clientHeight
表示dom元素的宽度和高度（其中不包含margin和border）
2，clientLeft和clientTop
表示dom元素的左边框和上边框的大小
3，offsetWidth和offsetHeight
表示dom元素的内容+内边距+边框的宽和高 （其中不包含margin）
4,offsetLeft和offsetTop
表示dom元素的外边框到其已定位父元素的距离
5，offsetParent
表示该元素最近定位的祖先元素
6，scrollWidth和scrollHeight
表示元素的内容+内边距+溢出的距离，如果元素没有溢出，则其与clientWidth和clientHeight一样
7，scrollTop和scrollLeft
表示元素水平和垂直方向上溢出的距离，也是水平和垂直方向上滚动的距离
8，getBoundingClientRect
返回一个对象，left、right、top、bottom、height、width 属性的对象，分别表示元素四个位置相对于窗口的坐标（注意：它们都是给予浏览器的左上边缘），其中返回的 height 和 width 包含内边距和边框：
