DOM技術
DOM概述
DOM：Document Object Model（文檔對象模型）（DOM核心就是 文檔變對象，標簽也變對象，屬性也變對象，反正就是把標記文檔拆散）
用來將標記型對象封裝成對象，並將標記型文檔中的所有內容（標簽，文本，屬性）都封裝成對象。
封裝成對象的目的是為了方便操作這些文檔和文檔中的內容，方便動態（增刪改查）。
文檔：標記型文檔
對象：封裝了屬性和行為的實例
模型：所有標記型文檔都具備的一些共性特征的一個體現
只要是標記型文檔，DOM技術都可以進行操作。
常見的標記型文檔：html xml
DOM這種技術如何對標記型文檔進行操作的？
首先對標記型文檔進行解析。
DOM解析方式
將標記型文檔解析成一個DOM樹，並將樹中的內容封裝成節點對象
在瀏覽器中，DOM解析將按照標簽的層次關系體現出標簽的所屬，形成一個樹狀結構，稱為DOM樹。
DOM解析由瀏覽器自動完成，解析之後，生成一個document對象，並將它加載進內存。
比如下面這個html文檔和相應的DOM樹，整個HTML文檔被封裝成一個document對象。
<html> <head> <title>這是演示文檔</title> </head> <body> <div>div區域</div> <dl> <dt>上層項目</dt> <dd>下層項目</dd> </dl> <table> <tbody> <tr> <th>表頭</th> <td>單元格</td> </tr> </tbody> </table> <form> <input type="text"/> </form> </body> </html>
DOM樹：
樹中的標簽，文本，和屬性稱為節點，也稱為對象。標簽也稱為頁面中的元素。亂
理解：html標簽是靜態的，全是死的，沒有辦法對其中的某個標簽進行操作的，現在通過DOM技術把標簽，文本，屬性全部單個拿出來，那麽文檔就可以對每個元素進行操作
DOM技術把文檔文檔中的元素全變成對象，這樣才能挨個的動態操作。
DOM解析方式的好處：可以對樹中的節點進行任意操作，比如：增刪改查。
弊端：這種解析方式需要將真個標記型文檔加載進內存，意味著如果標記型文檔的體積很大，浪費較大內存空間。
SAX解析方式
是由一些組織定義的民間常用的解析方式，並不是w3c標準，而DOM是w3c的標準。
SAX解析方式：是基於事件驅動的解析。
這種解析方式，並不將整個文檔一次性讀取，按照每一個標簽進行解析，讀到一個標簽的開頭，相當於處罰一個事件，然後對標簽內容進行解析，然後讀取到結束標簽，這個解析就完成了。
這種解析方式獲取數據速度很快（查），但是不能對標記進行增刪改的動作。根據需求來靈活選擇。
DOM的三級模型
DOM level 1：將html文檔封裝成對象。
DOM level 2：在level 1 基礎上加入新功能，比如解析名稱空間（html標簽中的xmln屬性代表命名空間，這個名字必須唯一，一般用網站的域名來作為命名空間，）
DOM level 3：將xml文檔封裝成對象。
這三種就完成了對常見的標記文檔的解析
DOM是一種底層的技術，各個語言都對外提供了DOM的解析工具，java中的dom4j，jaxp（java內置）
同樣Javascript也有相應的解析工具，在前端中，用Javascript進行解析。
DHTML概述
動態的HTML，不是一門語言，是多項技術綜合體的簡稱
html+css只是一個靜態頁面，加入Javascript和DOM之後，就動起來了。
這四個技術在動態html頁面效果定義時，都屬於什麽角色呢，負責什麽職責呢？
HTML：負責提供標簽，對數據進行封裝，目的是便於對該標簽中的數據進行操作。（用標簽封裝數據）
CSS：負責提供樣式屬性，對標簽中的數據進行樣式的定義。（對數據進行樣式定義）
DOM：負責將標記型文檔以及文檔中的所有內容進行解析，並封裝成對象，在對象中定義了更多的屬性和行為，便於對對象操作。
Javascript：負責提供程序設計語言，對頁面中的對象進行邏輯操作。比如想添加十個節點，就用循環，不然要挨個添加，甚是麻煩！（負責頁面行為，就是頁面動態效果）
綜上所述：Javascript是動態效果的主力編程語言。
DHTML+XMLhttpRequest = AJAX
BOM模型
Browser Object Model（瀏覽器對象模型）
DOM為了方便操作文檔，BOM為了方便操作瀏覽器。
bom中有一些對象，這些對象可以直接在javascript代碼中使用，用來獲取相應的信息。
widow對象
瀏覽器對應的對象就是window對象
註意：只要打開瀏覽器，window對象就在內存中，可以在javascript中直接使用，其實由於window對象是默認存在的，所以window對象可以缺省
appName，history，navigator等屬性。
一些常用方法：
alert();彈窗
confirm();彈出一個是否選擇窗口，根據不同的選擇，該函數返回是或否，通過對該返回值的判定，進而選擇執行不同的操作。（if操作）
focus();獲取焦點。
setTimeout(js語句,毫秒值);超過毫秒值就執行js語句。類似於單片機的中斷？函數返回一個整數，用來區分多個計時，將該值放到clearTimeout中可以取消該計時
setInterval(js語句,毫秒值);每隔毫秒值執行一次。函數返回一個整數，用來區分多個計時，將該值放到clearInterval中可以取消該計時
clearTimeout();
clearInterval();
moveBy(橫坐標偏移量,縱坐標偏移量);當前瀏覽器窗口按照偏移量移動。
moveTo(橫坐標,縱坐標);直接移動到指定坐標點。
open("網址","打開方式","height=100,width=100,status=yes,toolbar=yes,menubar=yes,location=yes");打開方式：新窗口(_blank)，有狀態欄，有工具欄，有菜單欄，有地址欄
close();關閉窗口，必須是自己通過代碼新打開的窗口才能通過close來關閉。
常見事件：
直接指向一個函數即可，事件觸發時，就會執行函數。
onload=function(){
code...
}
onload：當窗口中的所有動作完成後，立刻觸發，網頁內容加載完後執行。
unbeforeunload：點擊關閉瀏覽器窗口，關閉之前會執行。
onunload：點擊關閉瀏覽器窗口，瀏覽器關閉之後調用。
屬性：
status：屬性中的值就會顯示在狀態欄。
彈窗廣告：
location對象
和java中的url對象類似，location中的屬性可以獲取，也可以賦值，相當於一個變量。
location.protocol：獲取地址欄中的協議
location.href：可以對該變量賦值，這會改變地址欄的值並進行解析，如果解析是http協議，就會對鏈接進行訪問。
location.pathname：路徑名
DOM操作
DOM技術