整理總結JavaScript常見的BOM操作-js教程-PHP中文網

本篇文章為大家帶來了關於javascript的相關知識，其中主要介紹了關於BOM操作的相關問題，包括了window對象的常見事件、JavaScript執行機制等等相關內容，下面一起來看一下，希望對大家有幫助。

整理總結JavaScript常見的BOM操作

##window物件的常見事件

視窗載入事件：
- document.addEventListener('DOMContentLoaded', function(){})：僅當DOM載入完成，不包括樣式表、圖片，flash的的，相容性
#調整視窗大小的事件：
window.open()方法可以用於導航到指定URL，也可以用於開啟新瀏覽器視窗
- window.open("http://www.wrox.com/", "wroxWindow","height=400,width=400 ,top=10,left=10,resizable=yes");
計時器：
- clearInterval(handle?: long)：取消setInterval
- setTimeout(handler: any, timeout?: long, arguments…: any)：一次
- clearTimeout(handle?: long)：取消setTimeout
window.scroll(x, y)
#window.scrollTo(x, y)：兩者是一樣的用法改變橫向和垂直的捲軸的位置，前提是必須有滾動條在頁面中
window.scrollBy(x, y)：滾動條的累加滾動，正數向下，負數向上window.scrollBy(0, 10)：每100毫秒調用一次的時候，滾動條運動10個像素
window.getComputedStyle(elem, 偽類)
對話方塊
- - 彈出一個警告框，在警告框內顯示提示字串文字
- - 顯示一個確認框，在確認框內顯示提示字串
  - 當使用者點擊"確認"按鈕返回true，點擊"取消"返回false
- - 顯示一個輸入框，在輸入框內顯示提示字串，等待用戶輸入
  - 當使用者點選"確認"按鈕返回使用者輸入，點選"取消"返回null值

JavaScript執行機制

執行js腳本，將js程式碼以同步執行方式放入執行棧，運行執行棧過程中遇見JS非同步程式碼（事件、計時器、ajax、資源載入load、error）放入web APIs （任務佇列），當執行棧裡的程式碼運行完成以後，去任務佇列裡拿第一個進行執行，執行外以後在去任務佇列拿一個過來執行，反覆執行（事件循環）直到任務佇列裡的執行完成

location物件

window.history 用於取得目前頁面的位址URL，並將瀏覽器重新導向到新的頁面

整理總結JavaScript常見的BOM操作

http://www.itcast.cn:80/index.html?name=andy&age=1#link
http：通信协议
www.itcast.cn：域名80：端口
index.html：路径?name=andy&age=1：参数
#link 片段：锚点、链接

登入後複製

物件屬性：

#host：傳回主機名稱（網域名稱）
hostname：設定或傳回目前URL的主機名稱
post：傳回埠號
pathname：返迴路徑
search*：傳回參數
hash：傳回片段（#後面的內容）
protocol：設定或傳回目前URL的協定

物件方法：

replace：取代目前頁面，因為不記錄歷史，所以不能後退頁面
reload：重新載入頁面，相當於刷新功能

navigator物件

整理總結JavaScript常見的BOM操作

navigator：封裝瀏覽器設定資訊的物件

cookieEnabled 当前浏览器是否开启了cookie
- cookie:在客户端的存储空间，且容量较小根据不同的浏览器有不同的大小，可以做到永久保存密匙
- 缺点：特别容易泄露个人信息
plugins 封装了浏览器安装的所有插件信息
userAgent 浏览器的名称，内核版本号等一些列的字符
onLine 电脑是否处于脱机状态电脑联网了吗？
platform 返回运行浏览器的操作系统平台
appCodeName 返回浏览器的代码名
appName 返回浏览器的名称
appVersion 返回浏览器的平台和版本信息

history对象

window.history 对象包括浏览器的历史（url）集合

浏览器的后退功能：history.back()
浏览器的向前功能：history.forward()
进入历史中的某一个页面：history.go()

screen对象

window.screen 对象包含有关用户的信息
整理總結JavaScript常見的BOM操作

// screen:获得显示设备的分辨率大小
// 完整的分辨率:screen.widht/height
// 如何鉴别客户端的种类 兼容所有的客户端 宽度
//      大屏        中屏            小屏            超小屏
//      lg          md               sm             xs
//      TV          pc               pad            phone
//宽  >= 1200      >=992            >= 768

登入後複製

可用屏幕宽度：screen.availWidth
可用屏幕高度：screen.availHeight
屏幕高度：screen.Height
屏幕宽度：screen.Width
屏幕的颜色的位数：colorDepth

元素偏移量offset系列

可以动态得到该元素的位置（偏移）、大小等

获取元素距离定位父元素的位置
获取元素自身大大小
ps：返回的数值不带单位

offset系列常用属性：

element.offseParent：返回作为该元素带有定位的父级元素，如果父级元素都没有定位则返回body
element.offsetTop*：返回元素相对带有定位父元素上方的偏移
element.offsetLeft*：返回元素相对带有定位父元素左方的偏移
element.offsetWidth：返回自身包括padding、边框、内容的宽度，不带单位
element.offsetHeight：返回自身包括padding、边框、内容的高度，不带单位

元素可视区client系列

动态获取元素的边框大小、元素大小等

常用属性：

element.clientTop：元素上边框的大小
element.clientLeft：元素左边框的大小
element.clientWidth*：返回自身包括padding、内容区的宽度，不含边框，不带单位
element.clientHeight*：返回自身包括padding、内容区的高度，不含边框，不带单位

元素滚动scroll系列

动态获取元素的大小、滚动距离

常用属性

element.srcollTop*：返回被卷去的上侧距离，不带单位
element.srcollLeft*：返回被卷去的左侧距离，不带单位
element.srcollWidth：返回自身实际的宽度，不含边框，不带单位
element.srcollHeight：返回自身实际的高度，不含边框，不带单位

滚动条在滚动的时候会触发onscroll事件

查看滚动条的滚动距离

window.pageXOffset/pageYOffset IE8 及IE8以下不兼容 document.body/documentElement.scrollLeft/scrollTop兼容性比较混乱，用时取两个值相加，因为不可能存在两个值同时有值 封装兼容性方法，求滚动条滚轮滚动距离getScrollOffet()

/* 
封装一个获取滚动条的滚动距离  
返回：x:水平滚动条滚动的距离  y:垂直滚动条滚动的距离
*/function getScrollOffet(){
    if(window.pageXOffset){
        return {//对象的{}一定要在关键字后，否则系统会自动加上; 则返回值会是undefined
            x : window.pageXOffset,
            y : window.pageYOffset        }
    }else{//兼容IE8以及以下
        return {
            x : document.body.scrollLeft + document.documentElement.scrollLeft,
            y : document.body.scrollTop + document.documentElement.scrollTop        }
    }}

登入後複製

查看视口的尺寸

window.innerWidth/innerHeightIE8及IE8以下不兼容(注意：这里的宽度和高度不包括菜单栏、工具栏以及滚动条等的高度) document.documentElement.clientWidth/clientHeight标准模式下，任意浏览器都兼容 document.body.clientWidth/clientHeight适用于怪异某事下的浏览器 封装兼容性方法，返回浏览器视口尺寸getViewportOffset()

/*封装返回浏览器视口尺寸
返回值：
    w ：视口的宽度
    h : 视口的高度
*/function getViewportOffset(){
    if(window.innerWidth){
        return {
            w : window.innerWidth,
            h : window.innerHeight        }
    }else{ //兼容IE8以及以下的浏览器
        if(document.compatMode == 'BackCompat'){
            //怪异渲染模式下
            return {
                w : document.body.clientWidth,
                h : document.body.clientHeight            }
        }else{
            // 标准模式
            return {
                w : document.documentElement.clientWidth,
                h : document.documentElement.clientHeight            }
        }
    }}console.log(document.compatMode);// BackCompat 怪异模式// CSS1Compat 标准模式

登入後複製

查看元素的几何尺寸 ES5新增了解

domElement.getBoundingClientRect() 兼容性很好；返回一个对象，该对象中有left、top、right、bottom等属性，left、top代表元素左上角的X和Y坐标， right和bottom表示元素右下角的X和Y坐标height 和 width属性老版本IE未实现返回的结果并不是’实时的’

// 获取元素在文档中的位置function getElementPosition(target){
    // 支持 BoundingClientRect()方法
    if(0 && target.getBoundingClientRect){
        var pos = target.getBoundingClientRect();

        return { // 涉及到滚动条有移动的情况下  加上滚动条的位置
            x : pos.left + Math.max(document.body.scrollLeft, document.documentElement.scrollLeft),
            y : pos.top + Math.max(document.body.scrollTop, document.documentElement.scrollTop)
        }
    } else {
        var pos = {
            left : 0,
            top : 0
        }
        var _elm = target;
        while(target.offsetParent){
            if(_elm == target){//首次累加left 和 top
                pos.left +=  target.offsetLeft;
                pos.top += target.offsetTop;
            }else{
                pos.left +=  target.offsetLeft + target.clientLeft;
                pos.top += target.offsetTop + target.clientTop;
            }
            // target 重新赋值
            target = target.offsetParent;
        }
        return { x : pos.left, y : pos.top}
    }}

登入後複製

属性

状态栏

defaultStatus 改变浏览器状态栏的默认显示
status 临时改变浏览器状态的显示

窗口位置

IE
- screenLeft 宣告視窗的左上角的x座標
- screenTop 宣告視窗的左上角的y座標
- document.body.screenLeft
- document.documentElement.screenLeft 聲明目前文件向右捲動的像素數
- document.body.screenTop
- document.documentElement.screenTop 宣告目前文件向右捲動過的像素數字
!IE
- screenX 宣告視窗的左上角的x座標
- screenY 宣告視窗的左上角的y座標
- #pageXOffset 宣告目前文件向右捲動的像素數
- pageYOffset 宣告目前文件向右捲動過的像素數
FF
- innerHeight 傳回視窗的文檔顯示區的高度
- innerWidth 傳回視窗的文檔顯示區的寬度
- outerWidth 傳回視窗外部寬度
- outerHeight 傳回視窗外部高度