JavaScript DOM的本質(zhì)及操作方法
雖然現(xiàn)在一些JavaScript框架，諸如jQuery、Prototype和MooTools能提高我們的前端開發(fā)效率，而且很好的解決了瀏覽器兼容性問題，但我們?nèi)砸蚝胘avascript技術(shù)基礎(chǔ)。文章將介紹JavaScript和文檔對(duì)象模型(DOM)的本質(zhì)。
51CTO推薦閱讀：減少瀏覽器重解析 JavaScript DOM操作優(yōu)化方案
引言JavaScript
JavsScript是可以在各種不同環(huán)境下使用的動(dòng)態(tài)的、松散類型(loosely typed)、基于原型的編程語言。除了作為流行的Web客戶端程序語言，它還可以使用于IDE插件、PDF文件或給予其它平臺(tái)甚至更為抽象的概念。
JavaScript 是由來自Netscape得Brendan Eich創(chuàng)造的基于ECMAScript標(biāo)準(zhǔn)（ECMA-262）的語言。他最初被命名為LiveScript，但后來被改為JavaScript，這也是很多人會(huì)把它跟java混淆的原因之一。以下是它的一些特性的詳細(xì)說明：
◆動(dòng)態(tài)程序語言在運(yùn)行時(shí)執(zhí)行；他們并沒有編譯。正因?yàn)榇?，有時(shí)JavaScript被認(rèn)為是一種腳本語言，而不是一個(gè)真正的編程語言（顯然是一種誤解）。
◆松散類型語言不要求強(qiáng)類型系統(tǒng)，如果你使用C或Java編程(與JavaScript不同)聲明變量時(shí)你就明白必須聲明類似’int’(整型)。JavaScript的不同之處在于你用不著指定它的類型。
◆在JavaScript中我們使用原型來實(shí)現(xiàn)類似繼承的效果，JavaScript不支持類。
◆JavaScript也是函數(shù)式語言，它處理函數(shù)為優(yōu)先對(duì)象。它是基于lambda下的理念。
理解以上概念對(duì)于學(xué)習(xí)JavaScript這門技術(shù)關(guān)系并不是很大。只是讓大家對(duì)JavaScript有個(gè)初步正確的的認(rèn)識(shí)，并了解JavaScript與其它編程語言的本質(zhì)區(qū)別。
文檔對(duì)象模型
文檔對(duì)象模型(Document Object Model)，通常簡稱為DOM，是網(wǎng)站內(nèi)容與JavaScript互通的接口。自JavaScript成為最常用的語言時(shí)JavaScript和DOM通常被視為獨(dú)立的實(shí)體。DOM接口用于存取、遍歷和控制HTML和XML文檔。
下面是關(guān)于DOM的一些重要的知識(shí):
◆Window對(duì)象作為全局對(duì)象，你僅需嘗試使用”window”來訪問它。Window對(duì)象下包含了你的所有要執(zhí)行的JavaScript代碼。就像所有對(duì)象都包含屬性和方法。
◆屬性是存儲(chǔ)于對(duì)象下的變量。所有在網(wǎng)頁中創(chuàng)建的變量都會(huì)成為window對(duì)象的屬性。
◆方法是存儲(chǔ)在對(duì)象下的函數(shù)。在所有函數(shù)存儲(chǔ)在window對(duì)象下時(shí)，你可以使用’methods’引用它們。
◆DOM相對(duì)于Web文檔結(jié)構(gòu)創(chuàng)建層次結(jié)構(gòu)，層次有節(jié)點(diǎn)組成。DOM節(jié)點(diǎn)有很多不同的類型，其中最重要的要數(shù)’Element’、’Text’和’Document’了。
◆‘Element’節(jié)點(diǎn)表示在頁面中的元素，所以如果在頁面中你有一個(gè)段落元素(‘<p>’)，那么你可以通過DOM的節(jié)點(diǎn)來訪問它。
◆‘Text’節(jié)點(diǎn)表示在頁面中的所有文本(在元素中)，所以如果在頁面的段落中有一些文本內(nèi)容，那么你可以通過DOM的節(jié)點(diǎn)來訪問它。
◆‘Document’節(jié)點(diǎn)表示整個(gè)文檔。(它是DOM樹的根節(jié)點(diǎn))
◆另請(qǐng)注意，元素屬性是DOM節(jié)點(diǎn)本身。
◆不同的布局引擎對(duì)于DOM標(biāo)準(zhǔn)的執(zhí)行是有一定的差別的。例如，使用Gecko布局引擎的FireFox瀏覽器可以很好的執(zhí)行(但也并不是完完全全按照W3C規(guī)范那樣)，但使用Trident引擎的IE因它的很多Bug和不完全執(zhí)行DOM標(biāo)準(zhǔn)而為眾人所知。這便是前端開發(fā)領(lǐng)域的一大痛苦之處。
網(wǎng)頁中的JavaScriptScript元素
當(dāng)你想在網(wǎng)站上使用JavaScript的時(shí)候，需要讓它們包含在script元素中:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <title>JavaScript!</title>
- </head>
- <body>
- <script type="text/javascript">
- // <![CDATA[
- // ]]>
- </script>
- </body>
- </html>
正如你所見在文檔下面有script元素。其實(shí)type屬性嚴(yán)格來講應(yīng)設(shè)置為”application/javascript”,但它不出所料的在IE瀏覽器下無法正常工作，所以我們使用”text/javascript”或不用type屬性，如果你在意代碼W3C規(guī)范驗(yàn)證的話建議你使用前者(“text/javascript”)。
你還會(huì)注意到在script元素中我們還有一對(duì)被注釋掉的代碼行，它們告訴支持XHTML的瀏覽器script元素中的內(nèi)容是字符數(shù)據(jù)而不應(yīng)被解釋為XHTML標(biāo)記。如果你計(jì)劃在JavaScript代碼中使用’<’或’>’字符的話那它就是相當(dāng)必要的。當(dāng)然，如果你是用普通HTML代碼的話，那你完全可以無視它。
defer屬性
我們script元素中的JavaScript代碼會(huì)在頁面讀過程中執(zhí)行，唯一的例外就是當(dāng)script元素有defer屬性的時(shí)候。默認(rèn)情況下，當(dāng)瀏覽器遇到script元素時(shí)，它會(huì)停下來并運(yùn)行代碼，然后再繼續(xù)進(jìn)行文檔解析。defer屬性告訴瀏覽器代碼包含非變更文檔代碼而且可以稍后執(zhí)行。它的唯一問題就是只在IE下可用，所以我們還是要盡量不要使用它了，了解就行。
鏈接外部腳本
如果你想連接一個(gè)外部腳本文件，那么你只需為你的script元素添加一個(gè)有文件地址的src屬性。把腳本文件獨(dú)立分離出來進(jìn)行調(diào)用的確相對(duì)于內(nèi)聯(lián)腳本來說是個(gè)好辦法，它意味著瀏覽器可以緩存該文件，而且你都不用擔(dān)心那些CDATA之類的廢話。
- <script type="text/javascript" src="my-script.js"></script>
#p#
JavaScript要點(diǎn)
在我們繼續(xù)講DOM之前有必要學(xué)習(xí)一下JavaScript基礎(chǔ)要點(diǎn)，如果有些東西你理解起來有些困難，別擔(dān)心，你早晚會(huì)搞定它的。在JavaScript種不同類型的值，它們是數(shù)值、字符串、布爾值、對(duì)象、Undefined 和 Null。單行注釋使用兩個(gè)斜杠(//)，這行內(nèi)的所有內(nèi)容都將被作為注釋內(nèi)容理解。多行注釋使用’/*’ 和 ‘*/’完成注釋段落。
數(shù)值
在JavaScript中所有數(shù)值都被描繪成浮點(diǎn)值，當(dāng)定義數(shù)值變量時(shí)記得不要用引號(hào)。
- // 注: 要一直使用 'var' 來聲明變量:
- var leftSide = 100;
- var topSide = 50;
- var areaOfRectangle = leftSide * topSide; // = 5000
字符串
你定義的字符串都是有字面上來看，JavaScript不會(huì)對(duì)它進(jìn)行處理。一個(gè)字符串可由一連串的Unicode字符組成，并由一對(duì)雙引號(hào)或單引號(hào)包圍。
- var firstPart = 'Hello';
- var secondPart = 'World!';
- var allOfIt = firstPart + ' ' + secondPart; // Hello World!
- // +號(hào)進(jìn)行字符串連接處理
- // (它還可用于數(shù)學(xué)上的加法運(yùn)算)
布爾值
布爾類型在你進(jìn)行條件判斷的時(shí)候很有用，以了解是否符合指定的標(biāo)準(zhǔn)。布爾有兩個(gè)可能的值:true和false。任何使用邏輯算法的比較結(jié)果都將是布爾值。
- 5 === (3 + 2); // = true
- // 你可以給變量聲明布爾值:
- var veryTired = true;
- // 你可以像這樣測試:
- if (veryTired) {
- // 你的代碼
- }
上面看到的’===’是比較運(yùn)算符，我們將在后面討論。
函數(shù)
函數(shù)是一個(gè)專門的對(duì)象。
- // 使用函數(shù)操作創(chuàng)建一個(gè)新函數(shù):
- function myFunctionName(arg1, arg2) {
- // 這里是函數(shù)的代碼
- }
- // 如果你省略掉函數(shù)名，那么你創(chuàng)建的是"匿名函數(shù)":
- function(arg1, arg2) {
- // 這里是函數(shù)的代碼
- }
- // 執(zhí)行函數(shù)僅需對(duì)他進(jìn)行引用并使用圓括號(hào) (附帶參數(shù)):
- myFunctionName(); // 無參數(shù)
- myFunctionName('foo', 'bar'); // 帶參數(shù)
- // 你也可以在不聲明變量的情況下執(zhí)行函數(shù)
- (function(){
- // 這就是所謂的自調(diào)用匿名函數(shù)
- })();
數(shù)組
數(shù)組也是一個(gè)專門的對(duì)象，它可以包含任意數(shù)量的數(shù)據(jù)。要訪問數(shù)組中的數(shù)據(jù)你就必須使用數(shù)字，用以引用其在數(shù)組中的”索引”。
- // 兩種聲名數(shù)組的不同方式,
- // 字面:
- var fruit = ['apple', 'lemon', 'banana'];
- // 使用數(shù)組構(gòu)造器:
- var fruit = new Array('apple', 'lemon', 'banana');
- fruit[0]; // 訪問數(shù)組中的第一個(gè)數(shù)據(jù)項(xiàng) (apple)
- fruit[1]; // 訪問數(shù)組中的第二個(gè)數(shù)據(jù)項(xiàng) (lemon)
- fruit[2]; // 訪問數(shù)組中的第三個(gè)數(shù)據(jù)項(xiàng) (banana)
對(duì)象
對(duì)象是命名的的值的集合(鍵-值對(duì))，它和數(shù)組很相似，唯一的不同之處在于你可以為每個(gè)數(shù)據(jù)值指定名字。
- // 兩種聲明對(duì)象的不同方式,
- // 字面(大括號(hào)):
- var profile = {
- name: 'Li',
- age: 23,
- job: 'Web Developer'
- };
- // 適用對(duì)象構(gòu)造器:
- var profile = new Object();
- profile.name = 'Li';
- profile.age = 23;
- profile.job = 'Web Developer';
if/else語句
if/else語句是JavaScript中最常見的結(jié)構(gòu)，它看上去就像下面這樣:
- var legalDrinkingAge = 21;
- var yourAge = 23;
- if ( yourAge >= legalDrinkingAge ) {
- // 我們使用'alert'來通知用戶:
- alert('你可以喝水.');
- } else {
- alert('對(duì)不起，你不能喝水.');
- }
循環(huán)
循環(huán)在遍歷數(shù)組中的數(shù)據(jù)項(xiàng)或?qū)ο蟮乃谐蓡T時(shí)非常有用，JavaScript中最常用的循環(huán)是for和while語句。
- var envatoTutSites = ['NETTUTS','PSDTUTS','AUDIOTUTS','AETUTS','VECTORTUTS'];
- // WHILE循環(huán)
- var counter = 0;
- var lengthOfArray = envatoTutSites.length;
- while (counter < lengthOfArray) {
- alert(envatoTutSites[counter]);
- counter++; // 等同于 counter += 1;
- }
- // FOR循環(huán)
- // (The i stands for "iterator" - you could name it anything)
- for (var i = 0, length = envatoTutSites.length; i < length; i++) {
- alert(envatoTutSites[i]);
- }
#p#
訪問DOM節(jié)點(diǎn)
假設(shè)我們有一個(gè)包含了一個(gè)段落和一個(gè)無序列表的基本XHTML文檔:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <title>JavaScript!</title>
- </head>
- <body>
- <p id="intro">My first paragraph...</p>
- <ul>
- <li>List item 1</li>
- <li>List item 1</li>
- <li>List item 1</li>
- <li>List item 1</li>
- <li>List item 1</li>
- </ul>
- <script type="text/javascript">
- // <![CDATA[
- // ]]>
- </script>
- </body>
- </html>
在第一個(gè)例子中我們將使用’getElementById’這個(gè)DOM方法訪問我們的段落。
- var introParagraph = document.getElementById('intro');
- / 我們現(xiàn)在訪問了一個(gè)DOM節(jié)點(diǎn)，這個(gè)DOM節(jié)點(diǎn)代表intro段落。
變量’introParagraph’現(xiàn)在指向DOM節(jié)點(diǎn)，我們現(xiàn)在可以在這個(gè)節(jié)點(diǎn)上做很多事情，我們可以讀取它的內(nèi)容和屬性，也可以控制它的任何方面。我們可以刪除它、克隆它或?qū)⑺频紻OM樹的其它位置。
我們可以使用JavaScript和DOM接口訪問現(xiàn)在文檔中的任何東西。所以，我們可能希望用類似的方式訪問文檔中的那個(gè)無序列表，但唯一的問題就在于它并沒有ID。你可以給它一個(gè)ID屬性并使用同樣的方法訪問它或者使用’getElementsByTagName’方法訪問它。
- var allUnorderedLists = document.getElementsByTagName('ul');
- // 'getElementsByTagName' 返回當(dāng)前存在的節(jié)點(diǎn)集合/列表
- // 它除了那一點(diǎn)微小的差別外其實(shí)和數(shù)組很相似。
getElementsByTagName
getElementsByTagName方法返回當(dāng)前存在的節(jié)點(diǎn)集合/列表，它和數(shù)組的相似之處是它也有l(wèi)ength屬性。需注意的重要一點(diǎn)是這些集合是’即時(shí)’的，如果你在DOM中添加了一個(gè)新元素那么這個(gè)集合將自動(dòng)自我更新。由于它和數(shù)組類似，所以我們可以使用索引來訪問其中的每個(gè)節(jié)點(diǎn)，從0到這個(gè)集合的總長度(減1)。
- // 訪問單個(gè)無序列表: [0] index
- var unorderedList = document.getElementsByTagName('ul')[0];
- // 將UL中的列表項(xiàng)創(chuàng)建為節(jié)點(diǎn)列表:
- var allListItems = unorderedList.getElementsByTagName('li');
- // 現(xiàn)在我們可以使用for循環(huán)遍歷列表項(xiàng):
- for (var i = 0, length = allListItems.length; i < length; i++) {
- // 提取其文本節(jié)點(diǎn)并alert它的內(nèi)容:
- alert( allListItems[i].firstChild.data );
- }
遍歷DOM
術(shù)語”遍歷”就是用來描述訪問整個(gè)DOM尋找節(jié)點(diǎn)的行為。DOM接口為我們提供了大量的節(jié)點(diǎn)屬性以便我們?cè)谖臋n中的所有節(jié)點(diǎn)自由訪問。
這些節(jié)點(diǎn)屬性可以方便我們?cè)L問關(guān)聯(lián)的/挨著的節(jié)點(diǎn):
Node.childNodes:你可以使用它訪問某個(gè)元素的所有直屬子元素。它將返回一個(gè)類似數(shù)組的對(duì)象，你可以循環(huán)遍歷它。數(shù)組中的節(jié)點(diǎn)可以包含所有不同類型的節(jié)點(diǎn)，如文本節(jié)點(diǎn)和其它類型的元素節(jié)點(diǎn)。
◆Node.firstChild:這個(gè)屬性等同于訪問’childNodes’數(shù)組的首項(xiàng)(‘Element.childNodes[0]‘)。它是個(gè)捷徑。
◆Node.lastChild:這個(gè)屬性等同于訪問’childNodes’數(shù)組的末項(xiàng)(‘Element.childNodes[Element.childNodes.length-1]‘)。它也是個(gè)捷徑。
◆Node.parentNode:這個(gè)屬性可以讓你訪問當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)，僅會(huì)有唯一一個(gè)父節(jié)點(diǎn)，如果想訪問’祖父’級(jí)節(jié)點(diǎn)，可以使用’Node.parentNode.parentNode’，以此類推。
◆Node.nextSibling:這個(gè)屬性可以讓你訪問DOM樹同級(jí)下的下一個(gè)節(jié)點(diǎn)。
◆Node.previousSibling:這個(gè)屬性可以讓你訪問DOM樹同級(jí)下的上一個(gè)節(jié)點(diǎn)。
所以就想你看到的一樣，遍歷DOM就是如此簡單，只要你熟練運(yùn)用了他的那些節(jié)點(diǎn)屬性。
列表項(xiàng)只能在他們之間沒有空格的情況下檢索。因?yàn)樵谖臋n中你能得到文本節(jié)點(diǎn)和元素節(jié)點(diǎn)，而’<ul>’和’<li>’之間的空格也會(huì)被當(dāng)做是一個(gè)節(jié)點(diǎn)(文本節(jié)點(diǎn))。同樣，無序列表嚴(yán)格意義上講并不是段落的下一個(gè)兄弟節(jié)點(diǎn)，因?yàn)樵谒麄z之間有空格，也就是另一個(gè)節(jié)點(diǎn)。通常在這種情況下，你可以遍歷’childNodes’數(shù)組并測試它們的’nodeType’,'nodeType’值為1就是元素節(jié)點(diǎn)，2為屬性，3為文本節(jié)點(diǎn)。
這就是JavaScript基本運(yùn)行方式，你可以使用本地DOM方法和屬性漂亮的訪問并提取文檔中的元素?，F(xiàn)在你可以脫離那些繁瑣的框架而獨(dú)立進(jìn)行基本的DOM操作了。
【編輯推薦】
