MDN 文档对象模型手册：https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model
Node节点 ①五大节点类型 document 文档对象节点 element 元素节点 attribute 属性节点 text 文本节点 comment 注释节点 ②节点的注释 nodeName 节点名 元素节点的nodeName返回标签名 nodeValue 节点值 bodeType 节点类型 document:9; element:1; attribute:2; text:3 获取元素 获取所有元素 document.all; //获取 HTMLCollection对象，由文档中所有元素组成的伪数组document.all作为语法糖，判断IE还是非IE
if(document.all){ document.write(\'我是IE浏览器\'); }else{ document.write(\'我不是IE浏览器\'); } DOM 操作元素的属性 内置属性 element.属性名 //复制和读取都可以 自定义属性 element.dataset.属性名; //获取和赋值都可以 DOM 操作元素的样式 读取计算样式（只读）计算样式：所有作用在元素上的CSS样式，不论在哪里设置的，称之为计算样式
//IE9+ getComputedStyle(元素对象) //返回一个对象 //IE8以下 元素对象.currentStyle.属性名 //定义函数获取元素计算样式 function getStyle(ele,attr){ if(window.getComputedStyle){ //IE9+ return getComputedStyle(ele)[attr]; }else{ //IE8 return ele.currentStyle[attr]; } } DOM操作获取元素尺寸 offsetWidth / offsetHeight 内容+内边距+边框 clientWidth / clientHeight 内容+内边距 scrollWidth / scrollHeight 内容溢出，考虑溢出情况，不溢出同client系列 getBoundingClientRect() 返回对象，对象中有width和height等属性 获取视口的尺寸 window.innerWidth window.innerHeight document.documentElement.clientWidth document.documentElement.clientHeight二者区别：
1.如果窗口没有滚动条，二者获取的结果一致
2.如果出现了滚动条，window系列会加上滚动条的宽度，不好使
获取整个页面的高度 document.body.scrollHeight document.documentElement.scrollHeight DOM操作获取元素的位置 获取元素的位置（只读） offsetLeft / offsetTop 获取元素在包含块上的位置 clientLeft / clientTop 获取的是左边框和上边框的宽度 getBoundingclientRect() 返回对象，对象中有left和top属性 获取元素在视口上的位置 getBoundingClientRect() 元素.getBoundingClientRect() 返回DOMRect对象 只读 DOMRect对象： width 元素款（内容+内边距+边框） height 元素高（内容+内边距+边框） left 元素左上角在视口上的 x 坐标 top 元素左上角在视口上的 y 坐标 right 元素右下角在视口上的 x 坐标 bottom 元素右下角在视口上的 y 坐标 x 同 left y 同 top 元素中内容的位置（可读写） 属性 scrollLeft scrollTop 获取元素移动的位置 scrollLeft 值越大，元素中的内容向左移动的越多； scrollTop 越大，元素中的内容向上移动的越大 scrollLeft 和 scrollTop 可以进行赋值， 不能是负值,最小是 0 设置 scrollLeft 和 scrollTop 生效的前提是，元素设置了 overflow 且不是默认值