JavaScript常用原生DOM操作

Posted

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如果开启混杂模式,则可以兼容IE4IE5的语法

判断是不是怪异模式: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返回最近有定位的父级!!!

这里还需要说明一下:

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

    对于有定位的父级返回相对父级的位置(自己有无定位都可以)!!!

 

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

以上是关于JavaScript常用原生DOM操作的主要内容,如果未能解决你的问题,请参考以下文章

认识JQuery,JQuery的优势语法多库冲突JS原生对象和JQuery对象之间相互转换和DOM操作,常用的方法

Javascript操作DOM常用API总结

原生JS实现几个常用DOM操作API

javascript_操作dom_原生

Javascript-DOM笔记

repostJavascript操作DOM常用API总结