探究JavaScript DOM API技術(shù)的使用
本文向大家簡單介紹一下JavaScript DOM API，DOM樹形結(jié)構(gòu)是各種類型的Node對象的樹，Node接口為遍歷和操作樹定義了屬性和方法，就這方面，文章將介紹JavaScript DOM API的用法及注意事項(xiàng)。
JavaScript DOM API初探
文檔對象模型(Doucment Object Model,DOM)是表示文檔(如HTML文檔、XML文檔)和訪問、操作構(gòu)成文檔的各種元素的應(yīng)用程序接口。在DOM中，HTML文檔的層次結(jié)構(gòu)被表示成樹形結(jié)構(gòu)。樹的節(jié)點(diǎn)表示文檔中的各種內(nèi)容。
51CTO推薦閱讀：揭露JavaScript DOM本質(zhì)及操作技巧
DOM樹形結(jié)構(gòu)是各種類型的Node對象的樹。Node接口為遍歷和操作樹定義了屬性和方法。Node對象的childNodes屬性將返回子節(jié)點(diǎn)的列表NodeList對象，firstChild、lastChild、nextSibling、previousSibling和parentNode屬性提供了遍歷樹的方法。appendChild()、removeChild()、replaceChild(old,new)和insertBefore()方法，可以給文檔樹添加節(jié)點(diǎn)或從文檔中刪除節(jié)點(diǎn)。
注意：在使用appendChild()方法時(shí)，如果參數(shù)是文檔中已存在的節(jié)點(diǎn)，該方法會先從文檔中去掉該節(jié)點(diǎn)。
文檔樹中不同類型節(jié)點(diǎn)由特定Node子接口表示，每個(gè)Node對象都有nodeType屬性，指定節(jié)點(diǎn)的類型。常用節(jié)點(diǎn)類型：
DOM樹的根節(jié)點(diǎn)是個(gè)Document對象，它的documentElement屬性引用表示文檔根元素的Element對象。大部分DOM樹由表示標(biāo)記(如<html>和<i>)的Element對象和表示文本串的Text對象構(gòu)成。
Element接口的getAttribute()方法、setAttribute()方法和removeAttribute()方法可以查詢、設(shè)置和刪除一個(gè)元素的性質(zhì)。還可以調(diào)用getAttributeNode()方法(該方法使用不適很方便)，返回一個(gè)表示性質(zhì)和它的值的Attr對象(Attr接口定義了specified屬性，可以判斷文檔中是否直接指定了該性質(zhì)，或判斷它的值是否是默認(rèn)值)。但要注意，Attr對象不出現(xiàn)在元素的childNodes[]數(shù)組中，不像Element和Text節(jié)點(diǎn)那樣是文檔樹的一部分。DOM標(biāo)準(zhǔn)允許通過Node接口的attributes[]數(shù)組訪問Attr節(jié)點(diǎn)，但I(xiàn)E定義了不兼容的attributes[]數(shù)組。
DOM標(biāo)準(zhǔn)可以與XML文檔和HTML文檔一起使用。DOM的核心API(Node、Element、Document和其他接口)相對通用，可以應(yīng)用于這兩種類型的文檔。DOM標(biāo)準(zhǔn)還包括HTML文檔專有的接口(HTML***Element)。
DOM標(biāo)準(zhǔn)的HTML部分為其他所有HTML標(biāo)記都定義了相應(yīng)的接口。對大部分HTML標(biāo)記來說，這些接口只是提供了一套鏡像他們的HTML性質(zhì)的屬性集合。此外，某些接口還定義了其他的屬性和方法(如HTMLFormElement接口定義了submit()和reset()方法及l(fā)ength屬性)。
HTML專有DOM標(biāo)準(zhǔn)有一套命名規(guī)則，HTML專有接口的屬性應(yīng)該以小寫字母開頭，如果屬性名有多個(gè)單詞，第二個(gè)單詞后的每個(gè)單詞首個(gè)字母大寫。當(dāng)HTML性質(zhì)名與JavaScript關(guān)鍵字發(fā)生沖突時(shí)，應(yīng)在性質(zhì)加前綴"html"來避免沖突。這個(gè)規(guī)則的一個(gè)例外是class性質(zhì)，可以轉(zhuǎn)化成HTMLElement的className屬性。
DOM標(biāo)準(zhǔn)有兩個(gè)版本(或說“級別”)。不同瀏覽器對DOM標(biāo)準(zhǔn)的支持程度有所不同，IE5以上版本支持使用HTML文檔的基本1級DOM接口，Netscape支持2級DOM接口，如下代碼可以檢測瀏覽器支持的DOM接口級別：
- if(document.implementation&&
- document.implementation.hasFeature&&
- document.implementation.hasFeature("html","1.0")){
- .......//如果支持HTMLDOM1級執(zhí)行}
JavaScript DOM API提供了引用文檔中元素的方法：
getElementsByTagName(vartagName)，返回NodeList對象(NodeList對象行為與數(shù)組相似，我們可以認(rèn)為這個(gè)函數(shù)返回一個(gè)以tagName指定的元素名組成的數(shù)組)，它可以獲得任何類型的HTML元素的列表。注意，因?yàn)镠TML標(biāo)記不區(qū)分大小寫，所以傳遞給該方法的字符串也不區(qū)分大小寫。如果把"*"傳給getElementsByTagName()方法，將返回文檔中所有元素的列表，順序以在文檔中出現(xiàn)的順序。
getElementById(varid),該方法返回一個(gè)元素，該元素具有匹配的id屬性。Document對象和Element對象都具有這兩個(gè)方法。
Text節(jié)點(diǎn)的data域包含這個(gè)節(jié)點(diǎn)中所有字符串。document.createTextNode()方法可以創(chuàng)建新的Text節(jié)點(diǎn)。Text節(jié)點(diǎn)還可以用appendData()、insertData()、deleteData()和replaceData()方法添加、插入、刪除或替換一個(gè)Text節(jié)點(diǎn)中的文本。document.createElement(vareleName)方法可以創(chuàng)建新的<eleName>元素。
我們還可以調(diào)用element.setAttribute()，如**.setAttribute("align","center")，設(shè)置**的align屬性值為center，它和**.align=center有同樣的效果。把任何元素的innerHTML屬性設(shè)置為一個(gè)HTML文本串，都會使那段HTML被解析并插入以作為元素的內(nèi)容。
DOM核心的API定義了DocumentFragment對象，作為使用Document節(jié)點(diǎn)組的快捷方法。DocumentFragment是一種特殊類型節(jié)點(diǎn)，它自身不出現(xiàn)在文檔中，只作為連續(xù)節(jié)點(diǎn)集合的臨時(shí)容器，并允許將這些節(jié)點(diǎn)作為一個(gè)對象來操作。當(dāng)把一個(gè)DocumentFragment插入文檔時(shí)(用Node對象的appendChild()、insertBefore()或replaceChild())，插入的不是DocumentFragment自身，而是它的所有子節(jié)點(diǎn)。如顛倒n節(jié)點(diǎn)順序的reverse()方法：
- functionreverse(n){varinputTag=n.childNodes;
- vartemp=document.createDocumentFragment();
- while(n.lastChild){ temp.appendChild(n.lastChild);
- }n.appendChild(temp);}
注意，在把DocumentFragment插入文檔時(shí)，段的子節(jié)點(diǎn)移入文檔中，插入后段是空的。上面介紹了一些JavaScript DOM API的內(nèi)容，接下來看一下Traversal和Range API。
Traversal和Range API
Traversal API定義了遍歷文檔和篩選出用戶不感興趣節(jié)點(diǎn)的高級方法。Range API定義了操作連續(xù)范圍內(nèi)的文檔內(nèi)容的方法，即使那些內(nèi)容不在節(jié)點(diǎn)的邊界處開始或結(jié)束。
【編輯推薦】
- JavaScript DOM API初探
- JQuery創(chuàng)建DOM元素方法解析
- JavaScript獲取HTML DOM節(jié)點(diǎn)元素詳解
- JavaScript和DOM輕松實(shí)現(xiàn)數(shù)據(jù)訪問
- HTML DOM與XML DOM的區(qū)別與聯(lián)系探究
