我們知道，一個完整的JavaScript的實現，需要由三部分組成：ECMAScript(核心),BOM(浏覽器對象模型)，DOM(文檔對象模型)。
今天主要學習BOM和DOM。
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。
<a href=http://www.jb51.net>click me</a>
<script>
var link=document.getElementsByTagName("a")[0];
alert(link.nodeName);
window.onload=function(){
link.onclick=function () {
window.open(link.href,"good","width=400px,height=300px");
return false;
}
}
</script
此處特性字符串的具體設置不再贅述，有興趣的可以點擊此處
5.作為一門單線程語言，js仍然允許設置超時值（指定的事件過後執行代碼）和間歇時間值（每隔指定的時間循環一次）來調度代碼在特定的時刻執行。
超時調用:setTimeout(js代碼字符串，毫秒時間)，作為一個單線程語言，js的任務隊列每次只能執行一段代碼，若經過設置的時間間隔過後任務隊列為空，則執行代碼字符串，否則，要等到前面的代碼執行完成後再執行。
var al=setTimeout(function () {
alert("good");
},5000);
alert(al); //2
此處,我在5秒後調用了一個匿名函數輸出good,窗口先彈出一個警示框顯示2，可見setTimeout()函數返回的是一個數值ID，具有唯一性，那麼我們就可以通過這個ID來清除超時調用，可以使用clearTimeout(ID)來清除。
間接調用:setInterval(),他接受的參數與setTimeout()相同，同樣返回一個數值ID，使用clearTimeout()清除。
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對象(表明客戶端能力)，由於在js中編程作用不大，便不再贅述。
------------------------------------------------------------------------------
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()，創建文本節點，如果連個文本節點是相鄰同胞節點，則這個兩個文本會連接起來，沒有空格。
以上這篇實現JavaScript的組成----BOM和DOM詳解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持。