JavaScript常見的BOM操作實例分析

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

10年的長興網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。網(wǎng)絡(luò)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整長興建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。成都創(chuàng)新互聯(lián)公司從事“長興網(wǎng)站設(shè)計”,“長興網(wǎng)站推廣”以來，每個客戶項目都認(rèn)真落實執(zhí)行。

JavaScript常見的BOM操作實例分析

window對象的常見事件

  • 窗口加載事件：

    • window.onload：頁面加載事件，當(dāng)文檔內(nèi)容完全加載完成會觸發(fā)該事件（包括圖像、腳本文件、CSS文件等）就調(diào)用的處理函數(shù)。

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

  • 調(diào)整窗口大小的事件：

    • window.onresize：調(diào)整窗口大小加載事件

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

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

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

  • 計時器：

    • setInterval(handler: any, timeout?: long, arguments…: any)：循環(huán)調(diào)用

    • 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)：滾動條的累加滾動，正數(shù)向下 ，負(fù)數(shù)向上 window.scrollBy(0, 10)：每100毫秒調(diào)用一次的時候，滾動條運動10個像素

  • window.getComputedStyle(elem, 偽類)

  • 對話框

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

    • 顯示一個輸入框，在輸入框內(nèi)顯示提示字符串，等待用戶輸入

    • 當(dāng)用戶單擊"確認(rèn)"按鈕返回用戶輸入，單擊"取消"返回null值

    • confirm(“提示字符串”)

    • 顯示一個確認(rèn)框，在確認(rèn)框內(nèi)顯示提示字符串

    • 當(dāng)用戶單擊"確認(rèn)"按鈕返回true，單擊"取消"返回false

    • alert(“提示字符串”)

    • 彈出一個警告框，在警告框內(nèi)顯示提示字符串文本

    • alert

    • confirm

    • prompt

JavaScript執(zhí)行機制

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

location對象

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

JavaScript常見的BOM操作實例分析

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

對象屬性：

  • href*：獲取或者設(shè)置整個URL

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

  • hostname：設(shè)置或返回當(dāng)前URL的主機名

  • post：返回端口號

  • pathname：返回路徑

  • search*：返回參數(shù)

  • hash：返回片段（#后面的內(nèi)容）

  • protocol：設(shè)置或返回當(dāng)前URL的協(xié)議

對象方法：

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

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

  • reload：重新加載頁面，相當(dāng)于刷新功能

navigator對象

JavaScript常見的BOM操作實例分析
JavaScript常見的BOM操作實例分析

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

  • cookieEnabled 當(dāng)前瀏覽器是否開啟了cookie

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

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

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

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

  • onLine 電腦是否處于脫機狀態(tài) 電腦聯(lián)網(wǎng)了嗎？

  • platform 返回運行瀏覽器的操作系統(tǒng)平臺

  • appCodeName 返回瀏覽器的代碼名

  • appName 返回瀏覽器的名稱

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

history對象

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

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

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

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

screen對象

window.screen 對象包含有關(guān)用戶的信息
JavaScript常見的BOM操作實例分析

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

  • 可用屏幕寬度：screen.availWidth

  • 可用屏幕高度：screen.availHeight

  • 屏幕高度：screen.Height

  • 屏幕寬度：screen.Width

  • 屏幕的顏色的位數(shù)：colorDepth

元素偏移量offset系列

可以動態(tài)得到該元素的位置（偏移）、大小等

  • 獲取元素距離定位父元素的位置

  • 獲取元素自身大大小

  • ps：返回的數(shù)值不帶單位

offset系列常用屬性：

  • element.offseParent：返回作為該元素帶有定位的父級元素，如果父級元素都沒有定位則返回body

  • element.offsetTop*：返回元素相對帶有定位父元素上方的偏移

  • element.offsetLeft*：返回元素相對帶有定位父元素左方的偏移

  • element.offsetWidth：返回自身包括padding、邊框、內(nèi)容的寬度，不帶單位

  • element.offsetHeight：返回自身包括padding、邊框、內(nèi)容的高度，不帶單位

元素可視區(qū)client系列

動態(tài)獲取元素的邊框大小、元素大小等

常用屬性：

  • element.clientTop：元素上邊框的大小

  • element.clientLeft：元素左邊框的大小

  • element.clientWidth*：返回自身包括padding、內(nèi)容區(qū)的寬度，不含邊框，不帶單位

  • element.clientHeight*：返回自身包括padding、內(nèi)容區(qū)的高度，不含邊框，不帶單位

元素滾動scroll系列

動態(tài)獲取元素的大小、滾動距離

常用屬性

  • element.srcollTop*：返回被卷去的上側(cè)距離，不帶單位

  • element.srcollLeft*：返回被卷去的左側(cè)距離，不帶單位

  • element.srcollWidth：返回自身實際的寬度，不含邊框，不帶單位

  • element.srcollHeight：返回自身實際的高度，不含邊框，不帶單位

滾動條在滾動的時候會觸發(fā)onscroll事件

查看滾動條的滾動距離

window.pageXOffset/pageYOffset IE8 及IE8以下不兼容 document.body/documentElement.scrollLeft/scrollTop兼容性比較混亂，用時取兩個值相加，因為不可能存在兩個值同時有值 封裝兼容性方法，求滾動條滾輪滾動距離getScrollOffet()

/* 
封裝一個獲取滾動條的滾動距離  
返回：x:水平滾動條滾動的距離  y:垂直滾動條滾動的距離
*/function getScrollOffet(){
    if(window.pageXOffset){
        return {//對象的{}一定要在關(guān)鍵字后，否則系統(tǒng)會自動加上; 則返回值會是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標(biāo)準(zhǔn)模式下，任意瀏覽器都兼容 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{
            // 標(biāo)準(zhǔn)模式
            return {
                w : document.documentElement.clientWidth,
                h : document.documentElement.clientHeight            }
        }
    }}console.log(document.compatMode);// BackCompat 怪異模式// CSS1Compat 標(biāo)準(zhǔn)模式

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

domElement.getBoundingClientRect() 兼容性很好；返回一個對象，該對象中有l(wèi)eft、top、right、bottom等屬性，left、top代表元素左上角的X和Y坐標(biāo)， right和bottom表示元素右下角的X和Y坐標(biāo)height 和 width屬性老版本IE未實現(xiàn) 返回的結(jié)果并不是’實時的’

// 獲取元素在文檔中的位置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}
    }}

屬性

狀態(tài)欄

  • defaultStatus 改變?yōu)g覽器狀態(tài)欄的默認(rèn)顯示

  • status 臨時改變?yōu)g覽器狀態(tài)的顯示

窗口位置

  • IE

    • screenLeft 聲明窗口的左上角的x坐標(biāo)

    • screenTop 聲明窗口的左上角的y坐標(biāo)

    • document.body.screenLeft

    • document.documentElement.screenLeft 聲明當(dāng)前文檔向右滾動過的像素數(shù)

    • document.body.screenTop

    • document.documentElement.screenTop 聲明當(dāng)前文檔向右滾動過的像素數(shù)

  • !IE

    • screenX 聲明窗口的左上角的x坐標(biāo)

    • screenY 聲明窗口的左上角的y坐標(biāo)

    • pageXOffset 聲明當(dāng)前文檔向右滾動過的像素數(shù)

    • pageYOffset 聲明當(dāng)前文檔向右滾動過的像素數(shù)

  • FF

    • innerHeight 返回窗口的文檔顯示區(qū)的高度

    • innerWidth 返回窗口的文檔顯示區(qū)的寬度

    • outerWidth 返回窗口外部寬度

    • outerHeight 返回窗口外部高度

其他屬性

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

  • closed 當(dāng)前窗口關(guān)閉時返回true

  • name 設(shè)置或返回窗口的名稱

  • self 返回對當(dāng)前窗口的引用

感謝各位的閱讀，以上就是“JavaScript常見的BOM操作實例分析”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對JavaScript常見的BOM操作實例分析這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

網(wǎng)站名稱：JavaScript常見的BOM操作實例分析
瀏覽路徑：http://muchs.cn/article28/gppjjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、網(wǎng)站收錄、云服務(wù)器、外貿(mào)網(wǎng)站建設(shè)、手機網(wǎng)站建設(shè)、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站建設(shè)網(wǎng)站維護公司