JavaScript高級(jí)程序設(shè)計(jì)（第3版）

BOM（瀏覽器對(duì)象模型）
要說(shuō)BOM是什么東西牙勘，可以需要和DOM一起來(lái)描述。

看一下書中的名詞解釋：
BOM（瀏覽器對(duì)象模型）未斑，提供與瀏覽器交互的方法和接口伞辛。
DOM（文檔對(duì)象模型），提供訪問(wèn)和操作網(wǎng)頁(yè)內(nèi)容的方法和接口申钩。

很好次绘，不知所云。

在來(lái)看下書中的如何描述BOM和DOM分別能做哪些事情：

BOM：

• 彈出新瀏覽器窗口的功能
• 移動(dòng)撒遣、縮放和關(guān)閉瀏覽器窗口的功能
• 提供瀏覽器詳細(xì)信息的navigator對(duì)象
• 提供瀏覽器所加載頁(yè)面的詳細(xì)信息的location對(duì)象
• 提供用戶顯示器分辨率詳細(xì)信息的screen對(duì)象
• 對(duì)cookies的支持
• 像XMLHttpRequest 和 IE的ActiveXObject 這樣的自定義對(duì)象

DOM：

• DOM1
  • DOM核心（DOM Core）：映射基于XML的文檔結(jié)構(gòu)邮偎，以便簡(jiǎn)化對(duì)文檔中仁義部分的訪問(wèn)和操作。
  • DOM HTML：針對(duì)HTML的對(duì)象和方法义黎。
• DOM2
  • DOM視圖（DOM Views）:定義了跟蹤不同文檔（例如禾进，應(yīng)用CSS之前和之后的文檔）視圖的接口
  • DOM事件（DOM Events）：定義了基于CSS為元素應(yīng)用樣式的接口
  • DOM遍歷和范圍（DOM Traversal and Range）：定義了遍歷和操作文檔樹的接口。
• DOM3
  • DOM加載和保存（DOM Load and Save）：引入了以統(tǒng)一方式加載和保存文檔的方法
  • DOM驗(yàn)證（DOM Validation）：新增了驗(yàn)證文檔的方法
  • DOM核心擴(kuò)展：支持XML Infoset廉涕、XPath和XML Base

想必單純聽BOM和DOM的時(shí)候泻云，你并不能知道這中文翻譯過(guò)來(lái)的解釋是什么意思。BOM其實(shí)就像是我們房間的整體結(jié)構(gòu)狐蜕，你房間的信息（window宠纯、screen）、房間的管線信息（location层释、location婆瓜、cookies）、房間在當(dāng)前區(qū)域的市政規(guī)劃（navigator）。BOM就如同沒有裝修房子前的基本信息廉白，在開發(fā)時(shí)隨時(shí)可以獲取當(dāng)前網(wǎng)頁(yè)所處的環(huán)境和信息个初，并且可以為網(wǎng)頁(yè)存放一些臨時(shí)或永久的信息，保證開發(fā)心知肚明猴蹂。DOM就與BOM相反了院溺。DOM就是房間里的施工圖了，你想在哪里顯示個(gè)字磅轻，在哪里放張圖片珍逸，完全交給了DOM來(lái)處理。同時(shí)DOM具備單獨(dú)將放冰箱的位置換成電視瓢省。當(dāng)然弄息，換成智能電視，可以控制他勤婚，那這個(gè)DOM元素就是具備操作能力摹量，即事件。涂個(gè)粉色的墻吧馒胆，讓CSS來(lái)協(xié)助幫忙缨称，告訴CSS是涂哪面墻就可以。
所以祝迂，BOM可以理解為獲取當(dāng)前頁(yè)面所在的基本信息睦尽，和所在瀏覽器信息。DOM可以理解為獲取用戶見到的型雳，看到的頁(yè)面內(nèi)容当凡。

接下來(lái)，就是逐一分析各個(gè)部分了纠俭。先從BOM開始吧沿量。請(qǐng)翻到P211面第8章。

BOM操作：
BOM既然是獲取瀏覽器當(dāng)前的基本信息冤荆，這些信息就放在各個(gè)“對(duì)象”的手上朴则。“對(duì)象”钓简，顧名思義就是目標(biāo)物乌妒，可以向它索取你必要的內(nèi)容。舉個(gè)例子外邓，你如果想知道當(dāng)前瀏覽器的寬度和高度撤蚊，有一個(gè)叫“window”的“對(duì)象”。只需要window.screen.availHeight（高度）损话、window.screen.availWidth（寬度）拴魄，你需要的數(shù)據(jù)就能得到。BOM到底有多少“對(duì)象”呢？

• window對(duì)象
• location對(duì)象
• navigator對(duì)象
• screen對(duì)象
• history對(duì)象

window對(duì)象匹中。這個(gè)對(duì)象是BOM的核心對(duì)象，核心在于它能干很多事情》》》

• 全局作用域
  • 可以直接對(duì)window對(duì)象新增或刪除變量甚至函數(shù)豪诲。例如window.age = 29顶捷。
  • 那我也可以使用var age = 29來(lái)定義變量。那他們有什么本質(zhì)上的區(qū)別嗎屎篱？
    • 在于delete操作符刪除上服赎。全局變量delete age 會(huì)報(bào)錯(cuò)或者返回false。window對(duì)象通過(guò)delete window.age可以直接刪除交播。
  • Eg.
    • window.age = 29
    • delete window.age
• 窗口關(guān)系及框架
  • 這個(gè)目前對(duì)我來(lái)說(shuō)比較少用了重虑，目前使用的是單頁(yè)面渲染，以前要?jiǎng)討B(tài)顯示數(shù)據(jù)秦士，需要通過(guò)ifarme來(lái)嵌套處理缺厉。
  • 獲取三種不同窗口信息：window獲取當(dāng)前窗口信息，top獲取最外層窗口信息隧土，parent獲取當(dāng)前窗口的父級(jí)信息
  • eg.
    • window.frames[0]獲取當(dāng)前窗口信息
    • top.frames[0] 獲取最外層窗口信息
    • parent.frames[0] 獲取當(dāng)前上一級(jí)（父級(jí)）窗口信息
• 窗口位置
  • 獲取窗口位置的方法有很多種提针，并不是因?yàn)橛泻脦追N代碼可以獲取，而是因?yàn)楦鱾€(gè)瀏覽器之間的問(wèn)題曹傀，導(dǎo)致了兼容上出現(xiàn)了不同的情況辐脖。比如有部分瀏覽器是通過(guò)screenLeft來(lái)確定屏幕的左邊，而有些瀏覽器是通過(guò)xcreenX來(lái)確定屏幕的左邊皆愉。為了解決跨屏幕兼容的問(wèn)題嗜价。作者提供如下調(diào)整。
  • 當(dāng)然幕庐，作者還介紹了窗口偏移window.moveTo(0,0)屏幕位置和window.moveBy(0,0)屏幕移動(dòng)偏移量久锥。
  • eg
    • var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;
    • var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;
• 窗口大小
  • 這里還挺有意思的，作者講到這點(diǎn)時(shí)翔脱，似乎覺得無(wú)奈——獲取窗口大小不是一件簡(jiǎn)單的事情奴拦。
  • 由于各個(gè)瀏覽器對(duì)窗口大小的定義不同。但目前有兩種相對(duì)可行的獲取大小的方法届吁。
  • window.innerWidth()错妖，window.innerHeight()
  • document.documentElement.outerWidth()，document.documentElement.outerHeight()
  • 對(duì)于這種又是兼容問(wèn)題疚沐，作者提出如下方法暂氯。

var pageWidth = window.innerWidth, pageHeight = window.innerHeight;
if (typeof pageWidth != "number”){
    if (document.compatMode == "CSS1Compat”){
        pageWidth = document.documentElement.clientWidth;
        pageHeight = document.documentElement.clientHeight;
    } else {
        pageWidth = document.body.clientWidth;
        pageHeight = document.body.clientHeight;
    }
}

• 導(dǎo)航和打開窗口

  • window.open() 導(dǎo)航到一個(gè)特定的URL
  • 其中open中有四個(gè)參數(shù)（URL，窗口目標(biāo)亮蛔，一個(gè)特性字符串痴施，一個(gè)表示新頁(yè)面是否取代瀏覽器歷史記錄中當(dāng)前加載頁(yè)面的布爾值）
  • eg
  • window.open("[http://www.wrox.com/","wroxWindow](http://www.wrox.com/)", "height=400,width=400,top=10,left=10,resizable=yes");
  • URL：寫入要彈出的窗口所對(duì)應(yīng)的地址
  • 窗口目標(biāo)：調(diào)轉(zhuǎn)到新窗口的名字
  • 一個(gè)特性字符串：彈出的新窗口的配置信息，以逗號(hào)隔開的字符串
    • 配置參數(shù)如下：
    • 配置表
  • 間歇調(diào)用和超時(shí)調(diào)用

    • 超時(shí)調(diào)用：

      • var timer = setTimeout(() => {}, 1000);

      • 指定時(shí)間過(guò)后執(zhí)行代碼

      • 中途取消執(zhí)行：clearTimeout(timer)

    • 間歇調(diào)用

      • var timer2 = setInterval(() => {}, 1000);
      • 每隔指定的時(shí)間就執(zhí)行一次代碼
      • 取消循環(huán)執(zhí)行：clearInterval(timer2)

• 系統(tǒng)對(duì)話框

• 這里常用的三種對(duì)話框：alert()警告框、comfirm()確認(rèn)框辣吃、prompt()提示輸入框

• 那還有兩種相對(duì)少用动遭，但認(rèn)識(shí)一下：window.print()顯示“打印”對(duì)話框、window.find()顯示“查找”對(duì)話框

總結(jié)

這一節(jié)神得，重點(diǎn)了解了什么是BOM厘惦，并了解了BOM的核心對(duì)象——window。后續(xù)我們會(huì)共同來(lái)討論其他幾個(gè)對(duì)象的實(shí)際運(yùn)用哩簿。