JavaScript常見的BOM操作實例分析

這篇文章主要講解了“JavaScript常見的BOM操作實例分析”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“JavaScript常見的BOM操作實例分析”吧！

window對象的常見事件

• 窗口加載事件：

• window.onload：頁面加載事件，當文檔內容完全加載完成會觸發該事件（包括圖像、腳本文件、CSS文件等）就調用的處理函數。

• document.addEventListener(‘DOMContentLoaded’, function(){})：僅當DOM加載完成，不包括樣式表、圖片，flash的的，兼容性

• 調整窗口大小的事件：

• window.onresize：調整窗口大小加載事件

• window.open()方法可以用于導航到指定 URL，也可以用于打開新瀏覽器窗口

• 這個方法接收 4 個參數：要加載的 URL、目標窗口、特性字符串和表示新窗口在瀏覽器歷史記錄中是否代當前加載頁面的布爾值

• window.open("http://www.wrox.com/", "wroxWindow","height=400,width=400,top=10,left=10,resizable=yes");

• 計時器：

• setInterval(handler: any, timeout?: long, arguments…: any)：循環調用

• 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, 偽類)

• 對話框

• prompt(“提示字符串”,“默認值”)

• 顯示一個輸入框，在輸入框內顯示提示字符串，等待用戶輸入

• 當用戶單擊"確認"按鈕返回用戶輸入，單擊"取消"返回null值

• confirm(“提示字符串”)

• 顯示一個確認框，在確認框內顯示提示字符串

• 當用戶單擊"確認"按鈕返回true，單擊"取消"返回false

• alert(“提示字符串”)

• 彈出一個警告框，在警告框內顯示提示字符串文本

• alert

• confirm

• prompt

JavaScript執行機制

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

location對象

window.history 用于獲取當前頁面的地址URL，并把瀏覽器重定向到新的頁面

http://www.itcast.cn:80/index.html?name=andy&age=1#link
http：通信協議
www.itcast.cn：域名80：端口
index.html：路徑?name=andy&age=1：參數
#link 片段：錨點、鏈接

對象屬性：

• href*：獲取或者設置整個URL

• host：返回主機名（域名）

• hostname：設置或返回當前URL的主機名

• post：返回端口號

• pathname：返回路徑

• search*：返回參數

• hash：返回片段（#后面的內容）

• protocol：設置或返回當前URL的協議

對象方法：

• assign：和href一樣，可以跳轉頁面（也稱為重定向頁面）

• replace：替換當前頁面，因為不記錄歷史，所以不能后退頁面

• reload：重新加載頁面，相當于刷新功能

navigator對象

navigator：封裝瀏覽器配置信息的對象

• cookieEnabled 當前瀏覽器是否開啟了cookie

• cookie:在客戶端的存儲空間，且容量較小根據不同的瀏覽器有不同的大小，可以做到永久保存 密匙

• 缺點：特別容易泄露個人信息

• plugins 封裝了瀏覽器安裝的所有插件信息

• userAgent 瀏覽器的名稱，內核 版本號 等一些列的字符

• onLine 電腦是否處于脫機狀態 電腦聯網了嗎？

• platform 返回運行瀏覽器的操作系統平臺

• appCodeName 返回瀏覽器的代碼名

• appName 返回瀏覽器的名稱

• appVersion 返回瀏覽器的平臺和版本信息

history對象

window.history 對象包括瀏覽器的歷史（url）集合

• 瀏覽器的后退功能：history.back()

• 瀏覽器的向前功能：history.forward()

• 進入歷史中的某一個頁面：history.go()

screen對象

window.screen 對象包含有關用戶的信息

// screen:獲得顯示設備的分辨率大小
// 完整的分辨率:screen.widht/height
// 如何鑒別客戶端的種類 兼容所有的客戶端 寬度
//      大屏        中屏            小屏            超小屏
//      lg          md               sm             xs
//      TV          pc               pad            phone
//寬  >= 1200      >=992            >= 768           < 768
// 全掉任務欄之后剩余的分辨率
// screen.availHeight/availWidth

• 可用屏幕寬度：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 返回窗口外部高度

其他屬性

• opener 可以實現同域名下跨窗體之間的通訊 一個窗體要包含另一個窗體的opener

• closed 當前窗口關閉時返回true

• name 設置或返回窗口的名稱

• self 返回對當前窗口的引用

感謝各位的閱讀，以上就是“JavaScript常見的BOM操作實例分析”的內容了，經過本文的學習后，相信大家對JavaScript常見的BOM操作實例分析這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！