很多情况下，小项目不会使用jquery等类似的DOM封装库。它们需要以简单的方式包装。这就需要我们掌握原生JavaScript的DOM操作。这是高度和宽度属性的摘要。window、document、element的height/width属性对总结了（height和width只讨论一个），特别容易忘，不知道加什么，尤其是场景用到window.innerWidth的窗口显示区域的宽度（包括右侧滚动条，不包括开发者工具或窗口任务栏）window.outerWidth窗口的整个宽度（包括右侧滚动条、开发者工具和窗口任务栏，如果任务栏在侧面）.pageXOffset返回窗口文档从左上角到滚动条最左边的距离。（其Y属性可用于回滚到顶部）window.screenX,window.screenLeft返回窗口左上角——即浏览器左上角在设备屏幕screen上的横坐标.width设备屏幕宽度，包括所有屏幕.availWidth设备屏幕宽度，任务栏宽度除外element.offsetWidth元素的可见宽度，包括布局宽度和自身宽度element.offsetLeft元素的水平偏移位置element.scrollWidth返回元素的整体宽度，包括滚动隐藏的element.scrollLeft返回滚动元素的隐藏宽度查找元素document.getElementById('');获取对应ID的元素，返回节点。document.getElementsByName('')获取对应名称的元素集合，返回一个数组。document.getElementsByTagName('')获取对应标签的元素集，如span、div等。返回一个数组。getElementsByClassName()获取对应类的元素集合下面是css选择器，类似jquery使用document.querySelector('')获取第一个匹配元素document.querySelectorAll('')获取所有匹配元素添加和删除元素createTextNode()创建文本节点。createTextNode('thisisatext')createElement()创建一个元素节点。createElement('div')appendChild()向该节点添加一个新节点。appendChild(document.createTextNode('hello'))insertBefore()在某个节点之前添加一个新节点。insertBefore(node1,node2)在node2前面加上node1removeChild()删除其中一个节点。removeChild(node)replaceChild()用新节点替换节点。replaceChild(node1,node2)将node2替换为node1节点属性。使用节点属性时，必须注意这里包括所有节点，包括文本节点和属性节点，不一定只是元素节点parentNode父节点childNodes所有子节点（包括文本节点）firstChild第一个子节点（包括文本节点）lastChild最后一个子节点（包括文本节点）nextSibling下一个兄弟节点（包括文本节点）previousSibling上一个兄弟节点（包括文本节点）nodeType节点类型。9为文档节点，1为元素节点，3为文本节点，8为注释节点，11为documentFragment节点nodeValue当前节点为文本节点时的文本内容nodeName节点的标签名。（文本节点为#text）下面是对元素节点firstElementChild的操作第一个子元素节点lastElementChild最后一个子元素节点nextElementSibling下一个元素节点previousElementSibling上一个元素节点childElementCount子元素节点children所有子元素节点属性操作getAttribute()得到节点的属性setAttribute()设置节点的属性hasAttribute()removeAttribute()方法idclassNametextContent非IE，获取节点中所有子节点（包括文本节点）的文本信息，所有标签信息都会被移除.IE下undefined.innerText是IE独有的，获取本节点所有子节点（包括文本节点）的文本信息。所有标签信息都将被剥离。outerTextIE独有，获取本节点及所有子节点（包括文本节点）的文本信息。同上。innerHTML获取节点内所有子节点的html信息。outerHTML获取本节点及所有子节点的html信息。通过style修改节点的CSS属性，将CSS中-号连接的所有CSS属性转换成驼峰式直接修改。例如：document.getElementById('test').style.backgroundColor='#ccc'。innerHTML,outerHTML,innerText,outerText属性差异事件document.addEventListener("DOMContentLoaded",function()Unknownmacro:{//Code},false);getBoundingClientRect相关左元素的左侧到可见窗口左侧的距离为右元素右侧到可见窗口左侧的距离为顶部元素到顶部元素的距离visiblewindow底部元素到可见窗口顶部的距离就是底部元素到可见窗口顶部的距离width元素的宽度width元素的高度x/y目前是一样的作为let/top鼠标相关事件定位属性screenX/screenY鼠标点击位置到屏幕左上角的距离clientX/clentY鼠标点击位置到可见窗口左上角的距离pageX/pageY的鼠标点击位置到文档左上角的距离offsetX/offsetY鼠标点击位置到当前元素边框内的位置layerX/layerY静态元素到当前元素滚动相关scrollTop元素垂直方向滚动的像素距离scrollLeft元素水平方向滚动像素的距离window.scrollX(window.pageXOffset)像素文档/页面水平滚动的值window.scrollY(window.pageYOffset)文档/页面垂直滚动的像素值scrollTo(xpos,ypos)将内容滚动到指定坐标scrollBy(xnum,ynum)滚动的像素数内容向右下方。元素的大小。offsetWidth=border+padding+widthoffsetHeight=border+padding+heightclientWidth=padding+width-滚动条宽度clientHeight=padding+height-滚动条宽度scrollWidth=padding+containscontentfullwidthscrollHeight=padding+fullheightofcontainingcontent感谢jack.wang的wiki
