當前位置:首頁 > 網頁設計 > javascript > 正文

JavaScript使用心得匯總:從BOM和DOM談起

 

JavaScript這個東西,一開始上手覺得沒什么,主要用來美化頁面而已;但是隨著對Web開發的理解更加深入,尤其是對Web 2.0下開發的接觸漸多,便會發現JavaScript其實是個十分有用的語言。下面就總結一下JavaScript的使用心得。

先說點什么呢,那就從BOM和DOM說開吧。

JavaScript使用心得之BOM和DOM

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

BOM:Browser Object Model,是瀏覽器相關的一組特性,由于和瀏覽器相關,那一定沒有統一的標準了,原因是,有ms了......,不過慶幸的是,還是有一些事實標準的。

DOM:Document Object Model,這個就是標準了,由著名的w3c制定,目前最高的級別是level 3,不過3還沒有徹底完成,目前主流的瀏覽器都可以支持到(僅僅是支持到哦,并不是完全遵守的)level 2,對html,也就是html4.x,目前最高的是4.01,后來w3c向把html統一向xml靠攏,于是就有了xhtml1.0,再后來,w3c想搞一個xhtml2.0,結果進度緩慢,加之各大廠商又不看好,于是就有了html5.0 (很牛的東東,有待嘗試哦)。

對規范有興趣可以瀏覽維基上的一篇文章

JavaScript使用心得之BOM描述

好了,BOM和DOM的歷史就先說到這里了,搞點實質性的東東,先說一下BOM的體系結構:

BOM的體系結構

先從window說起,對于window,最簡單的一句就是它是表示打開頁面的瀏覽器窗口,并不包含頁面的內容。請牢記后一句話,我在最開始的時候,就用它訪問過頁面的內容,結果當然是訪問不到了。

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

◆新建窗口(window.open()),

◆關閉窗口(window.close()),

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

◆移動窗口(moveBy(),moveTo),

還有一些其固有的特性,比如:

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

◆彈出系統對話框(alert(),confirm(),prompt()),

◆設置超時與暫停(setTimeout(),setInterval()),

◆狀態欄,

前面的那些操作使用的時候可以查閱文檔,當然能記住更好。不過要注意不同的瀏覽器對這些方法的支持各不一樣,Oh,My God,It's  a  confusion of world!后兩個操作十分的不專業,最好不要使用。

對于特性要羅嗦一下咯,最后一個特性,不專業,盡量不要使用,第二和第三個,一看就知道了,也沒啥說的,第一個還是有必要說一下的。

提一個問題,如何通過js實現在一個新的窗口打開連接,也就是通過js實現類似點擊

 

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

的效果,用location么,錯,雖然location有target這個屬性,但,那是不行的,那怎么解決類?呵呵,答案是使用

 

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

這句代碼的實際意思是把一個連接在一個指定的框架(frame)內打開,_self

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

然后再說一說讓人迷惑的幾個東東,parent,self,top,opener,,怎么樣可區分清楚么?

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

然后下來說一說document和location對象,首先,我在上面的BOM的體系結構圖中,將這兩個對象標記為了紅顏色,為什么類?簡單,是由于混亂。

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

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

location對象表示載入窗口的URL,同時還可以用于解析URL,比如要獲得GET請求后的參數可以使用

 

  1. 		location.search 

 

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

PS:不過要想得到用戶的歷史也不是不可能,利用a標簽的特點,呵呵,開動腦筋想一想吧

navigator對象,呵呵,常被用來判斷用戶的瀏覽器類型,和用戶的操作系統類型。不過這兩個問題也是十分復雜的問題,以后單獨說吧

最后一個,screen對象,我實際的工作中沒有用到過,基于沒有實踐,就沒有發言權的偉大理論,我就不總結了

以上就介紹了這些JavaScript使用心得。

上一篇:Web前端開發規范文檔你需要知道的事 下一篇:JavaScript:打破所有規則
四川快乐12走势图基本