2js組成
我們都知道场钉，?javascript?有三部分構(gòu)成，ECMAScript岔绸，DOM和BOM，根據(jù)宿主（瀏覽器）的不同橡伞，具體的表現(xiàn)形式也不盡相同盒揉，ie和其他的瀏覽器風(fēng)格迥異。
1. DOM 是 W3C 的標(biāo)準(zhǔn)骑歹； [所有瀏覽器公共遵守的標(biāo)準(zhǔn)]
2. BOM 是 各個(gè)瀏覽器廠商根據(jù) DOM
在各自瀏覽器上的實(shí)現(xiàn);[表現(xiàn)為不同瀏覽器定義有差別,實(shí)現(xiàn)方式不同]
3. window 是 BOM 對(duì)象预烙，而非 js 對(duì)象；
DOM（文檔對(duì)象模型）是?HTML?和XML?的應(yīng)用程序接口（API）道媚。
BOM?主要處理瀏覽器窗口和框架扁掸，不過(guò)通常瀏覽器特定的JavaScript?擴(kuò)展都被看做 BOM 的一部分。這些擴(kuò)展包括：
1.彈出新的瀏覽器窗口
2.移動(dòng)最域、關(guān)閉瀏覽器窗口以及調(diào)整窗口大小
3.提供 Web 瀏覽器詳細(xì)信息的定位對(duì)象
4.提供用戶屏幕分辨率詳細(xì)信息的屏幕對(duì)象
5.對(duì) cookie 的支持
6.IE 擴(kuò)展了 BOM谴分，加入了 ActiveXObject 類，可以通過(guò) JavaScript 實(shí)例化 ActiveX 對(duì)象
javacsript是通過(guò)訪問(wèn)BOM（Browser Object Model）對(duì)象來(lái)訪問(wèn)镀脂、控制牺蹄、修改客戶端(瀏覽器)，由于BOM的window包含了document薄翅，window對(duì)象的屬性和方法是直接可以使用而且被感知的沙兰，因此可以直接使用window對(duì)象的document屬性氓奈，通過(guò)document屬性就可以訪問(wèn)、檢索鼎天、修改XHTML文檔內(nèi)容與結(jié)構(gòu)舀奶。因?yàn)閐ocument對(duì)象又是DOM（Document Object Model）模型的根節(jié)點(diǎn)≌洌可以說(shuō)育勺，BOM包含了DOM(對(duì)象)，瀏覽器提供出來(lái)給予訪問(wèn)的是BOM對(duì)象罗岖，從BOM對(duì)象再訪問(wèn)到DOM對(duì)象涧至，從而js可以操作瀏覽器以及瀏覽器讀取到的文檔。
其中DOM包含：window
1.Window對(duì)象包含屬性：document桑包、location南蓬、navigator、screen哑了、history蓖康、frames
2.Document根節(jié)點(diǎn)包含子節(jié)點(diǎn)：forms、location垒手、anchors蒜焊、images、links
從window.document已然可以看出科贬，DOM的最根本的對(duì)象是BOM的window對(duì)象的子對(duì)象泳梆。
區(qū)別：DOM描述了處理網(wǎng)頁(yè)內(nèi)容的方法和接口，BOM描述了與瀏覽器進(jìn)行交互的方法和接口榜掌。
認(rèn)識(shí)DOM
先來(lái)看看下面代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
?<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en">
?<head>
?????<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>
?????<title>DOM</title>
?</head>
?<body>
?????<h2><ahref="http://www.baidu.com">javascript DOM</a></h2>
?????<p>對(duì)HTML元素進(jìn)行操作优妙，可添加、改變或移除css樣式等</p>
?????<ul>
?????????<li>Javascript</li>
?????????<li>DOM</li>
?????????<li>CSS</li>
?????</ul>
?</body>
?</html>
將HTML代碼分解為DOM節(jié)點(diǎn)層次圖:
**HTML文檔可以說(shuō)由節(jié)點(diǎn)構(gòu)成的集合憎账，DOM節(jié)點(diǎn)有:**
1. 元素節(jié)點(diǎn)：上圖中<html>套硼、<body>、<p>等都是元素節(jié)點(diǎn)胞皱，即標(biāo)簽邪意。
2. 文本節(jié)點(diǎn):向用戶展示的內(nèi)容，如<li>...</li>中的JavaScript反砌、DOM雾鬼、CSS等文本。
3. 屬性節(jié)點(diǎn):元素屬性宴树，如標(biāo)簽的鏈接屬性href="http://www.baidu.com"策菜。
節(jié)點(diǎn)屬性節(jié)點(diǎn)屬性nodeName返回一個(gè)字符串，其內(nèi)容是節(jié)點(diǎn)的名字nodeType返回一個(gè)整數(shù)，這個(gè)數(shù)值代表給定節(jié)點(diǎn)的類型nodeValue返回給定節(jié)點(diǎn)的當(dāng)前值
遍歷節(jié)點(diǎn)樹(shù)遍歷節(jié)點(diǎn)樹(shù)childNodes返回一個(gè)數(shù)組又憨，這個(gè)數(shù)組由給定元素的子節(jié)點(diǎn)構(gòu)成firstChild返回第一個(gè)子節(jié)點(diǎn)lastChild返回最后一個(gè)子節(jié)點(diǎn)parentNode返回一個(gè)給定節(jié)點(diǎn)的父節(jié)點(diǎn)nextSibling返回給定節(jié)點(diǎn)的下一個(gè)子節(jié)點(diǎn)previousSibling返回給定節(jié)點(diǎn)的上一個(gè)子節(jié)點(diǎn)
DOM操作DOM操作creatElement(element)創(chuàng)建一個(gè)新的元素節(jié)點(diǎn)creatTextNode()創(chuàng)建一個(gè)包含給定文本的新文本節(jié)點(diǎn)appendChild()指定節(jié)點(diǎn)的最后一個(gè)節(jié)點(diǎn)列表后添加一個(gè)新的子節(jié)insertBefore()將一個(gè)給定節(jié)點(diǎn)插入到一個(gè)給定元素節(jié)點(diǎn)的給定子節(jié)點(diǎn)的前面removeChild()從一個(gè)給定元素中刪除子節(jié)點(diǎn)replaceChild()把一個(gè)給定父元素里的一個(gè)子節(jié)點(diǎn)替換為另外一個(gè)節(jié)點(diǎn)
DOM通過(guò)創(chuàng)建樹(shù)來(lái)表示文檔翠霍，描述了處理網(wǎng)頁(yè)內(nèi)容的方法和接口，從而使開(kāi)發(fā)者對(duì)文檔的內(nèi)容和結(jié)構(gòu)具有空前的控制力蠢莺，用DOM API可以輕松地刪除壶运、添加和替換節(jié)點(diǎn)。
1. 訪問(wèn)節(jié)點(diǎn)
varoHtml = document.documentElement;`//返回存在于 XML 以及 HTML 文檔中的文檔根節(jié)點(diǎn)浪秘，oHtml包含了一個(gè)表示<html />的HTMLElement對(duì)象
`document.body`?//是對(duì) HTML 頁(yè)面的特殊擴(kuò)展，提供了對(duì) <body> 標(biāo)簽的直接訪問(wèn)</span><span></span></span>
`document.getElementById("ID")`//通過(guò)指定的 ID 來(lái)返回元素埠况，getElementById() 無(wú)法工作在 XML 中耸携，IE6還會(huì)返回name為指定ID的元素
`document.getElementByName("name")`//獲取所有name特性等于指定值的元素，不過(guò)在IE6和Opera7.5上還會(huì)返回id為給定名稱的元素且僅檢查<input/>和<img/>
`varx=document.getElementsByTagName("p");`//使用指定的標(biāo)簽名返回所有的元素列表NodeList辕翰，索引號(hào)從0開(kāi)始夺衍。當(dāng)參數(shù)是一個(gè)星號(hào)的時(shí)候，IE6并不返回所有的元素喜命，必須用document.all來(lái)替代
2. Node節(jié)點(diǎn)的特性和方法
1.firstChild?//Node沟沙，指向在childNodes列表中的第一個(gè)節(jié)點(diǎn)
2.lastChild?//Node，指向在childNodes列表中的最后一個(gè)節(jié)點(diǎn)
3.parentNode?//Node壁榕，指向父節(jié)
4.ownerDocument?//Document矛紫，指向這個(gè)節(jié)點(diǎn)所屬的文檔
5.firstChild?//Node，指向在childNodes列表中的第一個(gè)節(jié)點(diǎn)?
6.lastChild?//Node牌里，指向在childNodes列表中的最后一個(gè)節(jié)點(diǎn)?
7.parentNode?//Node颊咬，指向父節(jié)點(diǎn)?
8.childNodes?//NodeList，所有子節(jié)點(diǎn)的列表
9.previousSibling /Node牡辽，/指向前一個(gè)兄弟節(jié)點(diǎn)：如果這個(gè)節(jié)點(diǎn)就是第一個(gè)節(jié)點(diǎn)喳篇，那么該值為null
10.`nextSibling`?//Node，指向后一個(gè)兄弟節(jié)點(diǎn)：如果這個(gè)節(jié)點(diǎn)就是最后一個(gè)節(jié)點(diǎn)态辛，那么該值為null
11.`hasChildNodes()`?//Boolean麸澜，當(dāng)childNodes包含一個(gè)或多個(gè)節(jié)點(diǎn)時(shí)，返回真值
3.DOM事件
1.DOM同時(shí)兩種事件模型：冒泡型事件和捕獲型事件
2.冒泡型事件：事件按照從最特定的事件目標(biāo)到最不特定的事件目標(biāo)的順序觸發(fā)
3.<body οnclick="handleClick()">
??<div οnclick="handleClick()">Click Me</div>
</body>
4.觸發(fā)的順序是：div奏黑、body炊邦、html(IE 6.0和Mozilla 1.0)、document熟史、window(Mozilla 1.0)
5.捕獲型事件：與冒泡事件相反的過(guò)程铣耘，事件從最不精確的對(duì)象開(kāi)始觸發(fā)，然后到最精確
6.上面例子觸發(fā)的順序是：document以故、div
7.DOM事件模型最獨(dú)特的性質(zhì)是蜗细，文本節(jié)點(diǎn)也觸發(fā)事件(在IE中不會(huì))。
4.事件處理函數(shù)/監(jiān)聽(tīng)函數(shù)
? ??????????????????**事件處理函數(shù)/監(jiān)聽(tīng)函數(shù)**
????????????????????????在JavaScript中：
????????????????????var oDiv = document.getElementById("div1");
????????????oDiv.onclick = function(){ //onclick只能用小寫(xiě)，默認(rèn)為冒泡型事件
??????????????alert("Clicked!");
????????????}
????????????在HTML中：
????????????????<div οnclick="javascript: alert("Clicked!")"></div> //onclick大小寫(xiě)任意
IE事件處理程序attachEvent()和detachEvent()
在IE中炉媒，每個(gè)元素和window對(duì)象都有兩個(gè)方法：attachEvent()和detachEvent()踪区，這兩個(gè)方法接受兩個(gè)相同的參數(shù)，事件處理程序名稱和事件處理程序函數(shù)吊骤，如：
[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);//添加事件處理函數(shù)
oDiv.attachEvent("onclick", fnClickAnother);// 可以添加多個(gè)事件處理函數(shù)
oDiv.detachEvent("onclick", fnClick);//移除事件處理函數(shù)
在使用attachEvent()方法的情況下缎岗，事件處理程序會(huì)在全局作用域中運(yùn)行，因此this等于window白粉。
跨瀏覽器的事件處理程序
addHandler()和removeHandler()
addHandler()方法屬于一個(gè)叫EventUntil()的對(duì)象传泊，這兩個(gè)方法均接受三個(gè)相同的參數(shù)，要操作的元素鸭巴，事件名稱和事件處理程序函數(shù)眷细。
事件類型
**事件類型**
?鼠標(biāo)事件：click、dbclick鹃祖、mousedown溪椎、mouseup、mouseover恬口、mouseout校读、mousemove
?鍵盤(pán)事件：keydown、keypress祖能、keyup
?HTML事件：load歉秫、unload、abort养铸、error端考、select、change揭厚、submit却特、reset、
resize筛圆、scroll裂明、focus、blur
事件處理器
執(zhí)行JavaScript 代碼的程序在事件發(fā)生時(shí)會(huì)對(duì)事件做出響應(yīng)太援。為了響應(yīng)一個(gè)特定事件
而被執(zhí)行的代碼稱為事件處理器闽晦。
在HTML標(biāo)簽中使用事件處理器的語(yǔ)法是：
<HTML標(biāo)簽 事件處理器="JavaScript代碼''>
事件處理程序
事件就是用戶或?yàn)g覽器自身執(zhí)行的某種動(dòng)作。比如click,mouseup,keydown,mouseover等都是事件的名字提岔。而響應(yīng)某個(gè)事件的函數(shù)就叫事件處理程序（事件監(jiān)聽(tīng)器）仙蛉，事件處理程序以on開(kāi)頭，因此click的事件處理程序就是onclick
DOM 0級(jí)事件處理程序
DOM 0級(jí)事件處理程序：把一個(gè)函數(shù)賦值給一個(gè)事件的處理程序?qū)傩?/b>
<input type="button"value="按鈕2"id="ben2"/>
?????varbtn2=document.getElementById('btn2');獲得btn2按鈕對(duì)象
?????btn2.onclick?????//給btn2添加onclick屬性碱蒙，屬性又觸發(fā)了一個(gè)事件處理程序
btn2.οnclick=function(){
}???????????????????//添加匿名函數(shù)
btn2.οnclick=null//刪除onclick屬性
如何阻止冒泡荠瘪？
阻止冒泡有以下方法：
e.cancelBubble=true;
e.stopPropagation();
returnfalse;
innerText夯巷、innerHTML、outerHTML哀墓、outerText
innerText趁餐、innerHTML、outerHTML篮绰、outerTextinnerText: 表示起始標(biāo)簽和結(jié)束標(biāo)簽之間的文本innerHTML: 表示元素的所有元素和文本的HTML代碼如：<div><b>Hello</b> world</div>的innerText為Hello world后雷，innerHTML為Hello worldouterText: 與前者的區(qū)別是替換的是整個(gè)目標(biāo)節(jié)點(diǎn)，問(wèn)題返回和innerText一樣的內(nèi)容outerHTML: 與前者的區(qū)別是替換的是整個(gè)目標(biāo)節(jié)點(diǎn)吠各，返回元素完整的HTML代碼臀突，包括元素本身?
DOM 2級(jí)事件處理程序
DOM 2級(jí)事件定義了兩個(gè)方法，用于指定和刪除事件處理程序的操作贾漏。addEventListener()和removeEventListener()
addEventListener()和removeEventListener()
在DOM中候学，addEventListener()和removeEventListener()用來(lái)分配和移除事件處理函數(shù)，與IE不同的是磕瓷，這些方法需要三個(gè)參數(shù)：事件名稱，要分配的函數(shù)和處理函數(shù)是用于冒泡階段(false)還是捕獲階段(true)念逞，默認(rèn)為冒泡階段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); //添加事件處理函數(shù)
oDiv.addEventListener("onclick", fnClickAnother, false); // 與IE一樣困食，可以添加多個(gè)事件處理函數(shù)
oDiv.removeEventListener("onclick", fnClick, false); //移除事件處理函數(shù)
如果使用addEventListener()將事件處理函數(shù)加入到捕獲階段，則必須在removeEventListener()中指明是捕獲階段翎承，才能正確地將這個(gè)事件處理函數(shù)刪除
oDiv.onclick = fnClick;
oDiv.onclick = fnClickAnother; //使用直接賦值硕盹，后續(xù)的事件處理函數(shù)會(huì)覆蓋前面的處理函數(shù)
oDiv.onclick = fnClick;
oDiv.addEventListener("onclick", fnClickAnother, false); //會(huì)按順序進(jìn)行調(diào)用，不會(huì)覆蓋
更詳細(xì)的XML DOM - Element 對(duì)象的屬性和方法請(qǐng)?jiān)L問(wèn)w3cshool
BOM 部分
BOM的核心是window叨咖，而window對(duì)象又具有雙重角色瘩例，它既是通過(guò)js訪問(wèn)瀏覽器窗口的一個(gè)接口，又是一個(gè)Global（全局）對(duì)象甸各。這意味著在網(wǎng)頁(yè)中定義的任何對(duì)象垛贤，變量和函數(shù)，都以window作為其global對(duì)象趣倾。
window.close();?//關(guān)閉窗口
window.alert("message");//彈出一個(gè)具有OK按鈕的系統(tǒng)消息框聘惦，顯示指定的文本
window.confirm("Are you sure?");//彈出一個(gè)具有OK和Cancel按鈕的詢問(wèn)對(duì)話框，返回一個(gè)布爾值
window.prompt("What's your name?","Default");//提示用戶輸入信息儒恋，接受兩個(gè)參數(shù)善绎，即要顯示給用戶的文本和文本框中的默認(rèn)值，將文本框中的值作為函數(shù)值返回
window.status?//可以使?fàn)顟B(tài)欄的文本暫時(shí)改變
window.defaultStatus//默認(rèn)的狀態(tài)欄信息诫尽，可在用戶離開(kāi)當(dāng)前頁(yè)面前一直改變文本
window.setTimeout("alert('xxx')", 1000);//設(shè)置在指定的毫秒數(shù)后執(zhí)行指定的代碼禀酱，接受2個(gè)參數(shù)，要執(zhí)行的代碼和等待的毫秒數(shù)
window.clearTimeout("ID");//取消還未執(zhí)行的暫停牧嫉，將暫停ID傳遞給它
window.setInterval(function, 1000);//無(wú)限次地每隔指定的時(shí)間段重復(fù)一次指定的代碼剂跟，參數(shù)同setTimeout()一樣
window.clearInterval("ID");//取消時(shí)間間隔，將間隔ID傳遞給它
window.history.go(-1);//訪問(wèn)瀏覽器窗口的歷史，負(fù)數(shù)為后退浩聋，正數(shù)為前進(jìn)
window.history.back();//同上
window.history.forward();//同上
window.history.length//可以查看歷史中的頁(yè)面數(shù)?
基本屬性
屬性
描述
closed
返回窗口是否已被關(guān)閉观蜗。
defaultStatus
設(shè)置或返回窗口狀態(tài)欄中的默認(rèn)文本。
innerheight
返回窗口的文檔顯示區(qū)的高度衣洁。
innerwidth
返回窗口的文檔顯示區(qū)的寬度墓捻。
length
設(shè)置或返回窗口中的框架數(shù)量。
name
設(shè)置或返回窗口的名稱坊夫。
opener
返回對(duì)創(chuàng)建此窗口的窗口的引用砖第。
outerheight
返回窗口的外部高度。
outerwidth
返回窗口的外部寬度环凿。
pageXOffset
設(shè)置或返回當(dāng)前頁(yè)面相對(duì)于窗口顯示區(qū)左上角的 X 位置梧兼。
pageYOffset
設(shè)置或返回當(dāng)前頁(yè)面相對(duì)于窗口顯示區(qū)左上角的 Y 位置。
parent
返回父窗口智听。
self
返回對(duì)當(dāng)前窗口的引用羽杰。等價(jià)于 Window 屬性。
window
window 屬性等價(jià)于 self 屬性到推，它包含了對(duì)窗口自身的引用考赛。
status
設(shè)置窗口狀態(tài)欄的文本。
top
返回最頂層的先輩窗口莉测。
screenLeft
screenTop
screenX
screenY
只讀整數(shù)颜骤。聲明了窗口的左上角在屏幕上的的 x 坐標(biāo)和 y 坐標(biāo)。IE捣卤、Safari 和 Opera 支持 screenLeft 和 screenTop忍抽，而 Firefox 和 Safari 支持 screenX 和 screenY。
2）對(duì)象方法
window.close(); //關(guān)閉窗口
window.alert("message"); //彈出一個(gè)具有OK按鈕的系統(tǒng)消息框董朝，顯示指定的文本
window.confirm("Are you sure?"); //彈出一個(gè)具有OK和Cancel按鈕的詢問(wèn)對(duì)話框鸠项，返回一個(gè)布爾值
window.prompt("What's your name?", "Default"); //提示用戶輸入信息，接受兩個(gè)參數(shù)子姜，即要顯示給用戶的文本和文本框中的默認(rèn)值锈锤，將文本框中的值作為函數(shù)值返回
window.status //可以使?fàn)顟B(tài)欄的文本暫時(shí)改變
window.defaultStatus //默認(rèn)的狀態(tài)欄信息，可在用戶離開(kāi)當(dāng)前頁(yè)面前一直改變文本
window.setTimeout("alert('xxx')", 1000); //設(shè)置在指定的毫秒數(shù)后執(zhí)行指定的代碼闲询，接受2個(gè)參數(shù)久免，要執(zhí)行的代碼和等待的毫秒數(shù)
window.clearTimeout("ID"); //取消還未執(zhí)行的暫停，將暫停ID傳遞給它
window.setInterval(function, 1000); //無(wú)限次地每隔指定的時(shí)間段重復(fù)一次指定的代碼扭弧，參數(shù)同setTimeout()一樣
window.clearInterval("ID"); //取消時(shí)間間隔阎姥，將間隔ID傳遞給它
window.history.go(-1); //訪問(wèn)瀏覽器窗口的歷史，負(fù)數(shù)為后退鸽捻，正數(shù)為前進(jìn)
window.history.back(); //同上
window.history.forward(); //同上
window.history.length //可以查看歷史中的頁(yè)面數(shù) ?
clearInterval() 取消由 setInterval() 設(shè)置的 timeout呼巴。
clearTimeout() 取消由 setTimeout() 方法設(shè)置的 timeout泽腮。
createPopup() 創(chuàng)建一個(gè) pop-up 窗口。
moveBy() 可相對(duì)窗口的當(dāng)前坐標(biāo)把它移動(dòng)指定的像素衣赶。
moveTo() 把窗口的左上角移動(dòng)到一個(gè)指定的坐標(biāo)诊赊。
open() 打開(kāi)一個(gè)新的瀏覽器窗口或查找一個(gè)已命名的窗口。
print() 打印當(dāng)前窗口的內(nèi)容府瞄。
resizeBy() 按照指定的像素調(diào)整窗口的大小碧磅。
resizeTo() 把窗口的大小調(diào)整到指定的寬度和高度。
scrollBy() 按照指定的像素值來(lái)滾動(dòng)內(nèi)容遵馆。
scrollTo() 把內(nèi)容滾動(dòng)到指定的坐標(biāo)鲸郊。
setInterval() 按照指定的周期（以毫秒計(jì)）來(lái)調(diào)用函數(shù)或計(jì)算表達(dá)式。
setTimeout(方法,秒數(shù)) 在指定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(dá)式货邓。
timeOutEvent = setTimeout("longPress('" + obj + "')",1500);定時(shí)器傳參數(shù)
擴(kuò)展
① 如果文檔包含框架（frame 或 iframe 標(biāo)簽）秆撮，瀏覽器會(huì)為 HTML 文檔創(chuàng)建一個(gè) window 對(duì)象，并為每個(gè)框架創(chuàng)建一個(gè)額外的 window 對(duì)象换况。
② window.frames 返回窗口中所有命名的框架
③parent是父窗口（如果窗口是頂級(jí)窗口职辨，那么parent==self==top）
top是最頂級(jí)父窗口（有的窗口中套了好幾層frameset或者iframe）
self是當(dāng)前窗口（等價(jià)window）
opener是用open方法打開(kāi)當(dāng)前窗口的那個(gè)窗口
④與消息框有關(guān)的方法：alert(String)、confirm(String)戈二、prompt(String)
⑤兩種定時(shí)器：setTimeout(code,latency) 和 setInterval(code,period)
注：setTimeout只執(zhí)行一次code舒裤，如果要多次調(diào)用，可以讓code自身再次調(diào)用setTimeout()挽拂；setInteval()會(huì)不停地調(diào)用code惭每，直到clearInterval()被調(diào)用骨饿。
3.6 Document對(duì)象
????HtmlDocument 為 Internet Explorer 的文檔對(duì)象提供托管包裝亏栈，該文檔對(duì)象也稱為 HTML 文檔對(duì)象模型 (DOM)。您可以通過(guò) WebBrowser 控件的 Document 屬性獲取 HtmlDocument 的實(shí)例宏赘。
HTMLDocument 接口對(duì) DOM Document 接口進(jìn)行了擴(kuò)展绒北，定義 HTML 專用的屬性和方法。
HTML 文檔中的 HTML 標(biāo)記可以相互嵌套察署。因此闷游，HtmlDocument 表示一個(gè)文檔樹(shù)，其子級(jí)是 HtmlElement 類的實(shí)例贴汪。下面的代碼示例演示一個(gè)簡(jiǎn)單的 HTML 文件脐往。
HtmlDocument 表示 HTML 標(biāo)記內(nèi)的整個(gè)文檔。BODY扳埂、DIV业簿、FORM 和 SPAN 標(biāo)記各由一個(gè)單獨(dú)的 HtmlElement 對(duì)象表示。
document.body//提供對(duì) <body> 元素的直接訪問(wèn)阳懂。對(duì)于定義了框架集的文檔梅尤，該屬性引用最外層的 <frameset>柜思。
document.cookie 返回與當(dāng)前文檔有關(guān)的所有 cookie。
document.title //返回文檔標(biāo)題等價(jià)于HTML的title標(biāo)簽
document.domain 返回當(dāng)前文檔的域名巷燥。
document.URL //設(shè)置URL屬性從而在同一窗口打開(kāi)另一網(wǎng)頁(yè)
document.referrer 返回載入當(dāng)前文檔的文檔的 URL赡盘。
document.lastModified 返回文檔被最后修改的日期和時(shí)間。
2）常用對(duì)象方法
document.write() //動(dòng)態(tài)向頁(yè)面寫(xiě)入內(nèi)容
document.writeln() 等同于 write() 方法缰揪，不同的是在每個(gè)表達(dá)式之后寫(xiě)一個(gè)換行符陨享。
document.createElement(<Tag>) //用指定標(biāo)簽類型創(chuàng)建一個(gè)新的element對(duì)象)
document.getElementById(ID) //獲得指定ID值的對(duì)象
document.getElementsByName(Name) //獲得指定Name值的對(duì)象
document.getElementsByTagName() 返回帶有指定標(biāo)簽名的對(duì)象集合。
document對(duì)象
document對(duì)象：實(shí)際上是window對(duì)象的屬性邀跃，document == window.document為true霉咨，是唯一一個(gè)既屬于BOM又屬于DOM的對(duì)象
document.lastModified//獲取最后一次修改頁(yè)面的日期的字符串表示
document.referrer?//用于跟蹤用戶從哪里鏈接過(guò)來(lái)的
document.title?//獲取當(dāng)前頁(yè)面的標(biāo)題，可讀寫(xiě)
document.URL?//獲取當(dāng)前頁(yè)面的URL拍屑，可讀寫(xiě)
document.anchors[0]或document.anchors["anchName"]//訪問(wèn)頁(yè)面中所有的錨
document.forms[0]或document.forms["formName"]//訪問(wèn)頁(yè)面中所有的表單
document.images[0]或document.images["imgName"]// 訪問(wèn)頁(yè)面中所有的圖像
document.links [0]或document.links["linkName"]//訪問(wèn)頁(yè)面中所有的鏈接
document.applets [0]或document.applets["appletName"]//訪問(wèn)頁(yè)面中所有的Applet
document.embeds [0]或document.embeds["embedName"]//訪問(wèn)頁(yè)面中所有的嵌入式對(duì)象
document.write(); 或document.writeln();//將字符串插入到調(diào)用它們的位置
location對(duì)象
location對(duì)象：表示載入窗口的URL途戒，也可用window.location引用它
location.href?//當(dāng)前載入頁(yè)面的完整URL，如http://www.somewhere.com/pictures/index.htm
location.portocol?//URL中使用的協(xié)議僵驰，即雙斜杠之前的部分喷斋，如http
location.host?//服務(wù)器的名字，如www.wrox.com
location.hostname?//通常等于host蒜茴，有時(shí)會(huì)省略前面的www
location.port?//URL聲明的請(qǐng)求的端口星爪，默認(rèn)情況下，大多數(shù)URL沒(méi)有端口信息粉私，如8080
location.pathname?//URL中主機(jī)名后的部分顽腾，如/pictures/index.htm
location.search?//執(zhí)行GET請(qǐng)求的URL中的問(wèn)號(hào)后的部分，又稱查詢字符串诺核，如?param=xxxx
location.hash?//如果URL包含#抄肖，返回該符號(hào)之后的內(nèi)容，如#anchor1
location.assign("http:www.baidu.com");//同location.href窖杀，新地址都會(huì)被加到瀏覽器的歷史棧中
location.replace("http:www.baidu.com");//同assign()漓摩，但新地址不會(huì)被加到瀏覽器的歷史棧中，不能通過(guò)back和forward訪問(wèn)
location.reload(true|false);//重新載入當(dāng)前頁(yè)面入客，為false時(shí)從瀏覽器緩存中重載管毙，為true時(shí)從服務(wù)器端重載，默認(rèn)為false
navigator對(duì)象
`navigator`對(duì)象：包含大量有關(guān)Web瀏覽器的信息桌硫，在檢測(cè)瀏覽器及操作系統(tǒng)上非常有用夭咬，也可用window.navigator引用它
`navigator.appCodeName`//瀏覽器代碼名的字符串表示
navigator.appName?//官方瀏覽器名的字符串表示
navigator.appVersion//瀏覽器版本信息的字符串表示
navigator.cookieEnabled//如果啟用cookie返回true，否則返回false
navigator.javaEnabled//如果啟用java返回true铆隘，否則返回false
navigator.platform//瀏覽器所在計(jì)算機(jī)平臺(tái)的字符串表示
navigator.plugins?//安裝在瀏覽器中的插件數(shù)組
navigator.taintEnabled//如果啟用了數(shù)據(jù)污點(diǎn)返回true卓舵，否則返回false
navigator.userAgent//用戶代理頭的字符串表示?
screen對(duì)象
screen對(duì)象：用于獲取某些關(guān)于用戶屏幕的信息，也可用window.screen引用它
screen.width/height?//屏幕的寬度與高度咖驮，以像素計(jì)
screen.availWidth/availHeight//窗口可以使用的屏幕的寬度和高度边器，以像素計(jì)
screen.colorDepth?//用戶表示顏色的位數(shù)训枢，大多數(shù)系統(tǒng)采用32位
window.moveTo(0, 0);
window.resizeTo(screen.availWidth, screen.availHeight);//填充用戶的屏幕?
3.2 History對(duì)象
window.history.length //瀏覽過(guò)的頁(yè)面數(shù)
history.back() //在瀏覽歷史里后退一步
history.forward() //在瀏覽歷史里前進(jìn)一步
history.go(i) //到汗青詳細(xì)登記單的第i位
//i>0進(jìn)步,i<0撤退退卻
Document子對(duì)象HTMLElement對(duì)象詳解
HTML DOM 節(jié)點(diǎn)
在 HTML DOM （文檔對(duì)象模型）中，每個(gè)部分都是節(jié)點(diǎn)：
1.文檔本身是文檔節(jié)點(diǎn)
2.所有 HTML 元素是元素節(jié)點(diǎn)
3.所有 HTML 屬性是屬性節(jié)點(diǎn)
4.HTML 元素內(nèi)的文本是文本節(jié)點(diǎn)
5.注釋是注釋節(jié)點(diǎn)
Element 對(duì)象
在 HTML DOM 中忘巧，Element 對(duì)象表示 HTML 元素恒界。
Element 對(duì)象可以擁有類型為元素節(jié)點(diǎn)、文本節(jié)點(diǎn)砚嘴、注釋節(jié)點(diǎn)的子節(jié)點(diǎn)十酣。
NodeList 對(duì)象表示節(jié)點(diǎn)列表，比如 HTML 元素的子節(jié)點(diǎn)集合际长。
元素也可以擁有屬性耸采。屬性是屬性節(jié)點(diǎn)
獲取
document.getElementById(ID) //獲得指定ID值的對(duì)象
document.getElementsByName(Name) //獲得指定Name值的對(duì)象
getElementsByTagName() 返回帶有指定標(biāo)簽名的對(duì)象集合。
屬性和方法
方法里有a,b的參數(shù)僅僅是為了加深說(shuō)明,其他元素沒(méi)有a,b不代表是無(wú)參方法
Element.add(<class>)給元素添加指定的類
element.accessKey 設(shè)置或返回元素的快捷鍵工育。
element.appendChild() 向元素添加新的子節(jié)點(diǎn)虾宇，作為最后一個(gè)子節(jié)點(diǎn)。
element.attributes 返回元素屬性的集合如绸。
element.childNodes 返回元素子節(jié)點(diǎn)的 NodeList嘱朽。
element.className 設(shè)置或返回元素的 class 屬性。
element.clientHeight 返回元素的可見(jiàn)高度怔接。
element.clientWidth 返回元素的可見(jiàn)寬度搪泳。
element.cloneNode() 克隆元素。
element.compareDocumentPosition() 比較兩個(gè)元素的文檔位置扼脐。
element.contentEditable 設(shè)置或返回元素的文本方向岸军。
element.dir 設(shè)置或返回元素的文本方向。
element.firstChild 返回元素的首個(gè)子瓦侮。
element.getAttribute() 返回元素節(jié)點(diǎn)的指定屬性值艰赞。
element.getAttributeNode() 返回指定的屬性節(jié)點(diǎn)。
element.getElementsByTagName() 返回?fù)碛兄付?biāo)簽名的所有子元素的集合脏榆。
element.getFeature() 返回實(shí)現(xiàn)了指定特性的 API 的某個(gè)對(duì)象猖毫。
element.getUserData() 返回關(guān)聯(lián)元素上鍵的對(duì)象台谍。
Element.hidden獲取或設(shè)置hidden屬性的存在狀態(tài)
element.hasAttribute() 如果元素?fù)碛兄付▽傩孕胛梗瑒t返回true，否則返回 false趁蕊。
element.hasAttributes() 如果元素?fù)碛袑傩晕肷瑒t返回 true，否則返回 false掷伙。
element.hasChildNodes() 如果元素?fù)碛凶庸?jié)點(diǎn)是己，則返回 true，否則 false任柜。
element.id 設(shè)置或返回元素的 id卒废。
element.innerHTML 設(shè)置或返回元素的內(nèi)容沛厨。
element.insertBefore(<a>,<b>) 在指定的已有的子節(jié)點(diǎn)之前插入新節(jié)點(diǎn)。A插到b前
element.isContentEditable 設(shè)置或返回元素的內(nèi)容摔认。
element.isDefaultNamespace() 如果指定的 namespaceURI 是默認(rèn)的逆皮，則返回 true，否則返回 false参袱。
element.isEqualNode(<a>) 檢查a元素是否與當(dāng)前元素相等电谣。
element.isSameNode(a) 檢查指定元素是否就是當(dāng)前元素.
element.isSupported() 如果元素支持指定特性，則返回 true抹蚀。
element.lang 設(shè)置或返回元素的語(yǔ)言代碼剿牺。
element.lastChild 返回元素的最后一個(gè)子元素。
element.namespaceURI 返回元素的 namespace URI环壤。
element.nextSibling 返回當(dāng)前元素之后的兄弟元素
element.nodeName 返回元素的名稱晒来。
element.nodeType 返回元素的節(jié)點(diǎn)類型。
element.nodeValue 設(shè)置或返回元素值郑现。
element.normalize() 合并元素中相鄰的文本節(jié)點(diǎn)潜索，并移除空的文本節(jié)點(diǎn)。
element.offsetHeight 返回元素的高度懂酱。
element.offsetWidth 返回元素的寬度竹习。
element.offsetLeft 返回元素的水平偏移位置。
element.offsetParent 返回元素的偏移容器列牺。
element.offsetTop 返回元素的垂直偏移位置整陌。
element.ownerDocument 返回元素的根元素（文檔對(duì)象）。
element.parentNode 返回元素的父節(jié)點(diǎn)瞎领。
element.previousSibling 返回當(dāng)前元素之前的兄弟元素
Element.remove(<class>) 從元素移除指定的類
element.removeAttribute() 從元素中移除指定屬性泌辫。
element.removeAttributeNode() 移除指定的屬性節(jié)點(diǎn)，并返回被移除的節(jié)點(diǎn)九默。
element.removeChild(a) 從元素中移除子節(jié)點(diǎn)震放。
element.replaceChild(a,b) 替換元素中的子節(jié)點(diǎn)。
element.scrollHeight 返回元素的整體高度驼修。
element.scrollLeft 返回元素左邊緣與視圖之間的距離殿遂。
element.scrollTop 返回元素上邊緣與視圖之間的距離。
element.scrollWidth 返回元素的整體寬度乙各。
element.setAttribute() 把指定屬性設(shè)置或更改為指定值墨礁。
element.setAttributeNode() 設(shè)置或更改指定屬性節(jié)點(diǎn)。
element.setIdAttribute()
element.setIdAttributeNode()
element.setUserData() 把對(duì)象關(guān)聯(lián)到元素上的鍵耳峦。
element.style 設(shè)置或返回元素的 style 屬性恩静。
Element.toggle(<class>)如果類不存在就添加它存在就移除它
element.tabIndex 設(shè)置或返回元素的 tab 鍵控制次序。
element.tagName 返回元素的標(biāo)簽名蹲坷。
element.textContent 設(shè)置或返回節(jié)點(diǎn)及其后代的文本內(nèi)容驶乾。
element.title 設(shè)置或返回元素的 title 屬性邑飒。
element.toString() 把元素轉(zhuǎn)換為字符串。
nodelist.item() 返回 NodeList 中位于指定下標(biāo)的節(jié)點(diǎn)级乐。
nodelist.length 返回 NodeList 中的節(jié)點(diǎn)數(shù)幸乒。
contentWindow?屬性????如果文檔里有iframe屬性利用此屬性可以返回iframe的內(nèi)容
事件監(jiān)聽(tīng)方法單講
element.addEventListener(event,?function,?useCapture)
參數(shù)
描述
event
必須。字符串唇牧，指定事件名罕扎。
注意: 不要使用 "on" 前綴。 例如丐重，使用 "click" ,而不是使用 "onclick"腔召。
提示： 所有 HTML DOM 事件，可以查看我們完整的 HTML DOM Event 對(duì)象參考手冊(cè)扮惦。
function
必須臀蛛。指定要事件觸發(fā)時(shí)執(zhí)行的函數(shù)。
當(dāng)事件對(duì)象會(huì)作為第一個(gè)參數(shù)傳入函數(shù)崖蜜。 事件對(duì)象的類型取決于特定的事件隧熙。例如苟鸯， "click" 事件屬于 MouseEvent(鼠標(biāo)事件) 對(duì)象瘦穆。
useCapture
可選辟宗。布爾值，指定事件是否在捕獲或冒泡階段執(zhí)行等恐。
可能值:
true - 事件句柄在捕獲階段執(zhí)行
false- false- 默認(rèn)洲劣。事件句柄在冒泡階段執(zhí)行
附:DOM基本操作思維導(dǎo)圖
?
