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

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

window對(duì)象的常見(jiàn)事件

• 窗口加載事件：

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

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

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

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

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

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

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

• 計(jì)時(shí)器：

• 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)：兩者是一樣的用法 改變橫向和垂直的滾動(dòng)條的位置，前提是必須有滾動(dòng)條在頁(yè)面中

• window.scrollBy(x, y)：滾動(dòng)條的累加滾動(dòng)，正數(shù)向下 ，負(fù)數(shù)向上 window.scrollBy(0, 10)：每100毫秒調(diào)用一次的時(shí)候，滾動(dòng)條運(yùn)動(dòng)10個(gè)像素

• window.getComputedStyle(elem, 偽類)

• 對(duì)話框

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

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

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

• confirm(“提示字符串”)

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

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

• alert(“提示字符串”)

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

• alert

• confirm

• prompt

JavaScript執(zhí)行機(jī)制

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

location對(duì)象

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

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 片段：錨點(diǎn)、鏈接

對(duì)象屬性：

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

• host：返回主機(jī)名（域名）

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

• post：返回端口號(hào)

• pathname：返回路徑

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

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

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

對(duì)象方法：

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

• replace：替換當(dāng)前頁(yè)面，因?yàn)椴挥涗洑v史，所以不能后退頁(yè)面

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

navigator對(duì)象

navigator：封裝瀏覽器配置信息的對(duì)象

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

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

• 缺點(diǎn)：特別容易泄露個(gè)人信息

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

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

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

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

• appCodeName 返回瀏覽器的代碼名

• appName 返回瀏覽器的名稱

• appVersion 返回瀏覽器的平臺(tái)和版本信息

history對(duì)象

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

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

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

• 進(jìn)入歷史中的某一個(gè)頁(yè)面：history.go()

screen對(duì)象

window.screen 對(duì)象包含有關(guān)用戶的信息

// 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系列

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

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

• 獲取元素自身大大小

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

offset系列常用屬性：

• element.offseParent：返回作為該元素帶有定位的父級(jí)元素，如果父級(jí)元素都沒(méi)有定位則返回body

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

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

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

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

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

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

常用屬性：

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

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

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

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

元素滾動(dòng)scroll系列

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

常用屬性

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

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

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

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

滾動(dòng)條在滾動(dòng)的時(shí)候會(huì)觸發(fā)onscroll事件

查看滾動(dòng)條的滾動(dòng)距離

window.pageXOffset/pageYOffset IE8 及IE8以下不兼容 document.body/documentElement.scrollLeft/scrollTop兼容性比較混亂，用時(shí)取兩個(gè)值相加，因?yàn)椴豢赡艽嬖趦蓚€(gè)值同時(shí)有值 封裝兼容性方法，求滾動(dòng)條滾輪滾動(dòng)距離getScrollOffet()

/* 
封裝一個(gè)獲取滾動(dòng)條的滾動(dòng)距離  
返回：x:水平滾動(dòng)條滾動(dòng)的距離  y:垂直滾動(dòng)條滾動(dòng)的距離
*/function getScrollOffet(){
    if(window.pageXOffset){
        return {//對(duì)象的{}一定要在關(guān)鍵字后，否則系統(tǒng)會(huì)自動(dòng)加上; 則返回值會(huì)是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以下不兼容(注意：這里的寬度和高度不包括菜單欄、工具欄以及滾動(dòng)條等的高度) 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() 兼容性很好；返回一個(gè)對(duì)象，該對(duì)象中有l(wèi)eft、top、right、bottom等屬性，left、top代表元素左上角的X和Y坐標(biāo)， right和bottom表示元素右下角的X和Y坐標(biāo)height 和 width屬性老版本IE未實(shí)現(xiàn) 返回的結(jié)果并不是’實(shí)時(shí)的’

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

        return { // 涉及到滾動(dòng)條有移動(dòng)的情況下  加上滾動(dòng)條的位置
            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 臨時(shí)改變?yōu)g覽器狀態(tài)的顯示

窗口位置

• IE

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

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

• document.body.screenLeft

• document.documentElement.screenLeft 聲明當(dāng)前文檔向右滾動(dòng)過(guò)的像素?cái)?shù)

• document.body.screenTop

• document.documentElement.screenTop 聲明當(dāng)前文檔向右滾動(dòng)過(guò)的像素?cái)?shù)

• !IE

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

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

• pageXOffset 聲明當(dāng)前文檔向右滾動(dòng)過(guò)的像素?cái)?shù)

• pageYOffset 聲明當(dāng)前文檔向右滾動(dòng)過(guò)的像素?cái)?shù)

• FF

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

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

• outerWidth 返回窗口外部寬度

• outerHeight 返回窗口外部高度

其他屬性

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

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

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

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

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

網(wǎng)站名稱：JavaScript常見(jiàn)的BOM操作實(shí)例分析
瀏覽路徑：http://chinadenli.net/article28/gppjjp.html

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

廣告

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