JavaScript常用原生DOM操作

　最近，自己在投简历，找工作，在忙碌的复习当中，希望把有用的知识分享出去，是自己的成长，也可以给别人帮助。 今天给大家分享一些常用的原生的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返回最近有定位的父级！！！

这里还需要说明一下：

    对于无定位的父级返回在文档中坐标

    对于有定位的父级返回相对父级的位置（自己有无定位都可以）！！！

 

今天就写这么多了，也不知道大家怎么看，这也是第一次写博客，大家看看就好，有问题的话，记得要反馈哦，好了本篇文章就写这些吧。