1.Javascript組成
JavaScript的實現包括以下3個部分：
1）核心（ECMAScript）：描述了js的語法和基本對象。
2）文檔對象模型 （DOM）：處理網頁內容的方法和接口
3）瀏覽器對象模型（BOM）：與瀏覽器交互的方法和接口
ECMAScript擴展知識：
① ECMAScript是一個標準，JS只是它的一個實現，其他實現包括ActionScript。
② “ECMAScript可以爲不同種類的宿主環境提供核心的腳本編程能力……”，即ECMAScript不與具體的宿主環境相綁定，如JS的宿主環境是瀏覽器，AS的宿主環境是Flash。
③ECMAScript描述了以下內容：語法、類型、語句、關鍵字、保留字、運算符、對象。
我們都知道， javascript 有三部分構成，ECMAScript，DOM和BOM，根據宿主（瀏覽器）的不同，具體的表現形式也不盡相同，ie和其他的瀏覽器風格迥異。
1. DOM 是 W3C的標準；[所有瀏覽器公共遵守的標準]
2. BOM 是 各個瀏覽器廠商根據 DOM
在各自瀏覽器上的實現;[表現爲不同瀏覽器定義有差別,實現方式不同]
3. window 是 BOM對象，而非js對象；
DOM（文檔對象模型）是 HTML 和 XML 的應用程序接口（API）。
BOM 主要處理瀏覽器窗口和框架，不過通常瀏覽器特定的 JavaScript 擴展都被看做 BOM 的一部分。這些擴展包括：
彈出新的瀏覽器窗口
移動、關閉瀏覽器窗口以及調整窗口大小
提供 Web 瀏覽器詳細信息的定位對象
提供用戶屏幕分辨率詳細信息的屏幕對象
對 cookie 的支持
IE 擴展了 BOM，加入了ActiveXObject類，可以通過JavaScript實例化ActiveX對象
javacsript是通過訪問BOM（Browser Object Model）對象來訪問、控制、修改客戶端(瀏覽器)，由於BOM的window包含了document，window對象的屬性和方法是直接可以使用而且被感知的，因此可以直接使用window對象的document屬性，通過document屬性就可以訪問、檢索、修改XHTML文檔內容與結構。因爲document對象又是DOM（Document
Object Model）模型的根節點。可以說，BOM包含了DOM(對象)，瀏覽器提供出來給予訪問的是BOM對象，從BOM對象再訪問到DOM對象，從而js可以操作瀏覽器以及瀏覽器讀取到的文檔。其中
DOM包含：window
Window對象包含屬性：document、location、navigator、screen、history、frames
Document根節點包含子節點：forms、location、anchors、images、links
從window.document已然可以看出，DOM的最根本的對象是BOM的window對象的子對象。
區別：DOM描述了處理網頁內容的方法和接口，BOM描述了與瀏覽器進行交互的方法和接口
1.1 DOM, DOCUMENT, BOM, WINDOW 區別
DOM 全稱是 Document Object Model，也就是文檔對象模型。是針對XML的基於樹的API。描述了處理網頁內容的方法和接口，是HTML和XML的API，DOM把整個頁面規劃成由節點層級構成的文檔。針對XHTML和HTML的DOM。這個DOM定義了一個HTMLDocument和HTMLElement做爲這種實現的基礎,就是說爲了能以編程的方法操作這個 HTML 的內容（比如添加某些元素、修改元素的內容、刪除某些元素），我們把這個 HTML 看做一個對象樹（DOM樹），它本身和裏面的所有東西比如 <div></div> 這些標籤都看做一個對象，每個對象都叫做一個節點（node），節點可以理解爲 DOM 中所有 Object 的父類。
DOM 有什麼用？就是爲了操作 HTML 中的元素，比如說我們要通過 JS 把這個網頁的標題改了，直接這樣就可以了：
document.title = 'how to make love';
這個 API 使得在網頁被下載到瀏覽器之後改變網頁的內容成爲可能。
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');
BOM
BOM 是 Browser Object Model，瀏覽器對象模型。
剛纔說過 DOM 是爲了操作文檔出現的接口，那 BOM 顧名思義其實就是爲了控制瀏覽器的行爲而出現的接口。
瀏覽器可以做什麼呢？比如跳轉到另一個頁面、前進、後退等等，程序還可能需要獲取屏幕的大小之類的參數。
所以 BOM 就是爲了解決這些事情出現的接口。比如我們要讓瀏覽器跳轉到另一個頁面，只需要
location.href = "http://www.xxxx.com";
這個 location 就是 BOM 裏的一個對象。
window
window 也是 BOM 的一個對象，除去編程意義上的“兜底對象”之外，通過這個對象可以獲取窗口位置、確定窗口大小、彈出對話框等等。例如我要關閉當前窗口：
window.close();
總結一下題主的問題：
DOM 是爲了操作文檔出現的 API，document 是其的一個對象；
BOM 是爲了操作瀏覽器出現的 API，window 是其的一個對象。
歸DOM管的：
E區（就是你說的document啦。由web開發人員嘔心瀝血寫出來的一個文件夾，裏面有index.html，CSS和JS什麼鬼的，部署在服務器上，我們可以通過瀏覽器的地址欄輸入URL然後回車將這個document加載到本地，瀏覽，右鍵查看源代碼等。
歸BOM管的：
A區（瀏覽器的標籤頁，地址欄，搜索欄，書籤欄，窗口放大還原關閉按鈕，菜單欄等等）
B區（瀏覽器的右鍵菜單）
C區（document加載時的狀態欄，顯示http狀態碼等）
D區（滾動條scroll bar）
BOM是瀏覽器對象模型，DOM是文檔對象模型，前者是對瀏覽器本身進行操作，而後者是對瀏覽器（可看成容器）內的內容進行操作
BOM和DOM的結構關係示意圖
2.文檔對象模型(DOM)
DOM節點樹模型（以HTML DOM樹爲例）
DOM模型將整個文檔（XML文檔和HTML文檔）看成一個樹形結構，
在DOM中，HTML文檔的層次結構被表示爲一個樹形結構。並用document對象表示該文檔，樹的每個子節點表示HTML文檔中的不同內容。
每個載入瀏覽器的 HTML 文檔都會成爲Document對象,Document是探索DOM的入口,利用全局變量document可以訪問Document對象
2.1認識DOM
先看下面代碼
將HTML代碼分解爲DOM節點層次圖:
DOM通過創建樹來表示文檔，描述了處理網頁內容的方法和接口，從而使開發者對文檔的內容和結構具有空前的控制力，用DOM API可以輕鬆地刪除、添加和替換節點。
1）節點類型
DOM規定文檔中的每個成分都是一個節點（Node）,HTML文檔可以說由節點構成的集合，DOM節點有:
1. 元素節點（Element）：上圖中<html>、<body>、<p>等都是元素節點，即標籤。
2. 文本節點（Text）:向用戶展示的內容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
3. 屬性節點（Attr）:元素屬性，元素纔有屬性,如<a>標籤的鏈接屬性href="http://www.baidu.com"。
1） DOM節點三大屬性（XML DOM）
1）nodeName：元素節點、屬性節點、文本節點分別返回元素的名稱、屬性的名稱和#text的字符串。
2）nodeType：元素節點、屬性節點、文本節點的nodeType值分別爲1、2、3.、
3）nodeValue：元素節點、屬性節點、文本節點的返回值分別爲null、屬性值和文本節點內容。
2.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) 替換元素節點。（屬性節點和文本節點有更簡單的方法）
2.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）事件類型
鼠標事件：click、dbclick、mousedown、mouseup、mouseover、mouseout、mousemove
鍵盤事件：keydown、keypress、keyup
HTML事件：load、unload、abort、error、select、change、submit、reset、resize、scroll、focus、blur
4）事件處理器
執行JavaScript 代碼的程序在事件發生時會對事件做出響應。爲了響應一個特定事件
而被執行的代碼稱爲事件處理器。
在HTML標籤中使用事件處理器的語法是：
<HTML標籤 事件處理器="JavaScript代碼''>
5）事件處理程序
事件就是用戶或瀏覽器自身執行的某種動作。比如click,mouseup,keydown,mouseover等都是事件的名字。而響應某個事件的函數就叫事件處理程序（事件監聽器），事件處理程序以on開頭，因此click的事件處理程序就是onclick
6）DOM 0級事件處理程序
DOM 0級事件處理程序：把一個函數賦值給一個事件的處理程序屬性
<input type="button" value="按鈕2" id="ben2"/>
var btn2=document.getElementById('btn2');獲得btn2按鈕對象
btn2.onclick //給btn2添加onclick屬性，屬性又觸發了一個事件處理程序
btn2.οnclick=function(){
} //添加匿名函數
btn2.οnclick=null //刪除onclick屬性
7）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); //會按順序進行調用，不會覆蓋
3.瀏覽器對象模型(BOM)
BOM的核心是window，而window對象又具有雙重角色，它既是通過js訪問瀏覽器窗口的一個接口，又是一個Global（全局）對象。這意味着在網頁中定義的任何對象，變量和函數，都以window作爲其global對象。
3.1Window對象
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對象。
defaultStatus 設置或返回窗口狀態欄中的默認文本。
innerheight 返回窗口的文檔顯示區的高度。
innerwidth 返回窗口的文檔顯示區的寬度。
outerheight 返回窗口的外部高度。
outerwidth 返回窗口的外部寬度。
pageXOffset 設置或返回當前頁面相對於窗口顯示區左上角的 X 位置。
pageYOffset 設置或返回當前頁面相對於窗口顯示區左上角的 Y 位置。
name 設置或返回窗口的名稱。
parent 返回父窗口。
top 返回最頂層的先輩窗口。
status 設置窗口狀態欄的文本。
window.location //URL地址，配備佈置這個屬性可以打開新的頁面
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);定時器傳參數
3）成員對象
window.event
window.document //見document對象詳解
window.history
window.screen
window.navigator
Window.external
擴展
① 如果文檔包含框架（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 external對象
window.external.AddFavorite("地址","標題" ) //把網站新增到保藏夾
-------------------------------------------------- -------------------
3.5 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.6 Document對象
1）對象屬性
document.body//提供對 <body>元素的直接訪問。對於定義了框架集的文檔，該屬性引用最外層的<frameset>。
document.cookie 返回與當前文檔有關的所有 cookie。
document.title //返回文檔標題等價於HTML的title標籤
document.domain 返回當前文檔的域名。
document.bgColor //返回頁面背景色
document.fgColor //返回前景色(文本顏色)
document.linkColor //未點擊過的鏈接顏色
document.alinkColor //激活鏈接(焦點在此鏈接上)的顏色
document.vlinkColor //已點擊過的鏈接顏色
document.URL //設置URL屬性從而在同一窗口打開另一網頁
document.fileCreatedDate //文件建立日期，只讀屬性
document.fileModifiedDate //文件修改日期，只讀屬性
document.lastModified 返回文檔被最後修改的日期和時間。
document.fileSize //文件大小，只讀屬性
document.cookie //設置和讀出cookie
document.charset //返回字符集 簡體中文:gb2312
document.URL 返回當前文檔的 URL。
document.referrer 返回載入當前文檔的文檔的 URL。
document.styleSheets 返回樣式表的集合,返回值CSSStyleSheet[]
document.styleSheets[0].cssRules.style.paddingTop=”10px”設置樣式,樣式名去掉連字符,
2）常用對象方法
document.write() //動態向頁面寫入內容
document.writeln() 等同於 write() 方法，不同的是在每個表達式之後寫一個換行符。
document.createElement(<Tag>) //用指定標籤類型創建一個新的element對象)
document.getElementById(ID) //獲得指定ID值的對象
document.getElementsByName(Name) //獲得指定Name值的對象
getElementsByTagName() 返回帶有指定標籤名的對象集合。
document.body.appendChild(oTag)
———————————————————————
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對象
4）常用對象事件
document.body.οnclick=”func()”//鼠標指針單擊對象是觸發
document.body.οnmοuseοver=”func()”//鼠標指針移到對象時觸發
document.body.οnmοuseοut=”func()”//鼠標指針移出對象時觸發
———————————————————————
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) //打開新的網頁
6）selection-選區子對象
document.selection
7）forms集合(頁面中的表單)
a)通過集合引用
document.forms //對應頁面上的form標籤
document.forms.length //對應頁面上/formform標籤的個數
document.forms[0] //第1個/formform標籤
document.forms[i] //第i-1個/formform標籤
document.forms[i].length //第i-1個/formform中的控件數
document.forms[i].elements[j] //第i-1個/formform中第j-1個控件
b)通過標籤name屬性直接引用
/formform name=”Myform”>input name=”myctrl”/>/form
document.Myform.myctrl //document.表單名.控件名
c)訪問表單的屬性
document.forms[i].name //對應form name>屬性
document.forms[i].action //對應/formform action>屬性
document.forms[i].encoding //對應/formform enctype>屬性
document.forms[i].target //對應/formform target>屬性
document.forms[i].appendChild(oTag) //動態插入一個控件
document.all.oDiv //引用圖層oDiv
document.all.oDiv.style.display=” //圖層設置爲可視
document.all.oDiv.style.display=”none”//圖層設置爲隱藏
document.getElementId(”oDiv”) //通過getElementId引用對象
document.getElementId(”oDiv”).style=”
document.getElementId(”oDiv”).display=”none”
/*document.all表示document中所有對象的集合
只有ie支持此屬性，因此也用來判斷瀏覽器的種類*/
....
3.7 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 中的節點數。
element.addEventListener(event, function, useCapture)
|
參數 |
描述 |
|
event |
必須。字符串，指定事件名。 注意: 不要使用"on"前綴。 例如，使用"click" ,而不是使用"onclick"。 提示： 所有 HTML DOM 事件，可以查看我們完整的HTML DOM Event對象參考手冊。 |
|
function |
必須。指定要事件觸發時執行的函數。 當事件對象會作爲第一個參數傳入函數。 事件對象的類型取決於特定的事件。例如， "click" 事件屬於 MouseEvent(鼠標事件)對象。
|
|
useCapture |
可選。布爾值，指定事件是否在捕獲或冒泡階段執行。 可能值: true - 事件句柄在捕獲階段執行 false- false- 默認。事件句柄在冒泡階段執行 |
contentWindow 屬性
如果文檔裏有iframe屬性利用此屬性可以返回iframe的內容
1）Table 對象
rows 集合返回表格中所有行（TableRow對象）的一個數組，該集合包括<thead>、<tfoot>和<tbody>中定義的所有行
TableRow 對象
TableRow 對象代表一個HTML表格行。
在 HTML 文檔中 <tr> 標籤每出現一次，一個 TableRow對象就會被創建。
TableRow 對象集合
|
集合 |
描述 |
IE |
F |
O |
W3C |
|
cells[] |
返回包含行中所有單元格的一個數組。 |
4 |
1 |
9 |
Yes |
cells 集合返回表格中所有 <td>或<th>元素。
TableCell 對象代表一個HTML 表格單元格。
在一個 HTML 文檔中 <td> 標籤每出現一次，一個 TableCell對象就會被創建
3.8 Event對象
1）Event對象的常用屬性
|
名稱 |
說明 |
返回 |
|
type |
事件的名稱如mouseover |
字符串 |
|
target |
事件指向的元素 |
HTMLElement |
2）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 一旦頁面已下載時觸發（或者瀏覽器窗口已被關閉）。
3）Form 事件
由 HTML 表單內的動作觸發的事件（應用到幾乎所有HTML元素，但最常用在form元素中）：
屬性
onblur 元素失去焦點時運行的腳本。
onchange在元素值被改變時運行的腳本。
oncontextmenu 當上下文菜單被觸發時運行的腳本。
onfocus 當元素失去焦點時運行的腳本。
onformchange 在表單改變時運行的腳本。
onforminput 當表單獲得用戶輸入時運行的腳本。
oninput 當元素獲得用戶輸入時運行的腳本。
oninvalid 當元素無效時運行的腳本。
onreset 當表單中的重置按鈕被點擊時觸發。html5中不支持。
onselect 在元素中文本被選中後觸發。
onsubmit 在提交表單時觸發。
4）oninput,onpropertychange,onchange的用法
oninput:
oninput 事件在用戶輸入時觸發。
該事件在 <input> 或<textarea>元素的值發生改變時觸發。
提示： 該事件類似於 onchange 事件。不同之處在於oninput事件在元素值發生變化是立即觸發，onchange在元素失去焦點時觸發。另外一點不同是onchange事件也可以作用於<keygen>和<select>元素。
onchange
onchange 事件會在域的內容改變時發生。
onchange 事件也可用於單選框與複選框改變後觸發的事件。
onchange觸發事件必須滿足兩個條件：
a）當前對象屬性改變，並且是由鍵盤或鼠標事件激發的（腳本觸發無效）
b）當前對象失去焦點(onblur)；
onpropertychange的話，只要當前對象屬性發生改變，都會觸發事件，但是它是IE專屬的；
oninput是onpropertychange的非IE瀏覽器版本，支持firefox和opera等瀏覽器，但有一點不同，它綁定於對象時，並非該對象所有屬性改變都能觸發事件，它只在對象value值發生改變時奏效。
在textarea中，如果想捕獲用戶的鍵盤輸入，用onkeyup檢查事件就可以了，但是onkeyup並不支持複製和粘貼，因此需要動態監測textarea中值的變化，這就需要onpropertychange（用在IE瀏覽器）和oninput（非IE瀏覽器）結合在一起使用了。
5）移動端 觸摸事件
ontouchstart、ontouchmove、ontouchend、ontouchcancel
1、Touch事件簡介
pc上的web頁面鼠 標會產生onmousedown、onmouseup、onmouseout、onmouseover、onmousemove的事件，但是在移動終端如iphone、ipod Touch、ipad上的web頁面觸屏時會產生ontouchstart、ontouchmove、ontouchend、ontouchcancel事件，分別對應了觸屏開始、拖拽及完成觸屏事件和取消。
當按下手指時，觸發ontouchstart；
當移動手指時，觸發ontouchmove；
當移走手指時，觸發ontouchend。
當一些更高級別的事件發生的時候（如電話接入或者彈出信息）會取消當前的touch操作，即觸發ontouchcancel。一般會在ontouchcancel時暫停遊戲、存檔等操作。
2、Touch事件與Mouse事件的出發關係
在觸屏操作後，手指提起的一剎那（即發生ontouchend後），系統會判斷接收到事件的element的內容是否被改變，如果內容被改變，接下來的事 件都不會觸發，如果沒有改變，會按照mousedown，mouseup，click的順序觸發事件。特別需要提到的是，只有再觸發一個觸屏事件時，纔會 觸發上一個事件的mouseout事件。
4. DOM基本操作思維導圖
5. window對象思維導圖
