怎么理解JavaScript中的BOM和DOM

本篇內(nèi)容主要講解“怎么理解JavaScript中的BOM和DOM”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“怎么理解JavaScript中的BOM和DOM”吧!

JavaScript使用心得之BOM和DOM

自從netscape navigator2.0把js引入到瀏覽器中，js可謂與瀏覽器接下了不解之緣，而js在瀏覽器中執(zhí)行的速度，也是現(xiàn)在各種各樣的瀏覽器展示其牛*的主要指標(biāo)之一。那BOM和DOM到底是什么類？

BOM：Browser Object Model，是瀏覽器相關(guān)的一組特性，由于和瀏覽器相關(guān)，那一定沒有統(tǒng)一的標(biāo)準(zhǔn)了，原因是，有ms了......，不過慶幸的是，還是有一些事實(shí)標(biāo)準(zhǔn)的。

DOM：Document Object Model，這個(gè)就是標(biāo)準(zhǔn)了，由著名的w3c制定，目前***的級(jí)別是level 3，不過3還沒有徹底完成，目前主流的瀏覽器都可以支持到（僅僅是支持到哦，并不是完全遵守的）level 2，對(duì)html，也就是html4.x，目前***的是4.01，后來w3c向把html統(tǒng)一向xml靠攏，于是就有了xhtml1.0，再后來，w3c想搞一個(gè)xhtml2.0，結(jié)果進(jìn)度緩慢，加之各大廠商又不看好，于是就有了html5.0 （很牛的東東，有待嘗試哦）。

對(duì)規(guī)范有興趣可以瀏覽維基上的一篇文章。

JavaScript使用心得之BOM描述

好了，BOM和DOM的歷史就先說到這里了，搞點(diǎn)實(shí)質(zhì)性的東東，先說一下BOM的體系結(jié)構(gòu)：

先從window說起，對(duì)于window，最簡(jiǎn)單的一句就是它是表示打開頁(yè)面的瀏覽器窗口，并不包含頁(yè)面的內(nèi)容。請(qǐng)牢記后一句話，我在最開始的時(shí)候，就用它訪問過頁(yè)面的內(nèi)容，結(jié)果當(dāng)然是訪問不到了。

既然是表示瀏覽器的窗口，那就一定包含：

◆新建窗口（window.open()），

◆關(guān)閉窗口(window.close())，

◆改變窗口位置(resizeBy(),resizeTo())，

◆移動(dòng)窗口（moveBy(),moveTo），

還有一些其固有的特性，比如：

◆打開新的連接，并可以指定打開方式

◆彈出系統(tǒng)對(duì)話框(alert(),confirm(),prompt())，

◆設(shè)置超時(shí)與暫停（setTimeout(),setInterval())，

◆狀態(tài)欄，

前面的那些操作使用的時(shí)候可以查閱文檔，當(dāng)然能記住更好。不過要注意不同的瀏覽器對(duì)這些方法的支持各不一樣，Oh，My God，It's  a  confusion of world！后兩個(gè)操作十分的不專業(yè)，***不要使用。

對(duì)于特性要羅嗦一下咯，***一個(gè)特性，不專業(yè)，盡量不要使用，第二和第三個(gè)，一看就知道了，也沒啥說的，***個(gè)還是有必要說一下的。

提一個(gè)問題，如何通過js實(shí)現(xiàn)在一個(gè)新的窗口打開連接，也就是通過js實(shí)現(xiàn)類似點(diǎn)擊

< a href='http://www.sina.com' target='_blank'>sina< /a>

的效果,用location么，錯(cuò)，雖然location有target這個(gè)屬性，但，那是不行的，那怎么解決類？呵呵，答案是使用

window.open('http://www.sina.com','_blank');

這句代碼的實(shí)際意思是把一個(gè)連接在一個(gè)指定的框架（frame）內(nèi)打開，_self

,_top,_blank,這些是專有的框架名。

然后再說一說讓人迷惑的幾個(gè)東東，parent,self,top,opener,，怎么樣可區(qū)分清楚么？

其中self總是等于window，僅是名字不一樣而已，不過正是由于這個(gè)特點(diǎn)，使用它可以使我們的代碼更易于閱讀，而top對(duì)象和parent對(duì)象，本人認(rèn)為，只有在多框架(frames)下才會(huì)被用到，top對(duì)象指向最頂層的框架，也就是當(dāng)一個(gè)頁(yè)面使用了frame或iframe時(shí)，才會(huì)被用到。***opener用于window.open()打開的子窗口。

然后下來說一說document和location對(duì)象，首先，我在上面的BOM的體系結(jié)構(gòu)圖中，將這兩個(gè)對(duì)象標(biāo)記為了紅顏色，為什么類？簡(jiǎn)單，是由于混亂。

document是一個(gè)既屬于BOM又屬于DOM的對(duì)象，而location對(duì)象，則是一個(gè)既屬于window，又屬于document的屬性。從BOM的角度來看，document對(duì)象中包含了頁(yè)面中一些通用的屬性和集合，不過document中的很多屬性(alinkColor,bgColor,fgColor,linkColor,vlinkColor)是可以通過css控制的，所以我的建議是能使用css控制的盡量使用css,而剩下的屬性(lastModifie

d,referrer,title,URL),基本上沒有多大的用處，要說有用的，我認(rèn)為只有referrer可能有點(diǎn)用，它可以告訴你用戶是怎么訪問到你的頁(yè)面的。其實(shí)document的主要作用是用于DOM。

location對(duì)象表示載入窗口的URL，同時(shí)還可以用于解析URL，比如要獲得GET請(qǐng)求后的參數(shù)可以使用

location.search

對(duì)于history和navigator對(duì)象，history對(duì)象提供了go(int),back(),forward()方法，他們的功能類似于瀏覽器的前進(jìn)和后退，不過出于安全的考慮，history僅僅提供導(dǎo)航的功能，要想得到用戶的瀏覽歷史，僅靠這個(gè)對(duì)象是不行的。

到此，相信大家對(duì)“怎么理解JavaScript中的BOM和DOM”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！