Dom是一種使用于多種環(huán)境和多種程序設(shè)計(jì)語言的通用性API磨确。如果想Dom技巧運(yùn)用在Web服務(wù)器以外的應(yīng)用環(huán)境里久信，嚴(yán)格遵守“第1級(jí)Dom”能夠讓你避免與兼容性有關(guān)的任何問題

一些基礎(chǔ)知識(shí)：

• Dom是一套對(duì)文檔的內(nèi)容進(jìn)行抽象和概念化的方法
• Dom是一種API（應(yīng)用編程接口）想幻，簡單地說敬尺，API就是一組已經(jīng)得到有關(guān)各方共同認(rèn)可的基本約定。
• 將.js文件放在HTML文檔中最好的位置是把<script></script>標(biāo)簽放到HTML文檔的最后赃绊，</body>標(biāo)簽之前榴徐，這樣能使瀏覽器更快的加載頁面守问，同時(shí)在引入.js文件時(shí)，可以不用包含傳統(tǒng)的type="text/javascript"屬性坑资。因?yàn)槟_本默認(rèn)是JavaScript耗帕，所以沒必要指定這個(gè)屬性。
• 程序設(shè)計(jì)語言分為解釋型和編譯型二大類袱贮。對(duì)于JavaScript語言仿便，在互聯(lián)網(wǎng)環(huán)境下，Web瀏覽器負(fù)責(zé)完成有掛的呢解釋和執(zhí)行工作。
• alert("10"+20);得到1020探越；alert(10+20);得到30；
• 良好的變量聲明法則：在命名變量時(shí)窑业，用下劃線來分隔各個(gè)單詞钦幔；在命名普通函數(shù)時(shí)，從第二個(gè)單詞開始把每個(gè)單詞的第一個(gè)字母寫成大寫形式（駝峰命名法）常柄；在命名構(gòu)造函數(shù)時(shí)鲤氢，首字母大寫；
• 最好通過構(gòu)造函數(shù)創(chuàng)建對(duì)象

function Box(name, age) { //構(gòu)造函數(shù)模式
this.name = name;
this.age = age;
this.run = function () {
return this.name + this.age + '運(yùn)行中...';
};
}
var box1 = new Box('Lee', 100); //new Box()即可
var box2 = new Box('Jack', 200);
alert(box1.run());
alert(box1 instanceof Box); //很清晰的識(shí)別他從屬于Box
這個(gè)方法看似像一個(gè)函數(shù)西潘，但又有些不太一樣卷玉。比如函數(shù)名一般都小寫。如果學(xué)過其他面向?qū)ο蟮恼Z言就會(huì)知道喷市，這是類的寫法（此處不多分析相种，非強(qiáng)制，但這么寫有助于區(qū)分構(gòu)造函數(shù)和
普通函數(shù)）品姓。這種方法是構(gòu)造函數(shù)創(chuàng)建對(duì)象的寫法寝并，通過構(gòu)造函數(shù)創(chuàng)建對(duì)象，必須使用new 運(yùn)算符腹备。
構(gòu)造函數(shù)可以創(chuàng)建對(duì)象執(zhí)行的過程：
1）當(dāng)使用了構(gòu)造函數(shù)衬潦，并且new 構(gòu)造函數(shù)()，那么就后臺(tái)執(zhí)行了new Object()植酥；
2）將構(gòu)造函數(shù)的作用域給新對(duì)象镀岛，(即new Object()創(chuàng)建出的對(duì)象)，而函數(shù)體內(nèi)的this 就
代表new Object()出來的對(duì)象友驮。
3）執(zhí)行構(gòu)造函數(shù)內(nèi)的代碼漂羊；
4）返回新對(duì)象(后臺(tái)直接返回)。

注：

1）構(gòu)造函數(shù)和普通函數(shù)的唯一區(qū)別喊儡，就是他們調(diào)用的方式不同拨与。只不過，構(gòu)造函數(shù)也是函數(shù)艾猜，必須用new 運(yùn)算符來調(diào)用买喧，否則就是普通函數(shù)。
2）this就是代表當(dāng)前作用域?qū)ο蟮囊么以摺Ｈ绻谌址秶鷗his 就代表window 對(duì)象淤毛，如果在構(gòu)造函數(shù)體內(nèi)，就代表當(dāng)前的構(gòu)造函數(shù)所聲明的對(duì)象算柳。

這種方法解決了函數(shù)識(shí)別問題低淡，但消耗內(nèi)存問題沒有解決。同時(shí)又帶來了一個(gè)新的問題，全局中的this 在對(duì)象調(diào)用的時(shí)候是Box 本身蔗蹋，而當(dāng)作普通函數(shù)調(diào)用的時(shí)候何荚，this 又代表window。即this作用域的問題猪杭。

第三章

• 文檔中的每一個(gè)元素都是一個(gè)對(duì)象餐塘，利用Dom提供的方法能得到任何一個(gè)對(duì)象
• getElementsByTagName方法返回一個(gè)對(duì)象數(shù)組，每個(gè)對(duì)象分別對(duì)應(yīng)著文檔里有著給定標(biāo)簽的一個(gè)元素皂吮。這個(gè)方法只有一個(gè)參數(shù)的函數(shù)戒傻，它的參數(shù)是標(biāo)簽的名字

可以通過getElementsById和getElementsByTagName結(jié)合起來運(yùn)用。例如：如果想知道id屬性值為purchase的元素包含著多少個(gè)子元素蜂筹，必須通過一個(gè)更具體的對(duì)象去調(diào)用這個(gè)方法需纳，如下所示---->
var shopping=document.getElementsById("purchase");
var items=shopping.getElemtentsByTagName("*");

• getElementsByClassName方法的返回值是一個(gè)具有相同類名的元素的數(shù)組。使用這個(gè)方法還可以查找那些帶有多個(gè)類名的元素艺挪。要制定多個(gè)類名不翩，只要在字符串參數(shù)中用空格分隔類名即可。例如alert(document.getElementsByClassName(" important sale").length);注意：即使在元素的class屬性中闺属，類名的順序是"sale important"而非參數(shù)中指定的"important sale",也照樣會(huì)匹配該元素慌盯。不僅類名的實(shí)際順序不重要，就算元素還帶有更多的類名也沒有關(guān)系掂器。

• getAttribute 查看屬性

• setAttribute 修改屬性值
  注意：通過setAttribute對(duì)文檔作出修改后亚皂，再通過瀏覽器的view source（ 查看源代碼）選項(xiàng)去查看文檔的源代碼是看到的仍將是改變前的屬性值，也就是說国瓮，setAttribute做出的修改不會(huì)反映在文檔本身的源代碼里灭必，這種“表里不一”的現(xiàn)象源自Dom的工作模式：先加載文檔的靜態(tài)內(nèi)容，在動(dòng)態(tài)刷新乃摹，動(dòng)態(tài)刷新不影響文檔的靜態(tài)內(nèi)容禁漓。這正是Dom的優(yōu)勢(shì)所在：對(duì)頁面內(nèi)容進(jìn)行刷新卻不需要在瀏覽器里刷新頁面

第四章

• 事件處理函數(shù)--》如果僅僅把事件處理函數(shù)放到圖片列表的一個(gè)鏈接中，會(huì)遇到一個(gè)問題：點(diǎn)擊這個(gè)鏈接時(shí)孵睬，不僅函數(shù)會(huì)被調(diào)用播歼，鏈接被點(diǎn)擊的默認(rèn)行為也會(huì)被調(diào)用。這意味著用戶還是會(huì)被帶到鏈接所指的href窗口掰读，如果只是想運(yùn)行函數(shù)秘狞，但是不想轉(zhuǎn)鏈接的話就需要組織這個(gè)默認(rèn)行為被調(diào)用。

解決方法:在onclick事件處理函數(shù)所觸發(fā)的JavaScript代碼里增加一條return false語句蹈集，就可以防止用戶被帶到目標(biāo)鏈接窗口烁试。例：

<a onclick="showPic(this);return false;">

• childNodes屬性：childNodes屬性可以用來獲取任何一個(gè)元素的所有子元素，它是一個(gè)包含這個(gè)元素全部子元素的數(shù)組拢肆。注意：由childNodes屬性返回的數(shù)組包含所有類型的節(jié)點(diǎn)减响，而不僅僅是元素節(jié)點(diǎn)靖诗。事實(shí)上，文檔里幾乎每一樣?xùn)|西都是一個(gè)節(jié)點(diǎn)支示，甚至連空格和換行符都會(huì)被解釋為節(jié)點(diǎn)刊橘，而它們也全都包含在childNodes屬性所返回的數(shù)組當(dāng)中！颂鸿！
• nodeValue屬性：它用來得到（和設(shè)置）一個(gè)節(jié)點(diǎn)的值

<p id="description">Choose an image.</p> <script> var description = document.getElementById("description"); alert(description.nodeValue); </script>

注意一個(gè)細(xì)節(jié)：在這里用nodeValue屬性獲取description對(duì)象的值時(shí)伤为，得到的并不是包含在這個(gè)段落里的文本。示例中輸出的將是“null”据途。因?yàn)?code><p>元素本身的nodeValu是一個(gè)空值，而我們真正需要的是<p>元素所包含的文本的值叙甸。

包含在<p>元素里的文本是另一種節(jié)點(diǎn)颖医，它是<p>元素的第一個(gè)子節(jié)點(diǎn)。因此想要得到的其實(shí)是它的第一個(gè)子節(jié)點(diǎn)的nodeValue屬性值裆蒸。所以應(yīng)該是

alert(description.childNodes[0].nodeValue); 或alert(description.firstChild.nodeValue);

第五章：

• 在網(wǎng)頁加載完成時(shí)觸發(fā)的事件熔萧，用window.onload=test();時(shí)出現(xiàn)了方法無法調(diào)用問題，把括號(hào)去掉之后問題就解決了僚祷。
  下面我們來分析一下原因：
  經(jīng)過上網(wǎng)查資料和自己動(dòng)手編寫示例發(fā)現(xiàn)佛致，window.onload=test();這種寫法在程序運(yùn)行到這句時(shí)，先執(zhí)行test()函數(shù)辙谜，然后將test的返回值賦給window.onload俺榆，這樣的賦值毫無意義
  window.onload=test;這種寫法是在網(wǎng)頁加載完成后，調(diào)用test()方法装哆。

• 如果有一個(gè)使用了getElementById()方法的函數(shù)罐脊，就可以在調(diào)用getElementById()方法之前先檢查用戶所使用的瀏覽器是否支持這個(gè)方法。在使用對(duì)象檢測(cè)時(shí)蜕琴，一定要?jiǎng)h掉方法名后面的圓括號(hào)萍桌，如果不刪掉，測(cè)試的將是方法的結(jié)果凌简，無論方法是否存在上炎。
  function myFunction(){ if(document.getElementById){ statement using getElemtById } }這個(gè)解決方法的唯一不足是，如此編寫出來的函數(shù)會(huì)增加一對(duì)花括號(hào)雏搂。如果需要在函數(shù)里檢測(cè)多個(gè)Dom方法和/或?qū)傩允欠翊嬖谂菏@個(gè)函數(shù)中最重要的語句就會(huì)被深埋在一層又一層的花括號(hào)里，而這樣的代碼往往很難閱讀和理解畔派。所以把測(cè)試條件改為“如果你不理解這個(gè)方法铅碍，請(qǐng)離開”則更簡單
  if(!getElementById){ return false; } -->if(!getElemtentById) return false;

• 性能考慮
  1.盡量少訪問Dom和盡量減少標(biāo)記：
  盡量減少文檔中的標(biāo)記數(shù)量。過多不必要的元素只會(huì)增加Dom樹的規(guī)模线椰，進(jìn)而增加遍歷Dom樹以查找特定元素的時(shí)間胞谈。
  2.合并和放置腳本：
  將多個(gè).js文件合并到一個(gè).js文件中，這樣可以減少加載頁面時(shí)發(fā)送的請(qǐng)求數(shù)量。而減少請(qǐng)求數(shù)量通常的都是在性能優(yōu)化時(shí)首先要考慮的烦绳。
  把所有<script>標(biāo)簽都放到文檔的末尾卿捎，</body>標(biāo)記之前，就可以讓頁面變得更快径密。即使這樣午阵，在加載腳本時(shí)，window對(duì)象的load時(shí)間依然可以執(zhí)行對(duì)文檔進(jìn)行的各種操作享扔。
  3.壓縮腳本：
  所謂壓縮腳本文件底桂，指的是把腳本文件中不必要的字節(jié)，如空格和注釋惧眠，統(tǒng)統(tǒng)刪除籽懦，從而達(dá)到“壓縮”文件的目的》湛或者使用更短的變量名暮顺。

第七章

• document.write()和innnerHTML屬性都是HTML專有屬性，不能用于任何和其它標(biāo)記語言文檔秀存。瀏覽器在呈現(xiàn)正宗的XHTML文檔（即MIME類型是application/xhtml+xml的XHTML文檔）時(shí)會(huì)直接忽略掉innerHTML屬性捶码。
• 在任何時(shí)候，標(biāo)準(zhǔn)的Dom都可以用來替代innerHTML或链。雖說這往往需要多編寫一些代碼才能獲得同樣的效果惫恼，但Dom同時(shí)也提供了更高的精確性和更強(qiáng)大的功能。
• 編寫insertAfter函數(shù)
  function insertAfter(newElement,targetElement){ var parent=targetElement.parentNode; if(parent.lastChild==targetElement){ parent.appendChild(newElement) } else{ parent.insertBefore(newElement,targetElement.nextSibling); } }
• Ajax的主要優(yōu)勢(shì)是對(duì)頁面的請(qǐng)求以異步方式發(fā)送到服務(wù)器澳盐。而服務(wù)器不會(huì)用整個(gè)頁面來響應(yīng)請(qǐng)求尤筐，它會(huì)在后臺(tái)處理請(qǐng)求，于此同時(shí)用戶還能繼續(xù)瀏覽頁面并與頁面交互洞就。你的腳本則可以按需加載和創(chuàng)建頁面內(nèi)容盆繁，而不會(huì)打斷用戶的瀏覽體驗(yàn)。利用Ajax旬蟋，Web應(yīng)用可以呈現(xiàn)出功能豐富油昂、交互敏捷、類似桌面應(yīng)用版的體驗(yàn)倾贰，就像使用谷歌地圖時(shí)的感覺一樣冕碟。注意：和任何新技術(shù)一樣，Ajax有他自己的適用范圍匆浙。它依賴JavaScript安寺，所以可能會(huì)有瀏覽器不支持它，而搜索引擎的蜘蛛程序也不會(huì)抓取到有關(guān)內(nèi)容
• Ajax技術(shù)的核心就是XMLHttpRequest對(duì)象首尼。這個(gè)對(duì)象充當(dāng)著瀏覽器中的腳本（客戶端）與服務(wù)器之間的中間人的角色挑庶。以往的請(qǐng)求都由瀏覽器發(fā)出言秸，而JavaScript通過這個(gè)對(duì)象可以自己發(fā)送請(qǐng)求，同時(shí)自己也處理響應(yīng)迎捺。
• onreadystatechange是一個(gè)事件處理函數(shù)举畸，它會(huì)在服務(wù)器給XMLHttpRequest對(duì)象送回響應(yīng)的時(shí)候被觸發(fā)執(zhí)行。在這個(gè)處理函數(shù)中凳枝，可以根據(jù)服務(wù)器的具體響應(yīng)做相應(yīng)的處理抄沮。在此，我們給它制定一個(gè)處理函數(shù)：
  request.onreadystatechange=function(){ //處理響應(yīng) if(request.readyState==4){ var para=document.createElement("p"); ... } } ;
• 服務(wù)器在向XMLHttpRequest獨(dú)享發(fā)回響應(yīng)時(shí)岖瑰，該對(duì)象有許多屬性可用叛买，瀏覽器會(huì)在不同階段更新readyState屬性的值，它又五個(gè)可能的值：

0表示未初始化
1表示正在加載
2表示加載完畢
3表示正在交互
4表示完成

第九章

• 文檔中的每個(gè)元素都是一個(gè)對(duì)象蹋订，每個(gè)對(duì)象又有著各種各樣的屬性聪全。有一些屬性告訴我們?cè)卦诠?jié)點(diǎn)樹上的位置信息。比如說辅辩，parentNode、nextSibling娃圆、previousSibling玫锋、childNodes。firstChild和lastChild這些屬性讼呢，就告訴了我們文檔中各節(jié)點(diǎn)之間的關(guān)系信息撩鹿。其他一些屬性（比如nodeType和nodeName屬性）包含元素本身的信息。比如說悦屏，對(duì)某個(gè)元素的nodeName屬性進(jìn)行的查詢將返回一個(gè)諸如“p”之類的字符串节沦。除此之外，文檔的每個(gè)元素節(jié)點(diǎn)還都一個(gè)屬性style础爬。style屬性包含著元素的樣式甫贯，查詢這個(gè)屬性將返回一個(gè)對(duì)象而不是一個(gè)簡單的字符串
• 當(dāng)需要引用一個(gè)中間帶減號(hào)的CSS屬性時(shí)，Dom要求你用駝峰命名法看蚜。CSS屬性font-family變?yōu)镈om屬性fontFamily叫搁；
• style對(duì)象的屬性的值必須放在引號(hào)里，單引號(hào)或雙引號(hào)均可

第十章

• .top .left等需要元素position=absolute
• JavaScript函數(shù)parseInt可以把字符串里的數(shù)值信息提取出來供炎。如果把一個(gè)以數(shù)字開頭的字符串傳遞給這個(gè)函數(shù)渴逻，它將返回一個(gè)數(shù)值：parseInt(string)
• 如果把position屬性值是absolute的元素A放在一個(gè)position屬性值是relative的元素B，B就成為A的容器元素音诫，而A將在B的顯示區(qū)域里按absolute方式進(jìn)行擺放惨奕。