本文簡單介紹一下JavaScript DOM的本質(zhì)及操作方法，雖然現(xiàn)在一些JavaScript框架，諸如jQuery、Prototype和MooTools能提高我們的前端開發(fā)效率，而且很好的解決了瀏覽器兼容性問題，但我們?nèi)砸蚝?font size="+0">javascript技術(shù)基礎(chǔ)。

JavaScript DOM的本質(zhì)及操作方法

雖然現(xiàn)在一些JavaScript框架，諸如jQuery、Prototype和MooTools能提高我們的前端開發(fā)效率，而且很好的解決了瀏覽器兼容性問題，但我們?nèi)砸蚝胘avascript技術(shù)基礎(chǔ)。文章將介紹JavaScript和文檔對象模型(DOM)的本質(zhì)。

引言JavaScript

　　JavsScript是可以在各種不同環(huán)境下使用的動態(tài)的、松散類型(looselytyped)、基于原型的編程語言。除了作為流行的Web客戶端程序語言，它還可以使用于IDE插件、PDF文件或給予其它平臺甚至更為抽象的概念。

　　JavaScript是由來自Netscape得BrendanEich創(chuàng)造的基于ECMAScript標(biāo)準(zhǔn)(ECMA-262)的語言。他最初被命名為LiveScript，但后來被改為JavaScript，這也是很多人會把它跟java混淆的原因之一。以下是它的一些特性的詳細說明：

　　◆動態(tài)程序語言在運行時執(zhí)行;他們并沒有編譯。正因為此，有時JavaScript被認(rèn)為是一種腳本語言，而不是一個真正的編程語言(顯然是一種誤解)。

　　◆松散類型語言不要求強類型系統(tǒng)，如果你使用C或Java編程(與JavaScript不同)聲明變量時你就明白必須聲明類似’int’(整型)。JavaScript的不同之處在于你用不著指定它的類型。

　　◆在JavaScript中我們使用原型來實現(xiàn)類似繼承的效果，JavaScript不支持類。

　　◆JavaScript也是函數(shù)式語言，它處理函數(shù)為優(yōu)先對象。它是基于lambda下的理念。

　　理解以上概念對于學(xué)習(xí)JavaScript這門技術(shù)關(guān)系并不是很大。只是讓大家對JavaScript有個初步正確的的認(rèn)識，并了解JavaScript與其它編程語言的本質(zhì)區(qū)別。

文檔對象模型

　　文檔對象模型(DocumentObjectModel)，通常簡稱為DOM，是網(wǎng)站內(nèi)容與JavaScript互通的接口。自JavaScript成為最常用的語言時JavaScript和DOM通常被視為獨立的實體。DOM接口用于存取、遍歷和控制HTML和XML文檔。

　　下面是關(guān)于DOM的一些重要的知識:

　　◆Window對象作為全局對象，你僅需嘗試使用”window”來訪問它。Window對象下包含了你的所有要執(zhí)行的JavaScript代碼。就像所有對象都包含屬性和方法。

　　◆屬性是存儲于對象下的變量。所有在網(wǎng)頁中創(chuàng)建的變量都會成為window對象的屬性。

　　◆方法是存儲在對象下的函數(shù)。在所有函數(shù)存儲在window對象下時，你可以使用’methods’引用它們。

　　◆DOM相對于Web文檔結(jié)構(gòu)創(chuàng)建層次結(jié)構(gòu)，層次有節(jié)點組成。DOM節(jié)點有很多不同的類型，其中最重要的要數(shù)’Element’、’Text’和’Document’了。

　　◆‘Element’節(jié)點表示在頁面中的元素，所以如果在頁面中你有一個段落元素(‘

’)，那么你可以通過DOM的節(jié)點來訪問它。

　　◆‘Text’節(jié)點表示在頁面中的所有文本(在元素中)，所以如果在頁面的段落中有一些文本內(nèi)容，那么你可以通過DOM的節(jié)點來訪問它。

　　◆‘Document’節(jié)點表示整個文檔。(它是DOM樹的根節(jié)點)

　　◆另請注意，元素屬性是DOM節(jié)點本身。

　　◆不同的布局引擎對于DOM標(biāo)準(zhǔn)的執(zhí)行是有一定的差別的。例如，使用Gecko布局引擎的FireFox瀏覽器可以很好的執(zhí)行(但也并不是完完全全按照W3C規(guī)范那樣)，但使用Trident引擎的IE因它的很多Bug和不完全執(zhí)行DOM標(biāo)準(zhǔn)而為眾人所知。這便是前端開發(fā)領(lǐng)域的一大痛苦之處。#p#

網(wǎng)頁中的JavaScript元素

　　當(dāng)你想在網(wǎng)站上使用JavaScript的時候，需要讓它們包含在script元素中:

　　正如你所見在文檔下面有script元素。其實type屬性嚴(yán)格來講應(yīng)設(shè)置為”application/javascript”,但它不出所料的在IE瀏覽器下無法正常工作，所以我們使用”text/javascript”或不用type屬性，如果你在意代碼W3C規(guī)范驗證的話建議你使用前者(“text/javascript”)。

　　你還會注意到在script元素中我們還有一對被注釋掉的代碼行，它們告訴支持XHTML的瀏覽器script元素中的內(nèi)容是字符數(shù)據(jù)而不應(yīng)被解釋為XHTML標(biāo)記。如果你計劃在JavaScript代碼中使用’<’或’>’字符的話那它就是相當(dāng)必要的。當(dāng)然，如果你是用普通HTML代碼的話，那你完全可以無視它。

defer屬性

　　我們script元素中的JavaScript代碼會在頁面讀過程中執(zhí)行，***的例外就是當(dāng)script元素有defer屬性的時候。默認(rèn)情況下，當(dāng)瀏覽器遇到script元素時，它會停下來并運行代碼，然后再繼續(xù)進行文檔解析。defer屬性告訴瀏覽器代碼包含非變更文檔代碼而且可以稍后執(zhí)行。它的***問題就是只在IE下可用，所以我們還是要盡量不要使用它了，了解就行。

鏈接外部腳本

　　如果你想連接一個外部腳本文件，那么你只需為你的script元素添加一個有文件地址的src屬性。把腳本文件獨立分離出來進行調(diào)用的確相對于內(nèi)聯(lián)腳本來說是個好辦法，它意味著瀏覽器可以緩存該文件，而且你都不用擔(dān)心那些CDATA之類的廢話。#p#

JavaScript要點

在我們繼續(xù)講DOM之前有必要學(xué)習(xí)一下JavaScript基礎(chǔ)要點，如果有些東西你理解起來有些困難，別擔(dān)心，你早晚會搞定它的。在JavaScript種不同類型的值，它們是數(shù)值、字符串、布爾值、對象、Undefined和Null。單行注釋使用兩個斜杠(//)，這行內(nèi)的所有內(nèi)容都將被作為注釋內(nèi)容理解。多行注釋使用’/*’和‘*/’完成注釋段落。

數(shù)值

在JavaScript中所有數(shù)值都被描繪成浮點值，當(dāng)定義數(shù)值變量時記得不要用引號。

//注:要一直使用'var'來聲明變量:varleftSide=100;  
 
vartopSide=50;varareaOfRectangle=leftSide*topSide;  
 
//=5000字符串  

你定義的字符串都是有字面上來看，JavaScript不會對它進行處理。一個字符串可由一連串的Unicode字符組成，并由一對雙引號或單引號包圍。

varfirstPart='Hello';varsecondPart='World!';  
varallOfIt=firstPart+''+secondPart;  
//HelloWorld!//+號進行字符串連接處理  
//(它還可用于數(shù)學(xué)上的加法運算) 

布爾值

布爾類型在你進行條件判斷的時候很有用，以了解是否符合指定的標(biāo)準(zhǔn)。布爾有兩個可能的值:true和false。任何使用邏輯算法的比較結(jié)果都將是布爾值。

5===(3+2);  
 
//=true//你可以給變量聲明布爾值:varveryTired=true;  
 
//你可以像這樣測試:if(veryTired){//你的代碼}  

上面看到的’===’是比較運算符，我們將在后面討論。

函數(shù)

函數(shù)是一個專門的對象。

//使用函數(shù)操作創(chuàng)建一個新函數(shù):functionmyFunctionName(arg1,arg2){  
 
//這里是函數(shù)的代碼}  
 
//如果你省略掉函數(shù)名，那么你創(chuàng)建的是"匿名函數(shù)":function(arg1,arg2){  
 
//這里是函數(shù)的代碼  
 
}//執(zhí)行函數(shù)僅需對他進行引用并使用圓括號(附帶參數(shù)):myFunctionName();  
 
//無參數(shù)myFunctionName('foo','bar');  
 
//帶參數(shù)//你也可以在不聲明變量的情況下執(zhí)行函數(shù)(function(){  
 
//這就是所謂的自調(diào)用匿名函數(shù)})();  

#p#數(shù)組

數(shù)組也是一個專門的對象，它可以包含任意數(shù)量的數(shù)據(jù)。要訪問數(shù)組中的數(shù)據(jù)你就必須使用數(shù)字，用以引用其在數(shù)組中的”索引”。

//兩種聲名數(shù)組的不同方式,  
//字面:varfruit=['apple','lemon','banana'];  
//使用數(shù)組構(gòu)造器:varfruit=newArray('apple','lemon','banana');  
fruit[0];//訪問數(shù)組中的***個數(shù)據(jù)項(apple)fruit[1];  
//訪問數(shù)組中的第二個數(shù)據(jù)項(lemon)fruit[2];  
//訪問數(shù)組中的第三個數(shù)據(jù)項(banana)對象 

對象是命名的的值的集合(鍵-值對)，它和數(shù)組很相似，***的不同之處在于你可以為每個數(shù)據(jù)值指定名字。

//兩種聲明對象的不同方式,  
//字面(大括號):varprofile={name:'Li',age:23,job:'WebDeveloper'};  
//適用對象構(gòu)造器:varprofile=newObject();profile.name='Li';  
profile.age=23;profile.job='WebDeveloper';if/else語句 

if/else語句是JavaScript中最常見的結(jié)構(gòu)，它看上去就像下面這樣:

varlegalDrinkingAge=21;varyourAge=23;  
 
if(yourAge>=legalDrinkingAge){  
 
//我們使用'alert'來通知用戶:alert('你可以喝水.');  
 
}else{alert('對不起，你不能喝水.');}循環(huán)  

循環(huán)在遍歷數(shù)組中的數(shù)據(jù)項或?qū)ο蟮乃谐蓡T時非常有用，JavaScript中最常用的循環(huán)是for和while語句。 

varenvatoTutSites=['NETTUTS','PSDTUTS',  
'AUDIOTUTS','AETUTS','VECTORTUTS'];  
//WHILE循環(huán)varcounter=0;  
varlengthOfArray=envatoTutSites.length;  
while(counter<lengthOfArray){alert(envatoTutSites[counter]);  
counter++;//等同于counter+=1;}  
//FOR循環(huán)//(Theistandsfor"iterator"-youcouldnameitanything)  
for(vari=0,length=envatoTutSites.length;  
i<length;i++){alert(envatoTutSites[i]);} 

【編輯推薦】

1. 技術(shù)分享 如何獲取Dom元素的X/Y坐標(biāo)
2. 深入學(xué)習(xí)JavaScript DOM遍歷方法
3. JavaScript獲取HTML DOM節(jié)點元素詳解
4. JavaScript和DOM輕松實現(xiàn)數(shù)據(jù)訪問
5. HTML DOM與XML DOM的區(qū)別與聯(lián)系探究