JavaScript常用原生DOM操作

Posted 2020-08-21

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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
                }
            }
        }