一：BOM
BOM：Browser Object Model 瀏覽器對象模型
BOM 提供與瀏覽器交互的方法和接口；BOM的核心對象是window，它表示瀏覽器的一個實例
全局變量不能通過delete操作符刪除，而直接在window對象上定義的屬性可以
window.open()：打開新窗口，參數--URL、窗口目標、特性字符串、是否取代當前頁面的布爾值
window.close()：可關閉新打開的窗口
JavaScript 語言是單線程語言。
超時調用：在指定的時間過後執行代碼；setTimeout(要執行的代碼，以毫秒錶示的等待時間)
取消：clearTimeout(timeoutId)
間歇調用：每隔指定的時間就執行一次代碼；setInterval(代碼，時間)
取消：clearInterval(Id)
注：最好不用，可用超時調用代替
系統對話框：alert()、confirm()、prompt(提示文本，默認值)
二：DOM
(一)基本概念
DOM：Document Object Model 文檔對象模型
DOM是一套對文檔的內容進行抽象和概念化的方法
W3C定義：一個與系統平臺和編程語言無關的接口，程序和腳本可用通過這個接口動態地訪問和修改文檔的內容、結構和樣式。
DOM工作模式：先加載文檔的靜態內容，再動態刷新，動態刷新不影響文檔的靜態內容
這正是DOM的真正威力：對頁面內容進行刷新卻不需要在瀏覽器裏刷新頁面
JavaScript腳本只應該用來充實文檔的內容，要避免使用DOM技術來創建核心內容
DOM代表着加載到瀏覽器窗口的當前網頁
(二)DOM節點介紹
DOM把文檔表示爲一顆節點數：
節點類型及對應nodeType的值：
| 節點類型 | nodeType |
| 元素 | 1 |
| 屬性 | 2 |
| 文本 | 3 |
| 註釋 | 8 |
| 文檔 | 9 |
document.getElementById("id")
document.getElementsByTagName("tag")
document.getElementsByClassName("class")
querySelectorAll(CSS選擇器)：返回所有匹配的元素
增加元素節點：
document.creatElement("nodeName")
parentElement.appendChild(childNode) 將子節點插入父節點末尾
parentElement.insertBefore(newElement,targetElement) 將一個新元素插入到一個現有元素的前面
parentElement = targetElement.parentNode
刪除元素節點：
parent.removeChild(node) 返回要移除的節點
替換元素節點：
parent.replaceChild(要插入的節點，要替換的節點)
注意事項：getElementsByClassName() 在 Internet Explorer 5,6,7,8 中無效
2，文本節點
獲取文本節點的值的兩種方式：
方式一：
node.firstChild.nodeValue
方式二：
node.innerHTML
向一個元素增加文本節點：
document.creatTextNode("text")
parent.appendChild(childNode)
3，屬性節點
獲得屬性節點的值：object.getAttribute("attribute")
設置屬性節點的值：object.setAttribute("attribute","value")
移除屬性節點：element.removeAttribute()
屬性節點的parentNode爲null，即不被認爲是DOM文檔樹的一部分
(三)節點屬性與方法介紹
nodeValue 屬性：
nodeValue 屬性規定節點的值。
元素節點的 nodeValue 是 undefined 或 null
文本節點的 nodeValue 是文本本身
屬性節點的 nodeValue 是屬性值
nodeName屬性：
nodeName 屬性規定節點的名稱，總是返回一個大寫字母的值
元素節點的 nodeName 與標籤名相同
屬性節點的 nodeName 與屬性名相同
文本節點的 nodeName 始終是 #text
文檔節點的 nodeName 始終是 #document
node.hasChildNodes() 有子節點時返回true
element.hasAttribute() 有指定的屬性則返回true
element.hasAttributes() 元素擁有屬性返回true
element.childNodes ：包含元素子節點、文本節點、註釋或處理指令；不含屬性節點
注：IE 不會計算空白符；其他瀏覽器會把空白符當文本節點
node.firsrtChild -->node.childNodes[0] 第一個子節點
node.lastChild 最後一個子節點
<!doctype html>
<html>
<head>
<title>My home page</title>
</head>
<body>
<h1>My home page</h1>
<p>Hello, I am Rock and this is my home page.</p>
<p>I also wrote a book! Read it
<a href="#">here</a>.</p>
</body>
</html>
CSS-DOM：
element.style.property 獲取樣式只能返回行內樣式
element.style.property = value 設置樣式
(四)DOM事件
事件流：描述的是從頁面中接收事件的順序
①事件冒泡：事件首先在目標元素上發生，然後沿DOM樹向上傳播，直到document
②事件捕獲：document對象首先接收到事件，然後沿DOM樹向下傳播，直到事件的實際目標
③DOM事件流：含3個階段 事件捕獲階段、處於目標階段和事件冒泡階段
事件處理程序：響應某個事件的函數，名字以"on"開頭
1，HTML事件處理程序：其作爲元素的屬性 如onclick = "js code"
2，DOM 0級事件處理程序：element.onclick = function(){}
3，DOM 2級事件處理程序：element.addEventListener("事件名"，函數/函數名，布爾值)
element.removeEventListener("事件名"，函數名，布爾值)
布爾值：true --> 在捕獲階段調用事件處理程序
false --> 在冒泡階段調用事件處理程序
事件對象 ：event對象
currentTarget--> 當前處理的那個元素 （等同於this）target--> 事件的目標
type--> 事件類型
preventDefault() --> 取消事件的默認行爲
stopPropagaction --> 取消事件的進一步捕獲或冒泡
事件是將JavaScript與網頁聯繫在一起的主要方式
| UI事件 | 焦點事件 | ||
| load | 頁面加載時觸發；window.onload | blur | 元素失去焦點時觸發，不冒泡 |
| unload | 頁面卸載後觸發 | focus | 元素獲得焦點時觸發，不冒泡 |
| resize | 當窗口大小變化時觸發 | focusin | 獲得焦點 |
| scroll | 頁面滾動時觸發 | focusout | 失去焦點 |
| 鼠標事件 | 鍵盤事件 | ||
| click | 單擊鼠標按鈕或按下回車鍵時觸發 | keypress | 用戶按下鍵盤上的字符鍵時觸發 |
| dbclick | 雙擊鼠標 | keydown | 按下任意鍵時觸發 |
| mousedown | 按下任意鼠標按鈕觸發 | keyup | 釋放按鍵時觸發 |
| mouseup | 釋放鼠標按鈕 | ||
| mousewheel | 滾動鼠標滾輪時觸發 | ||
| mouseover | 鼠標指針移動到元素上方時觸發 | ||
| mouseout | 鼠標指針離開元素上方時觸發 |
(五)表單對象
屬性：
| disable | 是否被禁用 | tabIndex | |
| form | 指向所屬表單 | type | input類型 |
| name | value | 提交給服務器的值 | |
| readOnly | autofocus | 自動獲得焦點 |
共有方法：
focus()：取得焦點
blur()：失去焦點