最近，自己在投简历，找工作，在忙碌的复习当中，希望把有用的知识分享出去，是自己的成长，也可以给别人帮助。 今天给大家分享一些常用的原生的JavaScript DOM 操作。
OK，那开始吧，那就开始吧O(∩_∩)O~~
一.查看浏览器视口尺?
window.innerWidth/window.innerHeight(IE8以及IE8以下不能用 (′д｀ )…彡 ） document.documentElement.clientHeight/document.documentElement.clientWidth(标准模式下 可以使用（好长啊！！！） document.body.clientHeight/document.body.clientWidth(怪异模式可用)
这么多方法，有的能用有的不能用怎么办呢？？
那就封装一个getViewportOffset()
1 function getViewportOffset(){
2 if(window.innerWidth){
3 return {
4 w : window.innerWidth,
5 h : window.innerHeight
6 }
7 }else{
8 if(document.compatMode === ‘CSS1Compat‘){
9 return {
10 w : document.documentElement.clientWidth,
11 h : document.documentElement.clientHeight
12 }
13 }else{
14 return {
15 w : document.body.clientWidth,
16 h : document.body.clientHeight
17 }
18 }
19 }
20 }
在这里要说明一下：
标准模式：按照浏览器当前的语法进行渲染
怪异模式：（混杂模式）为防止老版本浏览器在新版本上不能使用，采取向后兼容。如：
IE6如果开启混杂模式，则可以兼容IE4和IE5的语法
判断是不是怪异模式：document.compatMode。
是：打印BackCompat；不是：打印CSS1Compat
怎么样呢，这样都在一起了，兼容性也不用考虑，是不是很棒！！！
下一个是谁呢？？？
滚动条，就是你了
那么滚动条有哪些东东呢！！！
滚动，获取滚动位置
滚动，有三个方法scroll(),scrollTo(),scrollBy()；
参数（x, y）横纵滚动条的位置
我靠有这么多，别急，区别很明显也很好记。。。
ScrollBy()具有累加功能，多次调用，会在原来的基础上增加，其余那俩就不会啦。。。 大家都读过小说吧，自动阅读工能就可以做啦，那怎么做呢 上菜！！！
?
window.setInterval(function (){
scrollBy(0, 100);
},30);
没有错，就是这样。。。（别打我）
那么下一个能让他动，怎么获取他的位置呢！！！
那就是
window.pageXOffsetLeft/window.pageYOffsetTop(IE8以及以下不能用,怎么又是IE8....）
document.documentElement. scrollTop/document.documentElement.scrollLeft
document.body.scrollTop/document.body.scrollLeft(咦，下面这俩货，貌似似曾相识)
没有错，就是前缀都相同的他们，由于兼容性比较混乱，针对IE8以及IE8 ↓ 都好用，那么，那么，那么，在封装一个！！！！！getScrollOffset
?
function getScrollOffset() {
if(window.pageXOffset){
return {
x : window.pageXOffset,
y : window.pageYOffset
}
}else{
return {
x : document.documentElement.scrollLeft + document.body.scrollLeft,
y : document.documentElement.scrollTop + document.body.scrollTop
//对于他俩真不知怎么区分，那么通过相 + 的方式来计算，放心同一个方法一代版本浏览器只有一个！！！！
}
}
}
?
诶呀我去，又搞定一个，那还差谁呢？？
查看元素尺寸！！！
这个嘛，有没有上面那么烦人了
上方法
elem.getBoundingClientRect():兼容性很好，O(∩_∩)O~~
返回值是这样的对象
?
?这里要说明一下老版本IE没有实现width和height，还有这里返回width = border + padding + content，height同理，要记清楚哦，既然他没有实现，那只好作为JavaScript界中的大牛的我（吹吹牛，别当真，当真其实也没什么）；
要来了（这里只做了width和height的兼容性处理）
?
?
function getElementOffset (elem) {
var obj = elem.getBoundingClientRect();
if(obj.width){
return {
w : obj.width,
h : obj.height
}
}else{
return {
w : obj.right - obj.left,
w : obj.bottom - obj.top
}
}
}
?还不错吧，别急别急，还有最后一个我保证！！！！
查看元素尺寸
ele.offsetWidth/ele.offsetHeight 返回元素的宽高，是 100 而不是 100px !!!
查看元素位置
ele.offsetTop/ele.offsetLeft 获取元素的top/left
查看元素位置
ele.offsetTop/ele.offsetLeft 获取元素的top/left
ele.offsetParent返回最近有定位的父级！！！
这里还需要说明一下：
对于无定位的父级返回在文档中坐标
对于有定位的父级返回相对父级的位置（自己有无定位都可以）！！！
今天就写这么多了，也不知道大家怎么看，这也是第一次写博客，大家看看就好，有问题的话，记得要反馈哦，好了本篇文章就写这些吧。