總結(jié)bom筆記之前，先轉(zhuǎn)載一篇大佬寫的文章DOM和BOM操作

一、BOM簡述

1、概念

BOM(Browser Object Model) 是指瀏覽器對象模型，瀏覽器對象模型提供了獨(dú)立于內(nèi)容的、可以與瀏覽器窗口進(jìn)行互動的對象結(jié)構(gòu)。

2、用途

javacsript是通過訪問BOM（Browser Object Model）對象來訪問、控制、修改客戶端(瀏覽器)。BOM由多個對象組成，其中代表瀏覽器窗口的Window對象是BOM的頂層對象，其他對象都是該對象的子對象。

二、window對象

1、概述

BOM 的核心是window對象，所有在全局作用域中聲明的變量、函數(shù)、對象都會作為window的屬性和方法。
例如：document也是window的屬性

三、window的常用屬性

1、window.innerHeight，window.innerWidth

網(wǎng)頁的CSS布局占據(jù)的瀏覽器窗口的高度和寬度，單位為像素
當(dāng)放大和縮小網(wǎng)頁的時候，瀏覽器窗口的寬高會改變

2、滾動scoll

• window.scrollX、window.scrollY 滾動條橫向偏移長度/縱向偏移量
• scrollTo(x,y) 讓滾動條滾動到坐標(biāo)為(x,y)的位置
• scrollBy(x,y) 相對當(dāng)前位置移動滾動條向右和向下滾動長度

舉個特殊的栗子

從圖中可以看出，scrollTo(x,y)能偏移的位置是有限制的。圖中scrollx最大能滾動34px，這就是window窗口和網(wǎng)頁展示width的長度差。

3、navigator(導(dǎo)航)

Window對象的navigator屬性，指向一個包含瀏覽器相關(guān)信息的對象。
其中的userAgent指向當(dāng)前用的瀏覽器種類，你用什么設(shè)備看的瀏覽器。比如window的chrome或者是用mac的chrome之類的

判斷用戶的瀏覽器類型

第一種通過直接比較navigator.userAgent重是否含有/Android/，/iPhone/等字樣 function isAndroid(){ return /Android/.test(navigator.userAgent); } function isIphone(){ return /iPhone/.test(navigator.userAgent); } function isIpad(){ return /iPad/.test(navigator.userAgent); } function isIOS(){ return /(iPad)|(iPhone)/.test(navigator.userAgent); } 第二種，使用search()函數(shù)，通過檢測navigator.userAgent重是否含有Android，iPhone等字樣的下標(biāo)，返回值是否大于0進(jìn)行判斷function isAndroid(){if(navigator.userAgent.search('android') >0){console.log('用戶的瀏覽器類型是android')} } isAndroid() function isIphone(){if(navigator.userAgent.search('iphone') >0){console.log('用戶的瀏覽器類型是iphone')} } function isIpad(){if(navigator.userAgent.search('ipad') >0){console.log('用戶的瀏覽器類型是ipad')} } function isIOS(){if(navigator.userAgent.search('ios') >0){console.log('用戶的瀏覽器類型是ios')} }

4、screen屬性

screen也是window的屬性，表示的查看瀏覽器的設(shè)備（比如電腦屏幕）的信息
縮放網(wǎng)頁不會改變screen.width和 screen.height

alert()，prompt()，confirm() (三種不常用的和網(wǎng)頁交互的方式)它們會彈出不同的對話框，要求用戶做出回應(yīng)。需要注意的是，alert()、prompt()、confirm()這三個方法彈出的對話框，都是瀏覽器統(tǒng)一規(guī)定的式樣，是無法定制的

5、alert(message)

alert(message)，會讓瀏覽器發(fā)送一條消息。用戶只有點(diǎn)擊“確定”按鈕，對話框才會消失。在對話框彈出期間，瀏覽器窗口處于凍結(jié)狀態(tài)，如果不點(diǎn)“確定”按鈕，用戶什么也干不了。

alert('hello,瀏覽器告訴我誰是世界上最美的女人，是我嗎')

6、prompt(text[, default])

prompt方法彈出的對話框，在提示文字的下方，還有一個輸入框，要求用戶輸入信息，并有“確定”和“取消”兩個按鈕。它往往用來獲取用戶輸入的數(shù)據(jù)

prompt('我是不是最帥的程序員','yes')

有兩個參數(shù)，第二個是預(yù)設(shè)的回答值。不寫第二個參數(shù)也可以

prompt方法的返回值是一個字符串（有可能為空）或者null，具體分成三種情況。

• 用戶輸入信息，并點(diǎn)擊“確定”，則用戶輸入的信息就是返回值。
• 用戶沒有輸入信息，直接點(diǎn)擊“確定”，則輸入框的默認(rèn)值就是返回值。
• 用戶點(diǎn)擊了“取消”（或者按了Escape按鈕），則返回值是null。

7、confirm(message)

除了提示信息之外，只有“確定”和“取消”兩個按鈕，往往用來征詢用戶的意見

三、URL的編碼/解碼方法

先看一下若愚老師寫的博客聊一聊編碼與亂碼

1：URL 編碼的原因

URL 只能使用 ASCII 字符集來通過因特網(wǎng)進(jìn)行發(fā)送，也就是說URL只能使用英文字母、阿拉伯?dāng)?shù)字和某些標(biāo)點(diǎn)符號，不能使用其他文字和符號，所以需要對URL里面的特殊字符進(jìn)行編碼

2：編碼方式

1）、encodeURI()
主要針對整個url編碼，對于url本身有些的特殊字符不會進(jìn)行編碼。比如~!@#$&*()=:/,;?+' 和ASCII字母、數(shù)字不會編碼
2）、encodeURIComponent()
用于對URL的組成部分COMponent(成分)進(jìn)行個別編碼，而不用于對整個URL進(jìn)行編碼。編碼范圍比encodeURI()寬，只有~!*()'和ASCII字母、數(shù)字不會編碼

3：解碼方式

1）、decodeURI()
和encodeURI()對應(yīng)的解碼方式，不能解encodeURIComponent()的碼
2）、decodeURIComponent()
和encodeURIComponent()對應(yīng)的解碼方式

總結(jié)

以上是生活随笔為你收集整理的bom笔记的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。