7th week blog

BOM:

BOM提供了不少對象，用來訪問瀏覽器的功能，這些功能於網頁內容無關（這些是DOM的事），目前，BOM已經被W3C搬入了HTML5規範中。

window對象：

BOM的core，表示瀏覽器的一個實例，它既是經過javascript訪問瀏覽器窗口的一個接口，又是ECMAScript規定的Global對象，這意味着在網頁中定義的任何一個對象，變量和函數，都已window做爲其Global對象，所以有權訪問paresinInt()等方法。（摘自高程三）。此外，若是一個網頁中包含框架，則每一個框架都擁有本身的window對象，而且保存在frames集合中（索引0開始，ltr，ttb）。

首先，全局執行環境中的變量，函數都是window對象的屬型和方法。固然，全局變量與直接定義的window屬型有一點差別，全局變量（準確的說應該是顯式聲明的全局變量）沒法使用delete，而window屬性就能夠。此外，還有一個細節須要注意，嘗試訪問未聲明的變量會出錯，可是使用查詢window對象就沒有問題。

window有哪些常見的屬性或者方法

1.name，每一個window對象都有name屬性，包含框架的名稱。一般是爲了瞭解窗口關係與框架。

2.窗口位置方法:moveTo(新位置的x座標,新位置的y座標)，moveBy(水平移動x,垂直移動y)。這兩個方法不適用框架。

3.窗口大小屬性：innerWidth/Height（視圖區（減去邊框的寬度）的大小/* IE,Safari,firefox */）,outerWidth/Height(返回瀏覽器窗口的大小/*IE,Safari,firefox */).在Chrome中，inner，outer均返回視圖區的大小。

固然，能夠經過resizeTo(新窗口width,新窗口height),resizeBy(比原寬度提升x,比原高度提升y)來改變窗口大小。這戀歌方法不適用框架結構。

4.window.open(URL，窗口目標，特性字符串，新頁面是否取代瀏覽器歷史紀錄中當前加載頁面的boolean)用於導航到一個特定的url或者打開一個新的窗口。若是指定窗口目標，且窗口目標是已有的窗口或者框架的名稱，那麼就會在有更名成的窗口或者框架中加載指定的url。不然，就將打開的新窗口命名爲目標窗口。固然，窗口目標能夠指定的關鍵字有_self,_parent,_top,_blank。

5.做爲一門單線程語言，js仍然容許設置超時值（指定的事件事後執行代碼）和間歇時間值（每隔指定的時間循環一次）來調度代碼在特定的時刻執行。

超時調用:setTimeout(js代碼字符串，毫秒時間)，做爲一個單線程語言，js的任務隊列每次只能執行一段代碼，若通過設置的時間間隔事後任務隊列爲空，則執行代碼字符串，不然，要等到前面的代碼執行完成後再執行。

6.系統對話框方法：alert(),confirm(),prompt()等。

location對象

與其說是BOM中的對象，不如說Location是window對象中的一個屬性，固然，也是後面要講的DOM中document對象的屬性，也就是說,window.location和document.location引用同一個對象。

location對象屬性列表,修改這些屬性能夠加載新的頁面，且會在歷史記錄中生成新的紀錄。使用location.replace()則不會再歷史紀錄中生成新紀錄。

hash	"#contents"	返回url中的hash，沒有爲「」
host	"www.google.com"	返回服務器名和端口號（若是有）
hostname	"www.google.com"	返回不帶端口號的服務器名稱
href	"www.google.com"	返回當前頁面的完整url,調用了assign()
pathname	''/wileyCDA/'	返回目錄名稱
port	"8080"	返回端口號，沒有則返回空字符串
protocol	"http:"	返回頁面使用的協議
search	"?=javascript"	返回查詢字符串，以問號開頭

navigator對象：用於識別瀏覽器的事實標準，其屬性和方法主要用於檢測瀏覽器的類型。

其他的如history對象(保存歷史紀錄)，screen對象(代表客戶端能力)

 

DOM:

DOM是基於XML後通過擴展用於HTML的API，DOM依靠節點樹展開。　

首先須要明確一點，文檔節點是每一個節點的根節點，文檔節點有且只有一個子節點既元素html（文檔元素）。

Node類型：

DOM1中的一個接口，由DOM全部節點類型（文本節點，屬性節點，元素節點）實現，該接口在js中做爲Node類型實現。

nodeType屬性，每一個節點都擁有。由12個數值表示,element--1,attribute--2,text--3......

nodeName屬性，對於元素節點，nodeName的值爲標籤名。

nodeValue屬性,對於元素節點，nodeValue的值爲null。

節點關係：每一個節點都擁有childNodes屬性，保存NodeList（類數組對象）對象。每一個節點都擁有parentNode屬性，指向父節點。在childNodes中的節點擁有相同的parentNode。使用previousSibling和nextSibling屬性能夠訪問兄弟節點。同時childNodes[0]==firstChild,childNodes[childNodes.length-1]==lastChild.

操做節點：appendChild()，向NodeList末尾push一個節點，返回新增的節點。insertBefore()，向NodeList首部unshift一個節點，返回新增節點。replaceChild(newChild,targetChild),替換目標節點，原節點仍在文檔中，但已經沒有位置。removeChild(tragetChild)，移除節點，與replaceChild()的效果相似。cloneChild(boolean),true時表示徹底複製（整個節點與子節點）,false表示基本複製。

Document類型：

表示文檔，document對象是HTMLDDocument（繼承自Document類型）的實例，表示整個html頁面。同時,doument對象也是window對象的一個屬性，所以能夠做爲全局對象訪問。document.firstChild==html. document.body==body. document.doctype--->對<!DOCTYPE>的引用。doucment.title--->title  document.url--->location.url.

查找元素：getElementById(),getElementsByTagName(),getElementsByClassName().

文檔寫入：write(),writeln(),open(),close()

Element類型:

getAttribute(),獲取特性 對於class，則使用「class」,而不是className，在使用element.className時能夠獲取class特性。

setAttribute()，設置特性，若特性存在，則替換。不然，建立。

removeAttribute()，完全刪除元素特性。

createElement()，建立新元素。

Text類型:

createTextNode()，建立文本節點，若是連個文本節點是相鄰同胞節點，則這個兩個文本會鏈接起來，沒有空格。

 

 

DOM 是爲了操做文檔出現的 API，document 是其的一個對象；
BOM 是爲了操做瀏覽器出現的 API，window 是其的一個對象。

BOM是瀏覽器對象模型，DOM是文檔對象模型，前者是對瀏覽器自己進行操做，然後者是對瀏覽器（可當作容器）內的內容進行操做。

DOM：即document，包括index.html，css等文件，部署在服務器上，能夠經過瀏覽器的地址欄輸入URL而後回車將這個document加載到本地，瀏覽，右鍵查看源代碼等。

BOM：

（1）瀏覽器的標籤頁，地址欄，搜索欄，書籤欄，窗口放大還原關閉按鈕，菜單欄等等

（2）瀏覽器的右鍵菜單

（3）document加載時的狀態欄，顯示http狀態碼等

（4）滾動條scroll bar

 

DOM 全稱是 Document Object Model，也就是文檔對象模型。是針對XML的基於樹的API。描述了處理網頁內容的方法和接口，是HTML和XML的API，DOM把整個頁面規劃成由節點層級構成的文檔。

這個DOM定義了一個HTMLDocument和HTMLElement作爲這種實現的基礎,就是說爲了能以編程的方法操做這個 HTML 的內容（好比添加某些元素、修改元素的內容、刪除某些元素），咱們把這個 HTML 看作一個對象樹（DOM樹），它自己和裏面的全部東西好比 <div></div> 這些標籤都看作一個對象，每一個對象都叫作一個節點（node），節點能夠理解爲 DOM 中全部 Object 的父類。   

DOM 有什麼用？就是爲了操做 HTML 中的元素，好比說咱們要經過 JS 把這個網頁的標題改了，直接這樣就能夠了：document.title = 'how to make love';這個 API 使得在網頁被下載到瀏覽器以後改變網頁的內容成爲可能。

 

BOM 是 Browser Object Model，瀏覽器對象模型。

DOM 是爲了操做文檔出現的接口，那 BOM 顧名思義其實就是爲了控制瀏覽器的行爲而出現的接口。瀏覽器能夠作什麼呢？好比跳轉到另外一個頁面、前進、後退等等，程序還可能須要獲取屏幕的大小之類的參數。因此 BOM 就是爲了解決這些事情出現的接口。好比咱們要讓瀏覽器跳轉到另外一個頁面，只須要location.href = "http://www.xxxx.com";這個 location 就是 BOM 裏的一個對象。 因爲BOM的window包含了document，所以能夠直接使用window對象的document屬性，經過document屬性就能夠訪問、檢索、修改XHTML文檔內容與結構。由於document對象又是DOM（Document Object Model）模型的根節點。能夠說，BOM包含了DOM(對象)，瀏覽器提供出來給予訪問的是BOM對象，從BOM對象再訪問到DOM對象，從而js能夠操做瀏覽器以及瀏覽器讀取到的文檔。