web第七周作業
關於DOM & BOM概念的起源（source），方法（methods），內容（contents），應用（application）
DOM（起源）：文件對象模型（DocumentObjectModel，簡稱DOM），是W3C組織推薦的處理可擴展置標語言的標準編程接口。DocumentObjectModel的歷史可以追溯至1990年代後期微軟與Netscape的“瀏覽器大戰”，雙方為了在JavaScript與JScript一決生死，於是大規模的賦予瀏覽器強大的功能。微軟在網頁技術上加入了不少專屬事物，計有VBScript、ActiveX、以及微軟自家的DHTML格式等，使不少網頁使用非微軟平臺及瀏覽器無法正常顯示。DOM即是當時蘊釀出來的傑作。
DOM（方法）：DOM可以以一種獨立於平臺和語言的方式訪問和修改一個文檔的內容和結構。換句話說，這是表示和處理一個HTML或XML文檔的常用方法。有一點很重要，DOM的設計是以對象管理組織（OMG）的規約為基礎的，因此可以用於任何編程語言。Dom技術使得用戶頁面可以動態地變化，如可以動態地顯示或隱藏一個元素，改變它們的屬性，增加一個元素等，Dom技術使得頁面的交互性大大地增強。它實際上是以面向對象方式描述的文檔模型。DOM定義了表示和修改文檔所需的對象、這些對象的行為和屬性以及這些對象之間的關系。可以把DOM認為是頁面上數據和結構的一個樹形表示，不過頁面當然可能並不是以這種樹的方式具體實現。通過JavaScript，可以重構整個HTML文檔。可以添加、移除、改變或重排頁面上的項目。要改變頁面的某個東西，JavaScript就需要獲得對HTML文檔中所有元素進行訪問的入口。這個入口，連同對HTML元素進行添加、移動、改變或移除的方法和屬性，都是通過文檔對象模型來獲得的（DOM）。
使用選擇器定位DOM元素：選擇器API提供了一些方法，通過匹配一組選擇器，快速可以輕松地從DOM中檢索節點。這比過去的技術要快得多，例如，有必要在JavaScript的代碼中使用循環來定位您需要查找的特定項目。Element.
1.NodeSelector接口：本規範增加了兩個新的方法，以任何對象實現，或接口：DocumentDocumentFragmentElement
querySelector報道查看節點子樹中的第一個匹配節點。如果未找到匹配的節點，則返回。Elementnull
querySelectorAll報道查看所有遊戲節點子樹中所有匹配節點的節點，如果未找到匹配項則報道查看空節點。NodeList
ElementNodeList
選擇器API提供了一些方法，通過匹配一組選擇器，快速可以輕松地從DOM中檢索節點。這比過去的技術要快得多，例如，有必要在JavaScript的代碼中使用循環來定位您需要查找的特定項目
2.選擇：選擇器方法接受一個或多個逗號分隔的選擇器以確定應返回哪個或哪些元素。例如，選擇所有段落（p），其CSS類或者是一個文檔中的元素warning或者note.
DOM（內容）：DOM是W3C的標準。DOM定義了訪問HTML和XML文檔的標準："W3C文檔對象模型（DOM）是中立於平臺和語言的接口，它允許程序和腳本動態地訪問和更新文檔的內容、結構和樣式。
分級：根據W3CDOM規範，DOM是HTML與XML的應用編程接口（API），DOM將整個頁面映射為一個由層次節點組成的文件。有1級、2級、3級共3個級別。1級DOM：1級DOM在1998年10月份成為W3C的提議，由DOM核心與DOMHTML兩個模塊組成。DOM核心能映射以XML為基礎的文檔結構，允許獲取和操作文檔的任意部分。DOMHTML通過添加HTML專用的對象與函數對DOM核心進行了擴展。
2級DOM：鑒於1級DOM僅以映射文檔結構為目標，DOM2級面向更為寬廣。通過對原有DOM的擴展，2級DOM通過對象接口增加了對鼠標和用戶界面事件、範圍、遍歷和層疊樣式表（CSS）的支持。同時也對DOM1的核心進行了擴展，從而可支持XML命名空間。
2級DOM引進了幾個新DOM模塊來處理新的接口類型：DOM視圖：描述跟蹤一個文檔的各種視圖（使用CSS樣式設計文檔前後）的接口；DOM事件：描述事件接口；DOM樣式：描述處理基於CSS樣式的接口；DOM遍歷與範圍：描述遍歷和操作文檔樹的接口；3級DOM：3級DOM通過引入統一方式載入和保存文檔和文檔驗證方法對DOM進行進一步擴展，DOM3包含一個名為“DOM載入與保存”的新模塊，DOM核心擴展後可支持XML1.0的所有內容，包擴XMLInfoset、XPath、和XMLBase。
節點：根據DOM，HTML文檔中的每個成分都是一個節點。DOM是這樣規定的：整個文檔是一個文檔節點。每個HTML標簽是一個元素節點。包含在HTML元素中的文本是文本節點。每一個HTML屬性是一個屬性節點。註釋屬於註釋節點。
Node 層次：節點彼此都有等級關系。HTML文檔中的所有節點組成了一個文檔樹（或節點樹）。HTML文檔中的每個元素、屬性、文本等都代表著樹中的一個節點。樹起始於文檔節點，並由此繼續伸出枝條，直到處於這棵樹最低級別的所有文本節點為止。 DOM（應用）：註冊事件監聽器：有三種方法可以為DOM元素註冊事件處理程序。
訪問事件接口：事件處理程序可以附加到各種對象，包括DOM元素，文檔，窗口顯示對象等。當事件發生時，創建事件對象並將其順序傳遞給事件偵聽器。Event通過可以第作為一個參數傳遞的事件對象從處理函數中訪問該接口。以下簡單示例顯示了如何將事件對象傳遞給事件處理函數，並且可以在一個此類函數中使用。
BOM（起源）：BOM(Browser Object Mode) 是指瀏覽器對象模型，是用於描述這種對象與對象之間層次關系的模型，瀏覽器對象模型提供了獨立於內容的、可以與瀏覽器窗口進行互動的對象結構。BOM由多個對象組成，其中代表瀏覽器窗口的Window對象是BOM的頂層對象，其他對象都是該對象的子對象。
BOM（方法）：1. 窗口操作：
moveBy(dx,dy)：把瀏覽器窗口相對當前位置水平移動x個像素，垂直移動y個像素。
moveTo(x,y)：移動瀏覽器窗口，使它們的左上角位於用戶屏幕的（x，y）處。
resizeBy(dw,dh)：相對於瀏覽器窗口的當前大小，把它的寬度調整x個像素，高度調整y個像素。
resizeTo(w,h)：把窗口的寬度調整為x，高度調整為y。不能為負數。
★IE提供了window.screenLeft和window.screenTop對象來判斷窗口的位置。document.body.offsetWidth和document.body.offsetHeight屬性可獲取視口大小。
★Mozilla提供了window.screenX和window.screenY屬性判斷窗口的位置;windows.innerWidth和windows.innerHeight屬性來判斷視口的大小;window.outerWidth和window.outerHeight屬性判斷瀏覽器窗口自身的大小。
2. 導航和打開新窗口：
打開新窗口：window.open("新窗口的URL","名字","特性字符串");
各種設置：
Left：窗口的左坐標,不能為負數；
Top：窗口的上坐標,不能為負數；
Height：窗口的高度,不能小於100；
Width：窗口的寬度,不能小於100；
Resizable：判斷窗體是否能拖動,默認為no；
Scrollable：判斷窗體不要顯示內容時是否滾動，默認為no；
Toolbar：判斷是否顯示工具欄，默認為no；
Status：判斷是否顯示狀態欄，默認為no；
location：斷是否顯示地址欄，默認為no。
關閉自身窗體：window.close（）；
3. 系統對話框：
警告框：alert("XXX");
確認框：confirm("XXX");
輸入框：prompt("‘XXX")
4．狀態欄
window.defaultStatus=”XXXXXX”
wingdow.status=”XXXXXX”
5. 時間間隔和暫停：
setTimeout();等待XX毫秒後執行.
clearTimeout();取消
setInterval(); 等待XX毫秒後執行
clearInterval();取消
6. 歷史：
後退一頁：window.history.go(-1);或history.back()
前進一頁：window.history.go(1); 或history.forward()
二、document對象：
document對象的一些通用屬性：
1. lastModified：最後修改的日期，是字符串；
2. referrer：瀏覽器歷史中後退一個位置的URL；
3. title：標簽中顯示文本；
4.URL：當前載入的頁面的URL。
改變框架標題：top.document.title=”新的頁面標題”；
如把窗口導航到新頁面：
document.URL = "http://www.baidu.com";
BOM（內容）： 在JavaScript中對象之間並不是獨立存在的，對象與對象之間有著層次關系。如Document對象是Window對象的子對象，Window對象是Document對象，它表示整個瀏覽器窗口。 BOM並不是W3C中的標準，因此，不同的瀏覽器所支持的BOM中的對象、對象的屬性和方法都有可能不同。Document對象下有很多子對象，因此Document對象是一個十分重要的對象。事實上，大多數瀏覽器都支持Document對象。在W3C正式定義DOM之前，BOM中的Document分支就已經被眾多瀏覽器支持。DOM被正式定義之後，分為了三個層次，分別為1級DOM（DOM Level 1）、2級DOM（DOM Level 2）和3級DOM（DOM Level 3）。而BOM中的Document分支被稱為0級DOM（DOM Level 0），因為該分支定義了文檔功能的基本功能。Document對象：該對象代表瀏覽器窗口中所加載的文檔。使用Document對象可以操作文檔中的內容。在整個BOM中，只有Document對象是與HTML文檔的內容相關的。
Frames數組：該數組代表瀏覽器窗口中的框架。HTML中允許將一個瀏覽器窗口分為多個框架，每個框架中可以加載一個HTML文檔。在這種框架頁中，每一個框架都是Frames數組中的一個元素。而Frames數組中的每一個元素都是一個Window對象。
History對象：該對象代表當前瀏覽器窗口的瀏覽歷史。通過該對象可以將當前瀏覽器窗口中的文檔前進或後退到某一個已經訪問過的URL（統一資源定位符）。
Location對象：該對象代表當前文檔的URL。URL分為幾個部分，如協議部分、主機部分、端口部分等。使用Location對象可以分別獲得這些部分，並且可以通過修改這些部分的值來加載一個新文檔。
Navigator對象：該對象是瀏覽器對象，代表了瀏覽器的信息。該對象與Window對象不同，Window對象可以用於控制瀏覽器窗口的一些屬性，如瀏覽器窗口大小、位置等。而Navigator對象包含的是瀏覽器的信息，如瀏覽器的名稱、版本號等。
Screen對象：該對象代表當前顯示器的信息。使用Screen對象可以獲得用戶顯示器的分辨率、可用顏色數量等信息。
Document對象代表HTML文檔，而HTML文檔中包括了有很多元素，BOM也將這些元素看成了不同的對象。
Anchors數組：該數組代表了文檔中的所有錨。數組中的每一個元素都是一個錨對象。每一個錨對象都對應著HTML文檔中的一個包含name屬性的標簽，通過錨對象可以獲得錨的命名，以及超鏈接中的文字。
Applets數組：該數組代表了嵌在網頁中的所有小程序。數組中的每一個元素都是一個Applet對象，通過Applet對象可以獲得Java小程序的公有字段。
Embeds數組：與Applets類似，但建議使用Embeds數組。
BOM體系結構Forms數組：該數組代表文檔中的所有表單。數組中的每一個元素都是一個Form對象。每一個Form對象都對應著HTML文檔中的一個<form>標簽。通過Form對象可以獲得表單中的各種信息，也可以提交或重置表單。由於表單中還包括了很多表單元素，因此，Form對象的子對象還可以對這些表單元素進行引用，以完成更具體的應用。
Images數組：該數組代表文檔中的所有圖片。數組中的每一個元素都是一個Image對象。每一個Image對象都對應著HTML文檔中的一個<img>標簽。通過Image對象可以獲得圖片的各種信息。
Links數組：該數組代表文檔中的所有超鏈接。數組中的每一個元素都是一個Link對象。每一個Link對象都對應著HTML文檔中的一個包含href屬性的<a>標簽，通過Link對象可以獲得超鏈接中URL的各部分信息。
Location對象：該對象與Window對象中的Location對象完全相同。由於該對象與HTML文檔並沒有太大關系，因此，該對象是反對使用的對象，建議使用Window對象的Location子對象。
BOM（應用）：BOM是browser object model的縮寫，簡稱瀏覽器對象模型，它的作用有：
1. 彈出新的瀏覽器窗口、移動、關閉瀏覽器窗口及調整窗口大小；
2. 提供WEB瀏覽器詳細信息的導航對象；
3. 提供裝載到瀏覽器中頁面的詳細信息的定位對象；
4. 提供用戶屏幕分辯率詳細信息的屏幕對象；
5. 對cookie的支持
web第七周作業