寫(xiě)在前面

相信學(xué)習(xí)前端的小伙伴應(yīng)該都知道Javascript可以簡(jiǎn)單的分成兩個(gè)部分领突，一個(gè)是JS基礎(chǔ)的ECMAScript和WebAPI的Dom和Bom，相信很多初學(xué)的小伙伴都對(duì)WebAPI的Dom很熟悉鱼冀，畢竟Dom的操作確實(shí)會(huì)更頻繁一些，主要是對(duì)文檔對(duì)象的操作割择；現(xiàn)對(duì)來(lái)說(shuō)立宜，而B(niǎo)om的操作會(huì)更少一些（至少我本人是這樣）冒萄。所以常常會(huì)忘記Bom的各種方法與內(nèi)容，因此橙数，寫(xiě)一篇Bom的基礎(chǔ)文章讓大家能夠參考學(xué)習(xí)同時(shí)自己也能查閱尊流；和小伙伴們共同學(xué)習(xí)進(jìn)步。

Bom

Bom定義

• 提供了獨(dú)立于內(nèi)容而與瀏覽器窗口進(jìn)行交互的對(duì)象灯帮，Bom由一系列的對(duì)象構(gòu)成的崖技，并且每一個(gè)對(duì)象都提供了方法和屬性，由于缺乏標(biāo)準(zhǔn)施流，所以兼容有很多的問(wèn)題响疚。

window對(duì)象

• window對(duì)象是瀏覽器的頂級(jí)對(duì)象

  • window對(duì)象是一個(gè)全局對(duì)象，定義在全局的變量瞪醋、函數(shù)都會(huì)變成window對(duì)象的屬性和方法
  • 調(diào)用它的方法的時(shí)候可以省略掉window的書(shū)寫(xiě)

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

  • 窗口加載事件

    • window.onload = function() {} 或者 window.addEventListener('load',function() {})

      1. 作用：當(dāng)文檔內(nèi)容（圖像忿晕、css、html）加載完成才會(huì)執(zhí)行银受，所以可以把它放到文檔任何地方践盼，實(shí)現(xiàn)<script>的位置任意化
      2. Tip: window.onload這種寫(xiě)法是只能寫(xiě)一次，如果寫(xiě)多個(gè)后面的會(huì)覆蓋前面的onload函數(shù)宾巍，而用addEventListener就可以寫(xiě)多次‘咕幻；但是addEventListener是有兼容要求的

    • docunment.addEventListener('DOMContentLoaded',funcition() {})

      ? 1.區(qū)別：load事件是等頁(yè)面全部加載完成以后，包含頁(yè)面的圖片顶霞、iframe等等肄程；而使用DOMContentLoaded則是Dom加載完成，不包含Dom元素得加載即可運(yùn)行选浑，所以他的速度會(huì)更加快蓝厌，但是有兼容要求，ie瀏覽器要ie9以上古徒。

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

    • window.onresize = function() {};或者window.addEventListener('resize',function() {})
    • 作用：只要窗口得大小發(fā)生變化拓提，每一像素就會(huì)觸發(fā)一次這個(gè)事件；可以用它和window.innerWidth（獲得當(dāng)前屏幕寬度）來(lái)完成對(duì)響應(yīng)式布局隧膘。

  • 窗口打開(kāi)

    • window.open()方法可以導(dǎo)航到一個(gè)特定的URL代态，也可以打開(kāi)一個(gè)新的瀏覽器窗口。這個(gè)方法可以接收4個(gè)參數(shù)

  • 對(duì)話框彈出

    • alert()：彈出系統(tǒng)對(duì)話框通常為警告的作用疹吃，彈出的彈框只有一個(gè)確認(rèn)按鈕
    • confirm()：彈出一個(gè)對(duì)話框有確認(rèn)的作用蹦疑，通常有兩個(gè)按鈕（確認(rèn)和取消）
    • prompt()：彈出一個(gè)提示框，會(huì)讓用戶輸入文本互墓，包含輸入域和兩個(gè)按鈕

定時(shí)器對(duì)象

• setTimeout(回調(diào)函數(shù)必尼，幾毫秒后執(zhí)行)
  • 由于頁(yè)面中常常會(huì)有定時(shí)器，我們經(jīng)常給定時(shí)器起名字（標(biāo)識(shí)符），為了區(qū)分每一個(gè)定時(shí)器判莉，可以在定時(shí)器執(zhí)行之前一般要清理之前的定時(shí)器豆挽，避免定時(shí)器的效果疊加造成的問(wèn)題
  • 第一個(gè)參數(shù)就是常說(shuō)的回調(diào)函數(shù)，所謂的回調(diào)函數(shù)在這里簡(jiǎn)單理解就是需要一定條件才去觸發(fā)的函數(shù)券盅；比如onclick的函數(shù)也是一個(gè)回調(diào)函數(shù)
• setInterval(回調(diào)函數(shù)帮哈，幾毫秒后執(zhí)行)
  • 這個(gè)函數(shù)和之前的setTimeout的區(qū)別就是，這個(gè)函數(shù)是隔指定的時(shí)間調(diào)用一次回調(diào)函數(shù)锰镀，而那個(gè)則是只調(diào)用一次
• clearTimeout()/clearInterval()：清理定時(shí)器娘侍，它的參數(shù)是我們給定時(shí)器起的名字，也就是定時(shí)器的ID值

location對(duì)象

• window對(duì)象提供了loaction對(duì)象用于獲取或者設(shè)置窗體的地址

• window對(duì)象的屬性和方法

  • location.href()：獲取或設(shè)置整個(gè)URL
  • location.host()：返回主機(jī)名
  • location.search()：返回參數(shù)泳炉，也就是地址欄中憾筏？后面的所有內(nèi)容
  • location.port()：返回端口號(hào)
  • location.assign()：跟href一樣，可以跳轉(zhuǎn)頁(yè)面花鹅，但是會(huì)記錄原來(lái)的頁(yè)面氧腰，瀏覽器的回退功能可以實(shí)現(xiàn)
  • location.replace()：可以跳轉(zhuǎn)但無(wú)法后退，推薦使用刨肃，跳轉(zhuǎn)的url會(huì)替換瀏覽器歷史記錄中當(dāng)前顯示的也頁(yè)面
  • location.reload()：重新加載頁(yè)面
  • loaction.hash()：返回哈希地址（也就是地址中#后面跟零個(gè)或者多個(gè)字符串）

history對(duì)象

• 用于和瀏覽器的歷史記錄進(jìn)行交互古拴，包含用戶訪問(wèn)過(guò)的URL，也就是保存著用戶的上網(wǎng)歷史記錄真友，從窗口被打開(kāi)的那一刻開(kāi)始計(jì)算起黄痪。

• 屬性和方法

  • history.back()：可以后退功能
  • history.forward()：可以前進(jìn)功能
  • history.go(參數(shù))：前進(jìn)或者后退的功能，參數(shù)為“1”前進(jìn)一頁(yè)盔然；參數(shù)為“-1”后退一頁(yè)
  • length屬性：保存著歷史記錄的數(shù)量桅打，這個(gè)數(shù)量包括所有的向后和向前的記錄

• 由于是window對(duì)象的屬性所以每個(gè)瀏覽器窗口、標(biāo)簽頁(yè)乃至每個(gè)框架都有自己的history

navigator對(duì)象

• 主要用于獲取瀏覽器的主要信息愈案，有很多的屬性油额；比較常用的有：

  屬性和方法	說(shuō)明
  userAgent	瀏覽器用戶代理字符串
  cookieEnabled	表示cookie是否啟用
  language	瀏覽器的主語(yǔ)言

Bom和Dom的區(qū)別

1. 首先二者操作的對(duì)象不同，Dom（文檔對(duì)象模型）從翻譯我們就可以看出這是一個(gè)基于文檔對(duì)象的應(yīng)用程序接口刻帚，也就是說(shuō)我們用到的方法“存在”這個(gè)對(duì)象里面的，我們使用的時(shí)候是在調(diào)用這個(gè)對(duì)象下的方法涩嚣；舉個(gè)簡(jiǎn)單的栗子：根據(jù)ID獲取元素：Document.getElementById()崇众；從這我們就可以看出這個(gè)是基于文檔對(duì)象的。所以被用來(lái)操作文檔航厚，說(shuō)的通俗一點(diǎn)就是用來(lái)操作HTML和XML的顷歌。

   而B(niǎo)om（瀏覽器對(duì)象模型）顧名思義；就是基于瀏覽器對(duì)象的幔睬，我們上面提到的對(duì)象和方法就都是基于瀏覽器的操作眯漩。同樣我們可以從他的調(diào)用方法看出來(lái)；舉個(gè)栗子：獲取地址欄地址：window.localtion.href；不過(guò)常常在我們編寫(xiě)代碼的時(shí)候是可以把window給省略的赦抖，因?yàn)槟J(rèn)會(huì)帶上window對(duì)象舱卡。

2. 其次，二者的關(guān)系是包含的關(guān)系队萤，Docunment的對(duì)象是window對(duì)象的下的其中一個(gè)對(duì)象轮锥，從window.document就可以看出，DOM的最根本的對(duì)象是BOM的window對(duì)象的子對(duì)象要尔。

3. Dom的標(biāo)準(zhǔn)是唯一的舍杜，遵循的是W3C的標(biāo)準(zhǔn)；而B(niǎo)om的標(biāo)準(zhǔn)并不唯一赵辕，有各個(gè)瀏覽器廠商決定

Tip：每個(gè)字都是自己手敲的噢既绩，如果有錯(cuò)別字還請(qǐng)多多包涵，覺(jué)得有用的話點(diǎn)個(gè)贊支持一下吖~~