7th week blog
DOM：
文件對象模型（DocumentObjectModel，簡稱DOM），是W3C組織推薦的處理可擴展置標語言的標準編程接口。DocumentObjectModel的歷史可以追溯至1990年代後期微軟與Netscape的“瀏覽器大戰”，雙方為了在JavaScript與JScript一決生死，於是大規模的賦予瀏覽器強大的功能。微軟在網頁技術上加入了不少專屬事物，計有VBScript、ActiveX、以及微軟自家的DHTML格式等，使不少網頁使用非微軟平臺及瀏覽器無法正常顯示。DOM即是當時蘊釀出來的傑作。
方法：
|
getElementById(id) |
Node |
返回指定結點的引用 |
|
getElementsByTagName(name) |
NodeList |
返回文檔中所有匹配的元素的集合 |
|
createElement(name) |
Node |
Node |
|
createTextNode(text) |
Node |
創建一個純文本結點 |
|
ownerDocument |
Document |
指向這個節點所屬的文檔 |
|
documentElement |
Node |
返回html節點 |
|
document.body |
Node |
返回body節點 |
|
element方法： |
||
|
getAttribute(attributeName) |
String |
返回指定屬性的值 |
|
setAttribute(attributeName,value) |
String |
給屬性賦值 |
|
removeAttribute(attributeName) |
String |
移除指定屬性和它的值 |
|
getElementsByTagName(name) |
NodeList |
返回結點內所有匹配的元素的集合 |
|
node方法： |
||
|
appendChild(child) |
Node |
給指定結點添加一個新的子結點 |
|
removeChild(child) |
Node |
移除指定結點的子結點 |
|
replaceChild(newChild,oldChild) |
Node |
替換指定結點的子結點 |
|
insertBefore(newChild,refChild) |
Node |
在同一層級的結點前面插入新結點 |
|
hasChildNodes() |
Boolean |
如果結點有子結點則返回true |
|
node屬性： |
||
|
nodeName |
String |
以字符串的格式存放結點的名稱 |
|
nodeType |
String |
以整型數據格式存放結點的類型 |
|
nodeValue |
String |
以可用的格式存放結點的值 |
|
parentNode |
Node |
指向結點的父結點的引用 |
|
childNodes |
NodeList |
指向子結點的引用的集合 |
|
firstChild |
Node |
指向子結點結合中的第一個子結點的引用 |
|
lastChild |
Node |
指向子結點結合中的最後一個子結點的引用 |
|
previousSibling |
Node |
指向前一個兄弟節點；如果這個節點就是兄弟節點，那麽該值為null |
|
nextSibling |
Node |
指向後一個兄弟節點；如果這個節點就是兄弟節點，那麽該值為null |
內容：
DOM= Document Object Model，文檔對象模型，DOM可以以一種獨立於平臺和語言的方式訪問和修改一個文檔的內容和結構。換句話說，這是表示和處理一個HTML或XML文檔的常用方法。有一點很重要，DOM的設計是以對象管理組織（OMG）的規約為基礎的，因此可以用於任何編程語言。最初人們把它認為是一種讓JavaScript在瀏覽器間可移植的方法，不過DOM的應用已經遠遠超出這個範圍。Dom技術使得用戶頁面可以動態地變化，如可以動態地顯示或隱藏一個元素，改變它們的屬性，增加一個元素等，Dom技術使得頁面的交互性大大地增強。 [1]
DOM實際上是以面向對象方式描述的文檔模型。DOM定義了表示和修改文檔所需的對象、這些對象的行為和屬性以及這些對象之間的關系。可以把DOM認為是頁面上數據和結構的一個樹形表示，不過頁面當然可能並不是以這種樹的方式具體實現。
通過 JavaScript，您可以重構整個 HTML 文檔。您可以添加、移除、改變或重排頁面上的項目。
應用：
DOM把一份文檔（以HTML為例）表示為一棵樹。如下圖所示：
在DOM中，文檔是由節點構成的集合，而節點又分為不同的類型。元素(element)節點，文本(text)節點，屬性(attribute)節點。
元素節點：如上圖中的<html>,<head>,<body>,<title>等，即html中的標簽。其中<html>是<head>的父節點，<title>是<head>的子
節點，<body>是<head>的兄弟節點。
文本節點：如上圖中的"My title"、"My link"等。
屬性節點：如上圖中的"href"，以及我們在html中經常使用的"class"、"title"等。
DOM就是為了操作HTML中的元素。
BOM：
BOM(Browser Object Mode) 是指瀏覽器對象模型，是用於描述這種對象與對象之間層次關系的模型，瀏覽器對象模型提供了獨立於內容的、可以與瀏覽器窗口進行互動的對象結構。BOM由多個對象組成，其中代表瀏覽器窗口的Window對象是BOM的頂層對象，其他對象都是該對象的子對象。
方法：
moveBy(x,y)——從當前位置水平移動窗體x個像素，垂直移動窗體y個像素，x為負數，將向左移動窗體，y為負數，將向上移動窗體
moveTo(x,y)——移動窗體左上角到相對於屏幕左上角的(x,y)點，當使用負數做為參數時會吧窗體移出屏幕的可視區域
resizeBy(w,h)——相對窗體當前的大小，寬度調整w個像素，高度調整h個像素。如果參數為負值，將縮小窗體，反之擴大窗體
resizeTo(w,h)——把窗體寬度調整為w個像素，高度調整為h個像素
窗體滾動軸控制
scrollTo(x,y)——在窗體中如果有滾動條，將橫向滾動條移動到相對於窗體寬度為x個像素的位置，將縱向滾動條移動到相對於窗體高度為y個像素的位置
scrollBy(x,y)—— 如果有滾動條，將橫向滾動條移動到相對於當前橫向滾動條的x個像素的位置(就是向左移動x像素)，將縱向滾動條移動到相對於當前縱向滾動條高度為y個像素的位置(就是向下移動y像素)
窗體焦點控制
focus()—— 使窗體或控件獲取焦點
blur()——與focus函數相反，使窗體或控件失去焦點
新建窗體
open()——打開(彈出)一個新的窗體
close()——關閉窗體
opener屬性——新建窗體中對父窗體的引用，中文"開啟者"的意思
back() 加載 history 列表中的前一個 URL
forward() 加載 history 列表中的下一個 URL
go(num) 加載 history 列表中的某個具體頁面
assign() 加載新的文檔,這與直接將一個URL賦值給Location對象的href屬性效果是一樣的
reload() 重新加載當前文檔，如果該方法沒有規定參數，或者參數是 false，它就會用 HTTP 頭 If-Modified-Since 來檢測服務器上的文檔是否已改變。如果文檔已改變，reload() 會再次下載該文檔。如果文檔未改變，則該方法將從緩存中裝載文檔。這與用戶單擊瀏覽器的刷新按鈕的效果是完全一樣的。如果把該方法的參數設置為 true，那麽無論文檔的最後修改日期是什麽，它都會繞過緩存，從服務器上重新下載該文檔。這與用戶在單擊瀏覽器的刷新按鈕時按住 Shift 健的效果是完全一樣。
replace() 用新的文檔替換當前文檔，replace() 方法不會在 History 對象中生成一個新的紀錄。當使用該方法時，新的 URL 將覆蓋 History 對象中的當前紀錄。
內容：
BOM由多個對象組成，其中代表瀏覽器窗口的Window對象是BOM的頂層對象，其他對象都是該對象的子對象。
應用：
1. 彈出新的瀏覽器窗口、移動、關閉瀏覽器窗口及調整窗口大小；
2. 提供WEB瀏覽器詳細信息的導航對象；
3. 提供裝載到瀏覽器中頁面的詳細信息的定位對象；
4. 提供用戶屏幕分辯率詳細信息的屏幕對象；
5. 對cookie的支持。
7th week blog