一、BOM（Browser Object Model）瀏覽器對(duì)象模型

把瀏覽器的各個(gè)部分封裝為對(duì)象
組成：

• Window：窗口對(duì)象
• Navigator：瀏覽器對(duì)象（了解，不怎么用得到）
• Screen：顯示器屏幕對(duì)象（了解，不怎么用得到）
• History：歷史記錄對(duì)象
• Location：地址欄對(duì)象

Window：窗口對(duì)象常用方法：

彈出框：

• 1.alert()方法、彈出一個(gè)警告框，參數(shù)可以寫警告信息。
• 2.confirm()方法，彈出一個(gè)確認(rèn)框，參數(shù)可以寫提示信息，選確定返回true，選取消返回false。
• 3.prompt()方法，接收用戶輸入，返回值是用戶輸入的值。
  打開、關(guān)閉：
• 1.close()方法：誰(shuí)調(diào)用close方法就關(guān)閉誰(shuí)。
• 2.open()方法：打開一個(gè)新的窗口，并返回window對(duì)象。
  定時(shí)器：
• 1.setTimeout()方法、設(shè)置經(jīng)過(guò)多少毫秒之后執(zhí)行代碼。
• 2.clearTimeout()方法、 取消由 setTimeout() 方法設(shè)置的 timeout。

• 3.setInterval()方法、設(shè)置經(jīng)過(guò)多少毫秒之后執(zhí)行代碼，循環(huán)執(zhí)行。
• 4.clearInterval()方法、取消由 setInterval() 設(shè)置的 timeout。

Window對(duì)象的屬性：

其他BOM對(duì)象：

• history （window.history）
• location（window.location）
• Navigator（window.Navigator）
• Screen:（window.Screen）

DOM對(duì)象：

• document（window.document）

Location對(duì)象：地址欄對(duì)象

常用方法:reload()、重新加載當(dāng)前文檔。
屬性：href、設(shè)置或返回完整的URL地址欄的值。

History：歷史記錄對(duì)象

2. 常用方法：

• back() 加載 history 列表中的前一個(gè) URL。
• forward() 加載 history 列表中的下一個(gè) URL。
• go(參數(shù)) 加載 history 列表中的某個(gè)具體頁(yè)面。
  • 參數(shù)：
    • 正數(shù)：前進(jìn)幾個(gè)歷史記錄
    • 負(fù)數(shù)：后退幾個(gè)歷史記錄

3. 屬性：
   length 返回當(dāng)前窗口歷史列表中的 URL 數(shù)量。

二、DOM（Document Object Model）文檔對(duì)象模型

把文檔的各個(gè)部分封裝為對(duì)象，便于我們?nèi)RUD

DOM標(biāo)準(zhǔn)：

• 核心 DOM - 針對(duì)任何結(jié)構(gòu)化文檔的標(biāo)準(zhǔn)模型
  • Document：文檔對(duì)象
  • Element：元素對(duì)象
  • Attribute：屬性對(duì)象
  • Text：文本對(duì)象
  • Comment:注釋對(duì)象
  • Node：節(jié)點(diǎn)對(duì)象，其他5個(gè)的父對(duì)象
• XML DOM - 針對(duì) XML 文檔的標(biāo)準(zhǔn)模型
• HTML DOM - 針對(duì) HTML 文檔的標(biāo)準(zhǔn)模型

核心 DOM （document對(duì)象）

常用方法：

• 獲取Element對(duì)象：

1. getElementById()： 根據(jù)id屬性值獲取元素對(duì)象。id屬性值一般唯一
2. getElementsByTagName()：根據(jù)元素名稱獲取元素對(duì)象們。返回值是一個(gè)數(shù)組
3. getElementsByClassName():根據(jù)Class屬性值獲取元素對(duì)象們。返回值是一個(gè)數(shù)組
4. getElementsByName(): 根據(jù)name屬性值獲取元素對(duì)象們。返回值是一個(gè)數(shù)組

屬性：

• Element：元素對(duì)象
  Element對(duì)象的常用方法：
  1.removeAttribute()：刪除屬性
  2.setAttribute():設(shè)置屬性
• Node:節(jié)點(diǎn)對(duì)象： 所有dom對(duì)象都可以被認(rèn)為是一個(gè)節(jié)點(diǎn)
  Node對(duì)象常用方法：
  1.appendChild()：添加子節(jié)點(diǎn)，向節(jié)點(diǎn)的子節(jié)點(diǎn)列表的結(jié)尾添加新的子節(jié)點(diǎn)。
  2.removeChild()：移除子節(jié)點(diǎn)，刪除（并返回）當(dāng)前節(jié)點(diǎn)的指定子節(jié)點(diǎn)。
  3.replaceChild()：用新節(jié)點(diǎn)替換一個(gè)子節(jié)點(diǎn)。
  Node對(duì)象的屬性
  parentNode：當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)。

HTML DOM

1.標(biāo)簽體的設(shè)置和獲?。篿nnerHTML

2. 使用html元素對(duì)象的屬性
3. 控制元素樣式
   • 1. 使用元素的style屬性來(lái)設(shè)置
        如：
        //修改樣式方式1
        div1.style.border = "1px solid red";
        div1.style.width = "200px";
        //font-size--> fontSize
        div1.style.fontSize = "20px";
   • 2. 提前定義好類選擇器的樣式，通過(guò)元素的className屬性來(lái)設(shè)置其class屬性值。

三、常見的事件：

* 常見的事件：
    1. 點(diǎn)擊事件：
        1. onclick：?jiǎn)螕羰录?        2. ondblclick：雙擊事件
    2. 焦點(diǎn)事件
        1. onblur：失去焦點(diǎn)
        2. onfocus:元素獲得焦點(diǎn)。

    3. 加載事件：
        1. onload：一張頁(yè)面或一幅圖像完成加載。

    4. 鼠標(biāo)事件：
        1. onmousedown  鼠標(biāo)按鈕被按下。
        2. onmouseup    鼠標(biāo)按鍵被松開。
        3. onmousemove  鼠標(biāo)被移動(dòng)。
        4. onmouseover  鼠標(biāo)移到某元素之上。
        5. onmouseout   鼠標(biāo)從某元素移開。
        
        
    5. 鍵盤事件：
        1. onkeydown    某個(gè)鍵盤按鍵被按下。  
        2. onkeyup      某個(gè)鍵盤按鍵被松開。
        3. onkeypress   某個(gè)鍵盤按鍵被按下并松開。

    6. 選擇和改變
        1. onchange 域的內(nèi)容被改變。
        2. onselect 文本被選中。

    7. 表單事件：
        1. onsubmit 確認(rèn)按鈕被點(diǎn)擊。
        2. onreset  重置按鈕被點(diǎn)擊。

如何給元素對(duì)象綁定事件：

   var Element對(duì)象  = document.getElementById(String id)  //獲取DOM對(duì)象
   Element對(duì)象.事件名 = function () {
             方法體
    }