一、JavaScript的組成
JavaScript的實現包括以下3個部分：
| ECMAScript(核心) |
描述了JS的語法和基本對象。 |
| 文檔對象模型 （DOM） |
處理網頁內容的方法和接口 |
| 瀏覽器對象模型（BOM） |
與瀏覽器交互的方法和接口 |
javascript 有三部分構成，ECMAScript，DOM和BOM，根據宿主（瀏覽器）的不同，具體的表現形式也不盡相同，ie和其他的瀏覽器風格迥異,IE 擴展了 BOM，加入了 ActiveXObject 類，可以通過 JavaScript 實例化 ActiveX 對象
1. DOM 是 W3C 的標准； [所有瀏覽器公共遵守的標准]
2. BOM 是 各個瀏覽器廠商根據 DOM在各自瀏覽器上的實現;[表現為不同瀏覽器定義有差別,實現方式不同]
3. window 是 BOM 對象，而非 js 對象；javacsript是通過訪問BOM（Browser Object Model）對象來訪問、控制、修改客戶端(瀏覽器)
ECMAScript擴展知識：
① ECMAScript是一個標准，JS只是它的一個實現，其他實現包括ActionScript。
② “ECMAScript可以為不同種類的宿主環境提供核心的腳本編程能力……”，即ECMAScript不與具體的宿主環境相綁定，如JS的宿主環境是瀏覽器，AS的宿主環境是Flash。
③ECMAScript描述了以下內容：語法、類型、語句、關鍵字、保留字、運算符、對象。
歸BOM管的：
A區（瀏覽器的標簽頁，地址欄，搜索欄，書簽欄，窗口放大還原關閉按鈕，菜單欄等等）
B區（瀏覽器的右鍵菜單）
C區（document加載時的狀態欄，顯示http狀態碼等）
D區（滾動條scroll bar）
歸DOM管的：
E區（就是document，由web開發人員寫出來的一個文件夾，里面有index.html，CSS和JS的，部署在服務器上，我們可以通過瀏覽器的地址欄輸入URL然后回車將這個document加載到本地，瀏覽，右鍵查看源代碼等。
JavaScript的核心，描述了語言的基本語法和數據類型，ECMAScript是一套標准，定義了一種語言的標准與具體實現無關ECMAScript - JavaScript的核心
定義了javascript的語法規范
BOM - 瀏覽器對象模型
一套操作瀏覽器功能的API（什么是API？）
通過BOM可以操作瀏覽器窗口，比如：彈出框、控制瀏覽器跳轉、獲取分辨率等
DOM - 文檔對象模型
一套操作頁面元素的API
DOM可以把HTML看做是文檔樹，通過DOM提供的API可以對樹上的節點進行操作
什么是API ？
API的概念
- API（Application Programming Interface,應用程序編程接口）是一些預先定義的函數，目的是提供應用程序與開發人員基於某軟件或硬件得以訪問一組例程的能力，而又無需訪問源碼，或理解內部工作機制的細節。
- 任何開發語言都有自己的API
- API的特征輸入和輸出(I/O)API的使用方法(console.log())
Web API的概念
瀏覽器提供的一套操作瀏覽器功能和頁面元素的API(BOM和DOM)
此處的Web API特指瀏覽器提供的API(一組方法)，Web API在后面的課程中有其它含義
掌握常見的瀏覽器提供的API的調用方式
Web API 接口參考：MDN-Web API
二、DOM, DOCUMENT, BOM, WINDOW 區別
2.1 DOM
DOM 全稱是 Document Object Model，也就是文檔對象模型。是針對XML的基於樹的API。描述了處理網頁內容的方法和接口，是HTML和XML的API，DOM把整個頁面規划成由節點層級構成的文檔。
這個DOM定義了一個HTMLDocument和HTMLElement做為這種實現的基礎,就是說為了能以編程的方法操作這個 HTML 的內容（比如添加某些元素、修改元素的內容、刪除某些元素），我們把這個 HTML 看做一個對象樹（DOM樹），它本身和里面的所有東西比如 <div></div> 這些標簽都看做一個對象，每個對象都叫做一個節點（node），節點可以理解為 DOM 中所有 Object 的父類。
DOM 有什么用？就是為了操作 HTML 中的元素，比如說我們要通過 JS 把這個網頁的標題改了，直接這樣就可以了：
document.title = 'how to make love';
這個 API 使得在網頁被下載到瀏覽器之后改變網頁的內容成為可能。
2.2 document
當瀏覽器下載到一個網頁，通常是 HTML，這個 HTML 就叫 document（當然，這也是 DOM 樹中的一個 node），從上圖可以看到，document 通常是整個 DOM 樹的根節點。這個 document 包含了標題（document.title）、URL（document.URL）等屬性，可以直接在 JS 中訪問到。
在一個瀏覽器窗口中可能有多個 document，例如，通過 iframe 加載的頁面，每一個都是一個 document。
在 JS 中，可以通過 document 訪問其子節點（其實任何節點都可以），如
document.body;document.getElementById('xxx');
2.3 BOM
BOM 是 Browser Object Model，瀏覽器對象模型。
剛才說過 DOM 是為了操作文檔出現的接口，那 BOM 顧名思義其實就是為了控制瀏覽器的行為而出現的接口。瀏覽器可以做什么呢？比如跳轉到另一個頁面、前進、后退等等，程序還可能需要獲取屏幕的大小之類的參數。所以 BOM 就是為了解決這些事情出現的接口。比如我們要讓瀏覽器跳轉到另一個頁面，只需要location.href = "http://www.xxxx.com";這個 location 就是 BOM 里的一個對象。
2.4 window
window 也是 BOM 的一個對象，除去編程意義上的“兜底對象”之外，通過這個對象可以獲取窗口位置、確定窗口大小、彈出對話框等等。例如我要關閉當前窗口：
window.close();
DOM基本操作思維導圖
window對象思維導圖
三、具體用法
先來看一個圖：
BOM和DOM的結構關系示意圖
BOM的核心是Window，而Window對象又具有雙重角色，它既是通過js訪問瀏覽器窗口的一個接口，又是一個Global（全局）對象。這意味着在網頁中定義的任何對象，變量和函數，都以window作為其global對象。
Window對象包含屬性：document、location、navigator、screen、history、frames
Document根節點包含子節點：forms、location、anchors、images、links
從window.document已然可以看出，DOM的最根本的對象是BOM的window對象的子對象。
區別：DOM描述了處理網頁內容的方法和接口，BOM描述了與瀏覽器進行交互的方法和接口
3.1 Window對象
Window 對象是 JavaScript 層級中的頂層對象。
Window 對象代表一個瀏覽器窗口或一個框架。
Window 對象會在 <body> 或 <frameset> 每次出現時被自動創建。
1）對象屬性
成員對象屬性
window //窗戶自身, window=window.self 可使用全局屬性 window訪問 Window對象
document 對 Document 對象的只讀引用。請參閱 Document 對象。
history 對 History 對象的只讀引用。請參數 History 對象。
location 用於窗口或框架的 Location 對象。請參閱 Location 對象。
screen 對 Screen 對象的只讀引用。請參數 Screen 對象。
navigator 對 Navigator 對象的只讀引用。請參數 Navigator 對象。
external.AddFavorite("地址","標題" ) //把網站新增到保藏夾
基本屬性
2）對象方法
- window.close(); //關閉窗口
- window.alert("message"); //彈出一個具有OK按鈕的系統消息框，顯示指定的文本
- window.confirm("Are you sure?"); //彈出一個具有OK和Cancel按鈕的詢問對話框，返回一個布爾值
- window.prompt("What's your name?", "Default"); //提示用戶輸入信息，接受兩個參數，即要顯示給用戶的文本和文本框中的默認值，將文本框中的值作為函數值返回
- window.status //可以使狀態欄的文本暫時改變
- window.defaultStatus //默認的狀態欄信息，可在用戶離開當前頁面前一直改變文本
- window.setTimeout("alert('xxx')", 1000); //設置在指定的毫秒數后執行指定的代碼，接受2個參數，要執行的代碼和等待的毫秒數
- window.clearTimeout("ID"); //取消還未執行的暫停，將暫停ID傳遞給它
- window.setInterval(function, 1000); //無限次地每隔指定的時間段重復一次指定的代碼，參數同setTimeout()一樣
- window.clearInterval("ID"); //取消時間間隔，將間隔ID傳遞給它
- window.history.go(-1); //訪問瀏覽器窗口的歷史，負數為后退，正數為前進
- window.history.back(); //同上
- window.history.forward(); //同上
- window.history.length //可以查看歷史中的頁面數
- clearInterval() 取消由 setInterval() 設置的 timeout。
- clearTimeout() 取消由 setTimeout() 方法設置的 timeout。
- createPopup() 創建一個 pop-up 窗口。
- moveBy() 可相對窗口的當前坐標把它移動指定的像素。
- moveTo() 把窗口的左上角移動到一個指定的坐標。
- open() 打開一個新的瀏覽器窗口或查找一個已命名的窗口。
- print() 打印當前窗口的內容。
- resizeBy() 按照指定的像素調整窗口的大小。
- resizeTo() 把窗口的大小調整到指定的寬度和高度。
- scrollBy() 按照指定的像素值來滾動內容。
- scrollTo() 把內容滾動到指定的坐標。
- setInterval() 按照指定的周期（以毫秒計）來調用函數或計算表達式。
- setTimeout(方法,秒數) 在指定的毫秒數后調用函數或計算表達式。
- timeOutEvent = setTimeout("longPress('" + obj + "')",1500);定時器傳參數
擴展
① 如果文檔包含框架（frame 或 iframe 標簽），瀏覽器會為 HTML 文檔創建一個 window 對象，並為每個框架創建一個額外的 window 對象。
② window.frames 返回窗口中所有命名的框架
③parent是父窗口（如果窗口是頂級窗口，那么parent==self==top）
top是最頂級父窗口（有的窗口中套了好幾層frameset或者iframe）
self是當前窗口（等價window）
opener是用open方法打開當前窗口的那個窗口
④與消息框有關的方法：alert(String)、confirm(String)、prompt(String)
⑤兩種定時器：setTimeout(code,latency) 和 setInterval(code,period)
注：setTimeout只執行一次code，如果要多次調用，可以讓code自身再次調用setTimeout()；setInteval()會不停地調用code，直到clearInterval()被調用。
3.2 History對象
window.history.length //瀏覽過的頁面數
history.back() //在瀏覽歷史里后退一步
history.forward() //在瀏覽歷史里前進一步
history.go(i) //到汗青詳細登記單的第i位
//i>0進步,i<0撤退退卻
3 .3 Screen對象
screen對象：用於獲取某些關於用戶屏幕的信息，也可用window.screen引用它
window.screen.width //屏幕寬度
window.screen.height //屏幕高度
window.screen.colorDepth //屏幕顏色深度
window.screen.availWidth //可用寬度(除去任務欄的高度)
window.screen.availHeight //可用高度(除去任務欄的高度)
3.4 Navigator對象
navigator`對象：包含大量有關Web瀏覽器的信息，在檢測瀏覽器及操作系統上非常有用
- window.navigator.appCodeName //瀏覽器代碼名
- window.navigator.appName //瀏覽器步伐名
- window.navigator.appMinorVersion //瀏覽器補釘版本
- window.navigator.cpuClass //cpu類型 x86
- window.navigator.platform //操作體系類型 win32
- window.navigator.plugins
- window.navigator.opsProfile
- window.navigator.userProfile
- window.navigator.systemLanguage //客戶體系語言 zh-cn簡體中文
- window.navigator.userLanguage //用戶語言,同上
- window.navigator.appVersion //瀏覽器版本(包括 體系版本)
- window.navigator.userAgent//用戶代理頭的字符串表示
- window.navigator.onLine //用戶否在線
- window.navigator.cookieEnabled //瀏覽器是否撐持cookie
- window.navigator.mimeTypes
3.5 Location對象
- location對象：表示載入窗口的URL，也可用window.location引用它
- location.href //當前載入頁面的完整URL，如http://www.somewhere.com/pictures/index.htm
- location.portocol //URL中使用的協議，即雙斜杠之前的部分，如http
- location.host //服務器的名字，如www.wrox.com
- location.hostname //通常等於host，有時會省略前面的www
- location.port //URL聲明的請求的端口，默認情況下，大多數URL沒有端口信息，如8080
- location.pathname //URL中主機名后的部分，如/pictures/index.htm
- location.search //執行GET請求的URL中的問號后的部分，又稱查詢字符串，如?param=xxxx
- location.hash //如果URL包含#，返回該符號之后的內容，如#anchor1
- location.assign("http:www.baidu.com"); //同location.href，新地址都會被加到瀏覽器的歷史棧中
- location.replace("http:www.baidu.com"); //同assign()，但新地址不會被加到瀏覽器的歷史棧中，不能通過back和forward訪問
- location.reload(true | false); //重新載入當前頁面，為false時從瀏覽器緩存中重載，為true時從服務器端重載，默認為false
- document.location.reload(URL) //打開新的網頁
3.6 Document對象
HtmlDocument 為 Internet Explorer 的文檔對象提供托管包裝，該文檔對象也稱為 HTML 文檔對象模型 (DOM)。您可以通過 WebBrowser 控件的 Document 屬性獲取 HtmlDocument 的實例。
HTMLDocument 接口對 DOM Document 接口進行了擴展，定義 HTML 專用的屬性和方法。
HTML 文檔中的 HTML 標記可以相互嵌套。因此，HtmlDocument 表示一個文檔樹，其子級是 HtmlElement 類的實例。下面的代碼示例演示一個簡單的 HTML 文件。
HtmlDocument 表示 HTML 標記內的整個文檔。BODY、DIV、FORM 和 SPAN 標記各由一個單獨的 HtmlElement 對象表示。
1）對象屬性
- document.body//提供對 <body> 元素的直接訪問。對於定義了框架集的文檔，該屬性引用最外層的 <frameset>。
- document.cookie 返回與當前文檔有關的所有 cookie。
- document.title //返回文檔標題等價於HTML的title標簽
- document.domain 返回當前文檔的域名。
- document.URL //設置URL屬性從而在同一窗口打開另一網頁
- document.referrer 返回載入當前文檔的文檔的 URL。
- document.lastModified 返回文檔被最后修改的日期和時間。
2）常用對象方法
- document.write() //動態向頁面寫入內容
- document.writeln() 等同於 write() 方法，不同的是在每個表達式之后寫一個換行符。
- document.createElement(<Tag>) //用指定標簽類型創建一個新的element對象)
- document.getElementById(ID) //獲得指定ID值的對象
- document.getElementsByName(Name) //獲得指定Name值的對象
- document.getElementsByTagName() 返回帶有指定標簽名的對象集合。
3）body-主體子對象
- document.body //指定文檔主體的開始和結束等價於body>/body>
- document.body.bgColor //設置或獲取對象后面的背景顏色
- document.body.link //未點擊過的鏈接顏色
- document.body.alink //激活鏈接(焦點在此鏈接上)的顏色
- document.body.vlink //已點擊過的鏈接顏色
- document.body.text //文本色
- document.body.innerText //設置body>…/body>之間的文本
- document.body.innerHTML //設置body>…/body>之間的HTML代碼
- document.body.topMargin //頁面上邊距
- document.body.leftMargin //頁面左邊距
- document.body.rightMargin //頁面右邊距
- document.body.bottomMargin //頁面下邊距
- document.body.background //背景圖片
- document.body.appendChild(oTag) //動態生成一個HTML對象
四、Document子對象HTMLElement對象詳解
HTML DOM 節點
在 HTML DOM （文檔對象模型）中，每個部分都是節點：
1.文檔本身是文檔節點
2.所有 HTML 元素是元素節點
3.所有 HTML 屬性是屬性節點
4.HTML 元素內的文本是文本節點
5.注釋是注釋節點
Element 對象
在 HTML DOM 中，Element 對象表示 HTML 元素。
Element 對象可以擁有類型為元素節點、文本節點、注釋節點的子節點。
NodeList 對象表示節點列表，比如 HTML 元素的子節點集合。
元素也可以擁有屬性。屬性是屬性節點
獲取
document.getElementById(ID) //獲得指定ID值的對象
document.getElementsByName(Name) //獲得指定Name值的對象
getElementsByTagName() 返回帶有指定標簽名的對象集合。
屬性和方法
- 方法里有a,b的參數僅僅是為了加深說明,其他元素沒有a,b不代表是無參方法
- Element.add(<class>)給元素添加指定的類
- element.accessKey 設置或返回元素的快捷鍵。
- element.appendChild() 向元素添加新的子節點，作為最后一個子節點。
- element.attributes 返回元素屬性的集合。
- element.childNodes 返回元素子節點的 NodeList。
- element.className 設置或返回元素的 class 屬性。
- element.clientHeight 返回元素的可見高度。
- element.clientWidth 返回元素的可見寬度。
- element.cloneNode() 克隆元素。
- element.compareDocumentPosition() 比較兩個元素的文檔位置。
- element.contentEditable 設置或返回元素的文本方向。
- element.dir 設置或返回元素的文本方向。
- element.firstChild 返回元素的首個子。
- element.getAttribute() 返回元素節點的指定屬性值。
- element.getAttributeNode() 返回指定的屬性節點。
- element.getElementsByTagName() 返回擁有指定標簽名的所有子元素的集合。
- element.getFeature() 返回實現了指定特性的 API 的某個對象。
- element.getUserData() 返回關聯元素上鍵的對象。
- Element.hidden獲取或設置hidden屬性的存在狀態
- element.hasAttribute() 如果元素擁有指定屬性，則返回true，否則返回 false。
- element.hasAttributes() 如果元素擁有屬性，則返回 true，否則返回 false。
- element.hasChildNodes() 如果元素擁有子節點，則返回 true，否則 false。
- element.id 設置或返回元素的 id。
- element.innerHTML 設置或返回元素的內容。
- element.insertBefore(<a>,<b>) 在指定的已有的子節點之前插入新節點。A插到b前
- element.isContentEditable 設置或返回元素的內容。
- element.isDefaultNamespace() 如果指定的 namespaceURI 是默認的，則返回 true，否則返回 false。
- element.isEqualNode(<a>) 檢查a元素是否與當前元素相等。
- element.isSameNode(a) 檢查指定元素是否就是當前元素.
- element.isSupported() 如果元素支持指定特性，則返回 true。
- element.lang 設置或返回元素的語言代碼。
- element.lastChild 返回元素的最后一個子元素。
- element.namespaceURI 返回元素的 namespace URI。
- element.nextSibling 返回當前元素之后的兄弟元素
- element.nodeName 返回元素的名稱。
- element.nodeType 返回元素的節點類型。
- element.nodeValue 設置或返回元素值。
- element.normalize() 合並元素中相鄰的文本節點，並移除空的文本節點。
- element.offsetHeight 返回元素的高度。
- element.offsetWidth 返回元素的寬度。
- element.offsetLeft 返回元素的水平偏移位置。
- element.offsetParent 返回元素的偏移容器。
- element.offsetTop 返回元素的垂直偏移位置。
- element.ownerDocument 返回元素的根元素（文檔對象）。
- element.parentNode 返回元素的父節點。
- element.previousSibling 返回當前元素之前的兄弟元素
- Element.remove(<class>) 從元素移除指定的類
- element.removeAttribute() 從元素中移除指定屬性。
- element.removeAttributeNode() 移除指定的屬性節點，並返回被移除的節點。
- element.removeChild(a) 從元素中移除子節點。
- element.replaceChild(a,b) 替換元素中的子節點。
- element.scrollHeight 返回元素的整體高度。
- element.scrollLeft 返回元素左邊緣與視圖之間的距離。
- element.scrollTop 返回元素上邊緣與視圖之間的距離。
- element.scrollWidth 返回元素的整體寬度。
- element.setAttribute() 把指定屬性設置或更改為指定值。
- element.setAttributeNode() 設置或更改指定屬性節點。
- element.setIdAttribute()
- element.setIdAttributeNode()
- element.setUserData() 把對象關聯到元素上的鍵。
- element.style 設置或返回元素的 style 屬性。
- Element.toggle(<class>)如果類不存在就添加它存在就移除它
- element.tabIndex 設置或返回元素的 tab 鍵控制次序。
- element.tagName 返回元素的標簽名。
- element.textContent 設置或返回節點及其后代的文本內容。
- element.title 設置或返回元素的 title 屬性。
- element.toString() 把元素轉換為字符串。
- nodelist.item() 返回 NodeList 中位於指定下標的節點。
- nodelist.length 返回 NodeList 中的節點數。
- contentWindow 屬性 如果文檔里有iframe屬性利用此屬性可以返回iframe的內容
文檔對象模型(DOM)
DOM節點樹模型（以HTML DOM樹為例）
DOM模型將整個文檔（XML文檔和HTML文檔）看成一個樹形結構，
在DOM中，HTML文檔的層次結構被表示為一個樹形結構。並用document對象表示該文檔，樹的每個子節點表示HTML文檔中的不同內容。
每個載入瀏覽器的 HTML 文檔都會成為 Document 對象,Document是探索DOM的入口,利用全局變量document可以訪問Document對象
4.1認識DOM
先看下面代碼
將HTML代碼分解為DOM節點層次圖:
DOM通過創建樹來表示文檔，描述了處理網頁內容的方法和接口，從而使開發者對文檔的內容和結構具有空前的控制力，用DOM API可以輕松地刪除、添加和替換節點。
1）節點類型
DOM規定文檔中的每個成分都是一個節點（Node）,HTML文檔可以說由節點構成的集合，DOM節點有:
2）DOM節點三大屬性（XML DOM）
4.2 DOM常見操作
Node為所有節點的父接口，其定義了一組公共的屬性和方法，如下：
1）獲取節點
① 獲取元素節點：通過document對象的三個方法獲取
document.getElementById("ID")
document.getElementByName("name")
document.getElementsByTagName("p");
② 獲取屬性節點：屬性節點附屬於元素節點，可通過元素節點的getAttributeNode(attrName)方法獲取屬性節點，也可通過getAttribute(attrName)直接獲取屬性值。（與之相對的是Element接口的setAttribute(attrName , attrValue)方法，如果屬性不存在，則直接添加到元素節點上）
③ 獲取文本節點：文本節點為元素節點的子節點，可通過元素節點（Element接口）提供的childnodes()[index] 方法獲得。
childNodes //NodeList，所有子節點的列表
firstChild //Node，指向在childNodes列表中的第一個節點
lastChild //Node，指向在childNodes列表中的最后一個節點
parentNode //Node，指向父節點
previousSibling /Node，/指向前一個兄弟節點：如果這個節點就是第一個節點，那么該值為 null
nextSibling //Node，指向后一個兄弟節點：如果這個節點就是最后一個節點，那么該值為null
hasChildNodes()` //Boolean，當childNodes包含一個或多個節點時，返回真值
2）改變節點
① 改變屬性節點的值：可以通過屬性節點的nodeValue直接修改屬性值，也可通過元素節點的setAttribute()方法改變。
② 改變文本節點的值：通過文本節點的nodeValue直接修改。
在HTML DOM中，獲取和改變元素內容最簡單方法是使用元素的innerHTML屬性（innerText屬性返回去掉標簽的innerHTML）
拓展:
innerText、innerHTML、outerHTML、outerText
innerText: 表示起始標簽和結束標簽之間的文本
innerHTML: 表示元素的所有元素和文本的HTML代碼
如：<div><b>Hello</b> world</div>的innerText為Hello world，innerHTML為Hello world
outerText: 與前者的區別是替換的是整個目標節點，問題返回和innerText一樣的內容
outerHTML: 與前者的區別是替換的是整個目標節點，返回元素完整的HTML代碼，包括元素本身
一張圖了解OUTHTML和innerText、innerHTML：
改變HTML樣式（style屬性）：element.style.color =“red”;
3）刪除節點
① 刪除元素節點：要想刪除元素節點A，需獲得A的父節點B，父節點可通過17.1.1中的方法獲得，也可以直接通過A的parentNode屬性獲得（推薦）。調用B的removeChild(A) 即可刪除A節點。
② 刪除屬性節點：可通過屬性節點所屬的元素節點的removeAttribute(attrName)或removeAttributeNode(node)刪除。
③ 清空文本節點：最簡單也是最常用的方法就是直接設置文本節點的nameNode屬性為空串：textNode.nodeValue = ””。
混淆點:
<p id="example" title="texts">
這是一段文本
<span></span>
</p>
var p = document.getElementById('example');
p.nodeValue //null,p是元素節點，所以nodeValue為null
p.getAttributeNode('id').nodeValue //example，這里獲取到p的id屬性的屬性節點，nodeValue就是它的屬性值
p.childNodes[0].nodeValue //這是一段文本,
p是含有兩個子節點的，插入的文本雖然沒有標簽，但它依然是一個節點。
其類型是是文本節點，其nodeValue是就是寫入在其中的字符串，包含換行和縮進
p.innerHTML//這是一段文本 <span></span>"
這里innerHTML返回了p所包含的全部的節點的所包含的各種值了，以字符串的形式。
4）創建和添加節點
① 創建節點：通過document對象的createElement(eleName)、createTextNode(nodeValue)方法可分別創建元素節點和文本節點。屬性節點也有自己的create方法，但是用的少，直接用元素節點的setAttribute()方法即可添加屬性。
② 添加節點：兩個重要的方法：appendChild()和insertBefore()，具體見Node接口中的方法。
擴展：上面的兩個方法都是在已知父節點時用到的，也可以直接在兄弟節點后添加新節點：x.insertBefore(newNode) 和 x.appendChild(newNode) 都可以向 x 后追加一個新的子節點。
5）替換節點
主要掌握replaceChild(newNode , oldNode) 替換元素節點。（屬性節點和文本節點有更簡單的方法）
4.3 DOM事件
DOM同時兩種事件模型：冒泡型事件和捕獲型事件
冒泡型事件：事件按照從最特定的事件目標到最不特定的事件目標的順序觸發
<body οnclick="handleClick()">
<div οnclick="handleClick()">Click Me</div>
</body>
觸發的順序是：div、body、html(IE 6.0和Mozilla 1.0)、document、window(Mozilla 1.0)
捕獲型事件：與冒泡事件相反的過程，事件從最不精確的對象開始觸發，然后到最精確
上面例子觸發的順序是：document、div
DOM事件模型最獨特的性質是，文本節點也觸發事件(在IE中不會)。
1）事件處理函數/監聽函數
在JavaScript中：
var oDiv = document.getElementById("div1");
oDiv.onclick = function(){ //onclick只能用小寫
alert("Clicked!");
}
或者
var elem =document.getElementById(“id”)
elem.οnmοuseοver=handleMouseOver //handleMouseOver 是函數名
function handleMouseOve(e){...}
在HTML中：
<div οnclick="javascript: alert("Clicked!")"></div> //onclick大小寫任意
擴展:
IE事件處理程序attachEvent()和detachEvent()
在IE中，每個元素和window對象都有兩個方法：attachEvent()和detachEvent()，這兩個方法接受兩個相同的參數，事件處理程序名稱和事件處理程序函數，如：
[object].attachEvent("name_of_event_handler","function_to_attach")
[object].detachEvent("name_of_event_handler","function_to_remove")
var fnClick = function(){
alert("Clicked!");
}
oDiv.attachEvent("onclick", fnClick); //添加事件處理函數
oDiv.attachEvent("onclick", fnClickAnother); // 可以添加多個事件處理函數
oDiv.detachEvent("onclick", fnClick); //移除事件處理函數
在使用attachEvent()方法的情況下，事件處理程序會在全局作用域中運行，因此this等於window。
2）跨瀏覽器的事件處理程序
addHandler()和removeHandler()
addHandler()方法屬於一個叫EventUntil()的對象，這兩個方法均接受三個相同的參數，要操作的元素，事件名稱和事件處理程序函數。
3）事件處理器
執行JavaScript 代碼的程序在事件發生時會對事件做出響應。為了響應一個特定事件
而被執行的代碼稱為事件處理器。
在HTML標簽中使用事件處理器的語法是：
<HTML標簽 事件處理器="JavaScript代碼''>
4）事件處理程序
事件就是用戶或瀏覽器自身執行的某種動作。比如click,mouseup,keydown,mouseover等都是事件的名字。而響應某個事件的函數就叫事件處理程序（事件監聽器），事件處理程序以on開頭，因此click的事件處理程序就是onclick
5）DOM 0級事件處理程序
DOM 0級事件處理程序：把一個函數賦值給一個事件的處理程序屬性
HTML
<input type="button" value="按鈕2" id="ben2"/>
JS
var btn2=document.getElementById('btn2');獲得btn2按鈕對象
btn2.onclick //給btn2添加onclick屬性，屬性又觸發了一個事件處理程序
btn2.οnclick=function(){
} //添加匿名函數
btn2.οnclick=null //刪除onclick屬性
6）DOM 2級事件處理程序
DOM 2級事件定義了兩個方法，用於指定和刪除事件處理程序的操作。addEventListener()和removeEventListener()
addEventListener()和removeEventListener()
在DOM中，addEventListener()和removeEventListener()用來分配和移除事件處理函數，與IE不同的是，這些方法需要三個參數：事件名稱，要分配的函數和處理函數是用於冒泡階段(false)還是捕獲階段(true)，默認為冒泡階段false
[object].addEventListener("name_of_event",fnhander,bcapture)
[object].removeEventListener("name_of_event",fnhander,bcapture)
var fnClick = function(){
alert("Clicked!");
}
oDiv.addEventListener("onclick", fnClick, false); //添加事件處理函數
oDiv.addEventListener("onclick", fnClickAnother, false); // 與IE一樣，可以添加多個事件處理函數
oDiv.removeEventListener("onclick", fnClick, false); //移除事件處理函數
如果使用addEventListener()將事件處理函數加入到捕獲階段，則必須在removeEventListener()中指明是捕獲階段，才能正確地將這個事件處理函數刪除
oDiv.onclick = fnClick;
oDiv.onclick = fnClickAnother; //使用直接賦值，后續的事件處理函數會覆蓋前面的處理函數
oDiv.onclick = fnClick;
oDiv.addEventListener("onclick", fnClickAnother, false); //會按順序進行調用，不會覆蓋
7）事件類型
鼠標事件：click、dbclick、mousedown、mouseup、mouseover、mouseout、mousemove
鍵盤事件：keydown、keypress、keyup
HTML事件：load、unload、abort、error、select、change、submit、reset、resize、scroll、focus、blur
Window 事件屬性(沒加藍的都是h 5新事件)
針對 window 對象觸發的事件（應用到 <body> 標簽）：
屬性
onafterprint 文檔打印之后運行的腳本。
onbeforeprint 文檔打印之前運行的腳本。
onbeforeunload 文檔卸載之前運行的腳本。
onerror 在錯誤發生時運行的腳本。
onhaschange 當文檔已改變時運行的腳本。
onload 頁面結束加載之后觸發。
onmessage 在消息被觸發時運行的腳本。
可以使用調用 postMessage ()向主線程發送消息,在某些場景下，業務調用方可能需要主動跟定位組件通信,可以通過html5 postMessage的方式主動與定位組件發起通信
onoffline 當文檔離線時運行的腳本。
ononline 當文檔上線時運行的腳本。
onpagehide 當窗口隱藏時運行的腳本。
onpageshow 當窗口成為可見時運行的腳本。
onpopstate 當窗口歷史記錄改變時運行的腳本。
onredo 當文檔執行撤銷（redo）時運行的腳本。
onresize 當瀏覽器窗口被調整大小時觸發。
onstorage 在 Web Storage 區域更新后運行的腳本。
onundo 在文檔執行 undo 時運行的腳本。
onunload 一旦頁面已下載時觸發（或者瀏覽器窗口已被關閉）。
Form 事件
由 HTML 表單內的動作觸發的事件（應用到幾乎所有 HTML 元素，但最常用在 form 元素中）：
屬性
onblur 元素失去焦點時運行的腳本。
onchange在元素值被改變時運行的腳本。
oncontextmenu 當上下文菜單被觸發時運行的腳本。
onfocus 當元素失去焦點時運行的腳本。
onformchange 在表單改變時運行的腳本。
onforminput 當表單獲得用戶輸入時運行的腳本。
oninput 當元素獲得用戶輸入時運行的腳本。
oninvalid 當元素無效時運行的腳本。
onreset 當表單中的重置按鈕被點擊時觸發。HTML5 中不支持。
onselect 在元素中文本被選中后觸發。
onsubmit 在提交表單時觸發。