web前端筆試面試總結(jié)+js+css

1、web前端面試筆試題+優(yōu)化前端是龐大的，包括HTML、CSS、Javascript、Image、Flash等等各種各樣的資源。前端優(yōu)化是復(fù)雜的，針對方方面面的資源都有不同的方式。那么，前端優(yōu)化的目的是什么1. 從用戶角度而言，優(yōu)化能夠讓頁面加載得更快、對用戶的操作響應(yīng)得更及時，能夠給用戶提供更為友好的體驗。2. 從服務(wù)商角度而言，優(yōu)化能夠減少頁面請求數(shù)、或者減小請求所占帶寬，能夠節(jié)省可觀的資源?？傊?，恰當(dāng)?shù)膬?yōu)化不僅能夠改善站點的用戶體驗并且能夠節(jié)省相當(dāng)?shù)馁Y源利用。前端優(yōu)化的途徑有很多，按粒度大致可以分為兩類，第一類是頁面級別的優(yōu)化，例如HTTP請求數(shù)、腳本的無阻塞加載、內(nèi)聯(lián)腳本的位置優(yōu)化等;第

2、二類則是代碼級別的優(yōu)化，例如Javascript中的DOM操作優(yōu)化、CSS選擇符優(yōu)化、圖片優(yōu)化以及HTML結(jié)構(gòu)優(yōu)化等等。另外，本著提高投入產(chǎn)出比的目的，后文提到的各種優(yōu)化策略大致按照投入產(chǎn)出比從大到小的順序排列。一、頁面級優(yōu)化1. 減少HTTP請求數(shù)這條策略基本上所有前端人都知道，而且也是最重要最有效的。都說要減少HTTP請求，那請求多了到底會怎么樣呢?首先，每個請求都是有成本的，既包含時間成本也包含資源成本。一個完整的請求都需要經(jīng)過DNS尋址、與服務(wù)器建立連接、發(fā)送數(shù)據(jù)、等待服務(wù)器響應(yīng)、接收數(shù)據(jù)這樣一個“漫長”而復(fù)雜的過程。時間成本就是用戶需要看到或者“感受”到這個資源是必須要等待這個過程結(jié)

3、束的，資源上由于每個請求都需要攜帶數(shù)據(jù)，因此每個請求都需要占用帶寬。另外，由于瀏覽器進行并發(fā)請求的請求數(shù)是有上限的(具體參見此處)，因此請求數(shù)多了以后，瀏覽器需要分批進行請求，因此會增加用戶的等待時間，會給用戶造成站點速度慢這樣一個印象，即使可能用戶能看到的第一屏的資源都已經(jīng)請求完了，但是瀏覽器的進度條會一直存在。減少HTTP請求數(shù)的主要途徑包括：(1). 從設(shè)計實現(xiàn)層面簡化頁面如果你的頁面像百度首頁一樣簡單，那么接下來的規(guī)則基本上都用不著了。保持頁面簡潔、減少資源的使用時最直接的。如果不是這樣，你的頁面需要華麗的皮膚，則繼續(xù)閱讀下面的內(nèi)容。(2). 合理設(shè)置HTTP緩存緩存的力量是強大的，恰

4、當(dāng)?shù)木彺嬖O(shè)置可以大大的減少HTTP請求。以有啊首頁為例，當(dāng)瀏覽器沒有緩存的時候訪問一共會發(fā)出78個請求，共600多K數(shù)據(jù)(如圖1.1)，而當(dāng)?shù)诙卧L問即瀏覽器已緩存之后訪問則僅有10個請求，共20多K數(shù)據(jù)(如圖1.2)。(這里需要說明的是，如果直接F5刷新頁面的話效果是不一樣的，這種情況下請求數(shù)還是一樣，不過被緩存資源的請求服務(wù)器是304響應(yīng)，只有Header沒有Body，可以節(jié)省帶寬)怎樣才算合理設(shè)置?原則很簡單，能緩存越多越好，能緩存越久越好。例如，很少變化的圖片資源可以直接通過HTTP Header中的Expires設(shè)置一個很長的過期頭;變化不頻繁而又可能會變的資源可以使用Last-Mo

5、difed來做請求驗證。盡可能的讓資源能夠在緩存中待得更久。關(guān)于HTTP緩存的具體設(shè)置和原理此處就不再詳述了，有興趣的可以參考下列文章：HTTP1.1協(xié)議中關(guān)于緩存策略的描述Fiddler HTTP Performance中關(guān)于緩存的介紹(3). 資源合并與壓縮如果可以的話，盡可能的將外部的腳本、樣式進行合并，多個合為一個。另外，CSS、Javascript、Image都可以用相應(yīng)的工具進行壓縮，壓縮后往往能省下不少空間。(4). CSS Sprites合并CSS圖片，減少請求數(shù)的又一個好辦法。(5). Inline Images使用data: URL scheme的方式將圖片嵌入到頁面或CS

6、S中，如果不考慮資源管理上的問題的話，不失為一個好辦法。如果是嵌入頁面的話換來的是增大了頁面的體積，而且無法利用瀏覽器緩存。使用在CSS中的圖片則更為理想一些(6). Lazy Load Image這條策略實際上并不一定能減少HTTP請求數(shù)，但是卻能在某些條件下或者頁面剛加載時減少HTTP請求數(shù)。對于圖片而言，在頁面剛加載的時候可以只加載第一屏，當(dāng)用戶繼續(xù)往后滾屏的時候才加載后續(xù)的圖片。這樣一來，假如用戶只對第一屏的內(nèi)容感興趣時，那剩余的圖片請求就都節(jié)省了。有啊首頁曾經(jīng)的做法是在加載的時候把第一屏之后的圖片地址緩存在Textarea標簽中，待用戶往下滾屏的時候才“惰性”加載。2. 將外部腳本置

7、底前文有談到，瀏覽器是可以并發(fā)請求的，這一特點使得其能夠更快的加載資源，然而外鏈腳本在加載時卻會阻塞其他資源，例如在腳本加載完成之前，它后面的圖片、樣式以及其他腳本都處于阻塞狀態(tài)，直到腳本加載完成后才會開始加載。如果將腳本放在比較靠前的位置，則會影響整個頁面的加載速度從而影響用戶體驗。解決這一問題的方法有很多，在這里有比較詳細的介紹(這里是譯文和更詳細的例子)，而最簡單可依賴的方法就是將腳本盡可能的往后挪，減少對并發(fā)下載的影響。3. 異步執(zhí)行inline腳本inline腳本對性能的影響與外部腳本相比，是有過之而無不及。首頁，與外部腳本一樣，inline腳本在執(zhí)行的時候一樣會阻塞并發(fā)請求，除此之

8、外，由于瀏覽器在頁面處理方面是單線程的，當(dāng)inline腳本在頁面渲染之前執(zhí)行時，頁面的渲染工作則會被推遲。簡而言之，inline腳本在執(zhí)行的時候，頁面處于空白狀態(tài)。鑒于以上兩點原因，建議將執(zhí)行時間較長的inline腳本異步執(zhí)行，異步的方式有很多種，例如使用script元素的defer屬性(存在兼容性問題和其他一些問題，例如不能使用document.write)、使用setTimeout，此外，在HTML5中引入了Web Workers的機制，恰恰可以解決此類問題4. Lazy Load Javascript隨著Javascript框架的流行，越來越多的站點也使用起了框架。不過，一個框架往往包括

9、了很多的功能實現(xiàn)，這些功能并不是每一個頁面都需要的，如果下載了不需要的腳本則算得上是一種資源浪費-既浪費了帶寬又浪費了執(zhí)行花費的時間。目前的做法大概有兩種，一種是為那些流量特別大的頁面專門定制一個專用的mini版框架，另一種則是Lazy Load。YUI則使用了第二種方式，在YUI的實現(xiàn)中，最初只加載核心模塊，其他模塊可以等到需要使用的時候才加載5. 將CSS放在HEAD中如果將CSS放在其他地方比如BODY中，則瀏覽器有可能還未下載和解析到CSS就已經(jīng)開始渲染頁面了，這就導(dǎo)致頁面由無CSS狀態(tài)跳轉(zhuǎn)到CSS狀態(tài)，用戶體驗比較糟糕。除此之外，有些瀏覽器會在CSS下載完成后才開始渲染頁面，如果CS

10、S放在靠下的位置則會導(dǎo)致瀏覽器將渲染時間推遲。6. 異步請求Callback在某些頁面中可能存在這樣一種需求，需要使用script標簽來異步的請求數(shù)據(jù)。類似：Javascript: /*Callback函數(shù)*/ function myCallback(info) /do something here HTML: script type=text/javascript src=cb返回的內(nèi)容: myCallback(Hello world!); 像以上這種方式直接在頁面上寫對頁面的性能也是有影響的，即增加了頁面首次加載的負擔(dān)，推遲了DOMLoaded和window.onload事件的觸發(fā)時機。如

11、果時效性允許的話，可以考慮在DOMLoaded事件觸發(fā)的時候加載，或者使用setTimeout方式來靈活的控制加載的時機。7. 減少不必要的HTTP跳轉(zhuǎn)對于以目錄形式訪問的HTTP鏈接，很多人都會忽略鏈接最后是否帶/，假如你的服務(wù)器對此是區(qū)別對待的話，那么你也需要注意，這其中很可能隱藏了301跳轉(zhuǎn)，增加了多余請求。具體參見下圖，其中第一個鏈接是以無/結(jié)尾的方式訪問的，于是服務(wù)器有了一次跳轉(zhuǎn)。8. 避免重復(fù)的資源請求這種情況主要是由于疏忽或頁面由多個模塊拼接而成，然后每個模塊中請求了同樣的資源時，會導(dǎo)致資源的重復(fù)請求二、代碼級優(yōu)化1. Javascript(1). DOMDOM操作應(yīng)該是腳本中最

12、耗性能的一類操作，例如增加、修改、刪除DOM元素或者對DOM集合進行操作。如果腳本中包含了大量的DOM操作則需要注意以下幾點：a. HTML Collection在腳本中document.images、document.forms、getElementsByTagName()返回的都是HTMLCollection類型的集合，在平時使用的時候大多將它作為數(shù)組來使用，因為它有l(wèi)ength屬性，也可以使用索引訪問每一個元素。不過在訪問性能上則比數(shù)組要差很多，原因是這個集合并不是一個靜態(tài)的結(jié)果，它表示的僅僅是一個特定的查詢，每次訪問該集合時都會重新執(zhí)行這個查詢從而更新查詢結(jié)果。所謂的“訪問集合”包括讀

13、取集合的length屬性、訪問集合中的元素。因此，當(dāng)你需要遍歷HTML Collection的時候，盡量將它轉(zhuǎn)為數(shù)組后再訪問，以提高性能。即使不轉(zhuǎn)換為數(shù)組，也請盡可能少的訪問它，例如在遍歷的時候可以將length屬性、成員保存到局部變量后再使用局部變量。b. Reflow & Repaint除了上面一點之外，DOM操作還需要考慮瀏覽器的Reflow和Repaint，因為這些都是需要消耗資源的，具體的可以參加以下文章：如何減少瀏覽器的repaint和reflow?Understanding Internet Explorer Rendering BehaviourNotes on HTML Re

14、flow(2). 慎用withwith(obj) p = 1; 代碼塊的行為實際上是修改了代碼塊中的執(zhí)行環(huán)境，將obj放在了其作用域鏈的最前端，在with代碼塊中訪問非局部變量是都是先從obj上開始查找，如果沒有再依次按作用域鏈向上查找，因此使用with相當(dāng)于增加了作用域鏈長度。而每次查找作用域鏈都是要消耗時間的，過長的作用域鏈會導(dǎo)致查找性能下降。因此，除非你能肯定在with代碼中只訪問obj中的屬性，否則慎用with，替代的可以使用局部變量緩存需要訪問的屬性。(3). 避免使用eval和Function每次 eval 或 Function 構(gòu)造函數(shù)作用于字符串表示的源代碼時，腳本引擎都需要將

15、源代碼轉(zhuǎn)換成可執(zhí)行代碼。這是很消耗資源的操作 通常比簡單的函數(shù)調(diào)用慢100倍以上。eval 函數(shù)效率特別低，由于事先無法知曉傳給 eval 的字符串中的內(nèi)容，eval在其上下文中解釋要處理的代碼，也就是說編譯器無法優(yōu)化上下文，因此只能有瀏覽器在運行時解釋代碼。這對性能影響很大。Function 構(gòu)造函數(shù)比eval略好，因為使用此代碼不會影響周圍代碼;但其速度仍很慢。此外，使用eval和Function也不利于Javascript壓縮工具執(zhí)行壓縮。(4). 減少作用域鏈查找前文談到了作用域鏈查找問題，這一點在循環(huán)中是尤其需要注意的問題。如果在循環(huán)中需要訪問非本作用域下的變量時請在遍歷之前用局部變

16、量緩存該變量，并在遍歷結(jié)束后再重寫那個變量，這一點對全局變量尤其重要，因為全局變量處于作用域鏈的最頂端，訪問時的查找次數(shù)是最多的。低效率的寫法： /全局變量 var globalVar = 1; function myCallback(info) for( var i = 100000; i-;) /每次訪問globalVar都需要查找到作用域鏈最頂端，本例中需要訪問100000次 globalVar += i; 更高效的寫法： /全局變量 var globalVar = 1; function myCallback(info) /局部變量緩存全局變量 var localVar = globa

17、lVar; for( var i = 100000; i-;) /訪問局部變量是最快的 localVar += i; /本例中只需要訪問2次全局變量 globalVar = localVar; 此外，要減少作用域鏈查找還應(yīng)該減少閉包的使用。(5). 數(shù)據(jù)訪問Javascript中的數(shù)據(jù)訪問包括直接量(字符串、正則表達式)、變量、對象屬性以及數(shù)組，其中對直接量和局部變量的訪問是最快的，對對象屬性以及數(shù)組的訪問需要更大的開銷。當(dāng)出現(xiàn)以下情況時，建議將數(shù)據(jù)放入局部變量：a. 對任何對象屬性的訪問超過1次b. 對任何數(shù)組成員的訪問次數(shù)超過1次另外，還應(yīng)當(dāng)盡可能的減少對對象以及數(shù)組深度查找。(6). 字

18、符串拼接在Javascript中使用+號來拼接字符串效率是比較低的，因為每次運行都會開辟新的內(nèi)存并生成新的字符串變量，然后將拼接結(jié)果賦值給新變量。與之相比更為高效的做法是使用數(shù)組的join方法，即將需要拼接的字符串放在數(shù)組中最后調(diào)用其join方法得到結(jié)果。不過由于使用數(shù)組也有一定的開銷，因此當(dāng)需要拼接的字符串較多的時候可以考慮用此方法。關(guān)于Javascript優(yōu)化的更詳細介紹請參考：Write Efficient Javascript(PPT)Efficient JavaScript2. CSS選擇符在大多數(shù)人的觀念中，都覺得瀏覽器對CSS選擇符的解析式從左往右進行的，例如 #toc A co

19、lor: #444; 這樣一個選擇符，如果是從右往左解析則效率會很高，因為第一個ID選擇基本上就把查找的范圍限定了，但實際上瀏覽器對選擇符的解析是從右往左進行的。如上面的選擇符，瀏覽器必須遍歷查找每一個A標簽的祖先節(jié)點，效率并不像之前想象的那樣高。根據(jù)瀏覽器的這一行為特點，在寫選擇符的時候需要注意很多事項，有人已經(jīng)一一列舉了，詳情參考此處。3. HTML對HTML本身的優(yōu)化現(xiàn)如今也越來越多的受人關(guān)注了，詳情可以參見這篇總結(jié)性文章。4. Image壓縮圖片壓縮是個技術(shù)活，不過現(xiàn)如今這方面的工具也非常多，壓縮之后往往能帶來不錯的效果，具體的壓縮原理以及方法在Even Faster Web Site

20、s第10章有很詳細的介紹，有興趣的可以去看看?？偨Y(jié)本文從頁面級以及代碼級兩個粒度對前端優(yōu)化的各種方式做了一個總結(jié)，這些方法基本上都是前端開發(fā)人員在開發(fā)的過程中可以借鑒和實踐的，除此之外，完整的前端優(yōu)化還應(yīng)該包括很多其他的途徑，例如CDN、Gzip、多域名、無Cookie服務(wù)器等等，由于對于開發(fā)人員的可操作性并不強大，在此也就不多敘述了，詳細的可以參考Yahoo和Google的這些“金科玉律”。1.Javascript簡介HTML是純靜態(tài)的的頁面，而Javascript讓頁面有了動態(tài)的效果，比如;OA中模塊的拖拉所有的瀏覽器都會內(nèi)置Javascript的解釋器1992年 Nombas公司開發(fā)出C

21、減減的嵌入式腳本語言。這是最好的HTML頁面的腳本語言。Netscape為了擴展其瀏覽器的功能，開發(fā)了一套LiveScript，并與1995年與SUN公司聯(lián)合把其改名為javascript,它的主要目的是處理一些輸入的有效性驗證，而之前這個工作是留給perl之類的服務(wù)器端語言完成，在以前使用電話線調(diào)制解調(diào)器(28.8kb/s)的時代，如此慢的與服務(wù)器交互，這絕對是一件很痛苦的事情。Javascript的出現(xiàn)，解決了這個問題，因為它的驗證是基于客戶端的。微軟公司早期版本的瀏覽器僅支持自己的vbscript，但后來不得不加入javascriptIE3中搭載Javascipt的克隆版本，命名為jsc

22、ript在一次技術(shù)會議中，sun，microsoft，netscape公司聯(lián)合制定了ECMA-Script標準在2005前，網(wǎng)頁上提示框，廣告越來越多，把javascipt濫用，使javascript背上了大量的罪名。2005年，google公司的網(wǎng)上產(chǎn)品（google地圖，gmail，google搜索建議）等使得ajax興起，而javascript便是ajax最重要的元素之一Javascript有三個部分組成ECMAScript DOM BOMWEB標準網(wǎng)頁主要有三部分組成（結(jié)構(gòu)HTML,XHTML，表現(xiàn)CSS，行為DOM，ECMA）2.ECMA腳本Javascript的語法1. 區(qū)分大小寫

23、2. 弱類型變量 var age=10 var name=”dd”3. 每行結(jié)尾的分號可有可無，但建議還是加上4. 注釋與java相同變量變量是通過var關(guān)鍵字來聲明的。（Variable）變量的命名規(guī)則與java一致注釋有三種：/ /*/ 這個只能注釋單行2.1 javascript的Hello worlddocument.write()是寫在文檔的最前面2.2 slice()、substring()、subtrSlice和substring (2,5) 指的是從第3為開始，?。?-2）=3個數(shù)，其中slice的參數(shù)可以為負Substr（2,5）指的是從第3為開始，取5個數(shù)。但ECMAscr

24、ipt 沒有對該方法進行標準化，因此盡量少使用該方法2.3 indexOf()和lastIndexOf(),isNan,typeOfindexOf（”i”） /從前往后,i在第幾位indexOf（”i”,3）可選參數(shù)，從第幾個字符開始往后找lastIndexOf（”i”） /從后往前,i在第幾位lastIndexOf (”i”,3) /從后往前,i在第幾位如果沒找到，則返回-1String類型的變量，在Java中，用“”符號表示字符串，用表示單個字符。而在javascript中這兩種都可以Nan（not a number）Alert(nan =nan)返回false,因此不推薦使用nan本身，

25、推薦函數(shù)isNanAlert(isNanN(“ab”);/返回falsetypeof運算符var stmp = “test”;alert(typeof stmp); /輸出stringalert(type of 1);/輸出number此外：還有boolean,undefined,object(如果是引用類型或者null值,null值返回object，這其實是ecmascript的一個錯誤)當(dāng)聲明的變量未初始化的時候，它的值就是undefined.當(dāng)沒有這個變量的時候，typeof 變返回的值也是undefined。但是沒聲明的變量是不能參與計算的。當(dāng)函數(shù)無明確返回值時，返回的也是undefi

26、nedFunction a()Alert(a() = undefined) /返回trueAlert(null = undefined)/返回true2.4 數(shù)值計算var mynum1 = 23.345;var mynum2 = 45;var mynum3 = -34;var mynum4 = 9e5;/科學(xué)計數(shù)法 為 9*10五次方var fNumber = 123.456;alert(fNumber.toExponential(1);/保留的小數(shù)點數(shù) 1.2e+2alert(fNumber.toExponential(2);/1.23e+2.5 布爾值var married = true

27、;alert(1. + typeof(married);/Booleanmarried = true;alert(2. + typeof(married);/String.6 類型轉(zhuǎn)換轉(zhuǎn)換成string類型有三種方式var a = 3;var b = a + ;var c = a.toString();var d = student + a;toString()var a=11;document.write(a.toString(2) + );/轉(zhuǎn)成2進制document.write(a.toString(3) + );/轉(zhuǎn)成3進制如果不是數(shù)值，則轉(zhuǎn)換報錯parseInt()document.

28、write(parseInt(1red6) + );/返回1，后面非數(shù)值的將全部忽略document.write(parseInt(53.5) + );/返回53document.write(parseInt(0xC) + );/直接十進制轉(zhuǎn)換12document.write(parseInt(isaacshun) + );/NANdocument.write(parseInt(011,8) + ); 返回9document.write(parseInt(011,10) + );/指定為十進制 返回11parseFloat()與parseInt()類似2.7 數(shù)組var aMap = new

29、Array(China,USA,Britain);aMap20 = Korea;alert(aMap.length + + aMap10 + + aMap20);/aMap10返回undefineddocument.write(aMap.join() + );/用“”來連接var sFruit = apple,pear,peach,orange;var aFruit = sFruit.split(,); var aFruit = apple,pear,peach,orange;alert(aFruit.reverse().toString();var aFruit = pear,apple,p

30、each,orange;aFruit.sort();var stack = new Array();stack.push(red);stack.push(green);stack.push(blue);document.write(stack.toString() + );var vItem = stack.pop(); / bluedocument.write(vItem + );document.write(stack.toString(); / red green2.8 if語句/首先獲取用戶的一個輸入，并用Number()強制轉(zhuǎn)換為數(shù)字var iNumber = Number(prom

31、pt(輸入一個5到100之間的數(shù)字, );/第二個參數(shù),用于顯示輸入框的默認值if(isNaN(iNumber)/判斷輸入的是否是數(shù)字 NaN “Not a Number”document.write(請確認你的輸入正確);else if(iNumber 100 | iNumber 5)/判斷輸入的數(shù)字范圍document.write(你輸入的數(shù)字范圍不在5和100之間);elsedocument.write(你輸入的數(shù)字是: + iNumber);2.9 switchiWeek = parseInt(prompt(輸入1到7之間的整數(shù),);switch(iWeek)case 1:docume

32、nt.write(Monday);break;case 2:document.write(Tuesday);break;case 3:document.write(Wednesday);break;case 4:document.write(Thursday);break;case 5:document.write(Friday);break;case 6:document.write(Saturday);break;case 7:document.write(Sunday);break;default:document.write(Error);2.10 while語句var i=iSum=

33、0;while(i=100)iSum += i;i+;alert(iSum);do.while for break continue (與JAVA語法一致)2.11 函數(shù)function ArgsNum()return arguments.length;document.write(ArgsNum(isaac,25) + );document.write(ArgsNum() + );document.write(ArgsNum(3) + );從這個例子可以看出，方法可以沒有參數(shù)，也可以沒有返回值，但是照樣可以傳入?yún)?shù)和返回值。2.12 Date對象var myDate1 = new Date(

34、);/運行代碼前的時間for(var i=0;i -1;var isKHTML = sUserAgent.indexOf(KHTML) -1 | sUserAgent.indexOf(Konqueror) -1 | sUserAgent.indexOf(AppleWebKit) -1;/檢測IE、Mozillavar isIE = sUserAgent.indexOf(compatible) -1 & sUserAgent.indexOf(MSIE) -1 & !isOpera;var isMoz = sUserAgent.indexOf(Gecko) -1 & !isKHTML;/檢測操作系

35、統(tǒng)var isWin = (navigator.platform = Win32) | (navigator.platform = Windows);var isMac = (navigator.platform = Mac68K) | (navigator.platform = MacPPC) | (navigator.platform = Macintosh);var isUnix = (navigator.platform = X11) & !isWin & !isMac;if(isOpera) document.write(Opera );if(isKHTML) document.wr

36、ite(KHTML );if(isIE) document.write(IE );if(isMoz) document.write(Mozilla );if(isWin) document.write(Windows);if(isMac) document.write(Mac);if(isUnix) document.write(Unix);1.13 Global對象其實isNan，paraseInt等都是Global對象的方法EncodeURI.因為有效的URI不能包含某些字符，如空格。這個方法就是用于將這個字符轉(zhuǎn)換成UTF-8編碼，使瀏覽器可以接受他們。Var suil = “ file/

37、a.html”;Alert(encodeURI(suil);/即將空格編碼成%20Eval方法Eval(“alert(hi)”);當(dāng)解析程序發(fā)現(xiàn)eval()時，它將把參數(shù)解析成真正的ECMA-script語句，然后插入該語句所在位置。Global除了有內(nèi)置方法外，還有很多內(nèi)置的屬性：如：undefined,nan,Array,String,Number，Date，RegExp等1.14 Math對象Max方法，min方法,ceil,floor,round,sqrt,randomMax(1,2,3);min(1.2,3.4);想取到110的數(shù)據(jù)Math.floor(Math.random()*1

38、0+1)29的數(shù)據(jù)Math.floor(Math.random()*9+2);3.1 getElementsByTagNamefunction searchDOM()/放在函數(shù)內(nèi)，頁面加載完成后才用的onload加載，這時如果把alert這句改成用document.write則會把原內(nèi)容覆蓋掉，因為是后面才執(zhí)行的var oLi = document.getElementsByTagName(li);/輸出長度、標簽名稱以及某項的文本節(jié)點值alert(oLi.length + +oLi0.tagName + + oLi3.childNodes0.nodeValue);var oUl = docu

39、ment.getElementsByTagName(ul);var oLi2 = oUl1.getElementsByTagName(li);alert(oLi2.length + +oLi20.tagName + + oLi21.childNodes0.nodeValue);客戶端語言HTMLJavaScriptCSS 服務(wù)器端語言ASP.NETJSPPHP 3.2 getElementByIdvar oLi = document.getElementById(cssLi);oLi.style .backgroundColor=yellow/輸出標簽名稱以及文本節(jié)點值alert(oLi.ta

40、gName + + oLi.childNodes0.nodeValue);3.2 getElementsByNamealert(document.getElementsByName(a).length);3.3 訪問子節(jié)點function myDOMInspector()var oUl = document.getElementById(myList);/獲取標記var DOMString = ;if(oUl.hasChildNodes()/判斷是否有子節(jié)點var oCh = oUl.childNodes;for(var i=0;ioCh.length;i+)/逐一查找DOMString +=

41、 oChi.nodeName + n;alert(DOMString);4訪問父節(jié)點nodeName 如果為文本節(jié)點，則返回#texttagName如果為文本節(jié)點，則返回undefinedfunction myDOMInspector()var myItem = document.getElementById(myDearFood);alert(myItem.parentNode.tagName);function myDOMInspector()var myItem = document.getElementById(myDearFood);var parentElm = myItem.pa

42、rentNode;while(parentElm.className != colorful & parentElm != document.body)parentElm = parentElm.parentNode;/一路往上找alert(parentElm.tagName); 糖醋排骨圓籠粉蒸肉泡菜魚板栗燒雞麻婆豆腐訪問兄弟節(jié)點function myDOMInspector()var myItem = document.getElementById(myDearFood);/訪問兄弟節(jié)點var nextListItem = myItem.nextSibling;var preListIte

43、m = myItem.previousSibling;alert(nextListItem.tagName + + preListItem.tagName);在Firefox中不支持，但是IE中卻是支持的。3.6 第一個 最后一個 子節(jié)點 function nextSib(node)var tempLast = node.parentNode.lastChild;/判斷是否是最后一個節(jié)點，如果是則返回nullif(node = tempLast)return null;var tempObj = node.nextSibling;/逐一搜索后面的兄弟節(jié)點，直到發(fā)現(xiàn)元素節(jié)點為止while(tem

44、pObj.nodeType!=1 & tempObj.nextSibling!=null)tempObj = tempObj.nextSibling;/三目運算符，如果是元素節(jié)點則返回節(jié)點本身，否則返回nullreturn (tempObj.nodeType=1)?tempObj:null;function prevSib(node)var tempFirst = node.parentNode.firstChild;/判斷是否是第一個節(jié)點，如果是則返回nullif(node = tempFirst)return null;var tempObj = node.previousSibling;

45、/逐一搜索前面的兄弟節(jié)點，直到發(fā)現(xiàn)元素節(jié)點為止while(tempObj.nodeType!=1 & tempObj.previousSibling!=null)tempObj = tempObj.previousSibling;return (tempObj.nodeType=1)?tempObj:null;function myDOMInspector()var myItem = document.getElementById(myDearFood);/獲取后一個元素兄弟節(jié)點var nextListItem = nextSib(myItem);/獲取前一個元素兄弟節(jié)點var preList

46、Item = prevSib(myItem);alert(后一項: + (nextListItem!=null)?nextListItem.firstChild.nodeValue:null) + 前一項: + (preListItem!=null)?preListItem.firstChild.nodeValue:null) );nodeType元素element1屬性attr2文本text3注釋comments8文檔document9function showAttr() var btnShowAttr=document.getElementById(btnShowAttr); /演示按鈕

47、，有很多屬性 var attrs=btnShowAttr.attributes; for(var i=0;iattrs.length ;i+) var attr=attrsi; alert(nodeType:+attr.nodeType); /attribute 的nodeType=2 alert(attr:+attr); alert(:++=+attr.value); function showDocument() alert(nodeType:+document.nodeType); /9 alert(nodeName:+document.nodeNam

48、e); alert(document);3.7 getAttribute setAttributefunction myDOMInspector()/獲取圖片var myImg = document.getElementsByTagName(img)0;/獲取圖片title屬性alert(myImg.getAttribute(title);function changePic()/獲取圖片var myImg = document.getElementsByTagName(img)0;/設(shè)置圖片src和title屬性myImg.setAttribute(src,02.jpg);myImg.set

49、Attribute(title,紫荊公寓);3.8創(chuàng)建新節(jié)點function createP()var op = document.createElement(p);var otext = document.createTextNode(HHHHH);op.appendChild(otext);op.setAttribute(style,text-align:center);document.body.appendChild(op);/創(chuàng)建完節(jié)點，就馬上會影響到下面的操作，比如P的數(shù)量就會多1個3.9刪除節(jié)點需要注意的是標簽之間的父子關(guān)系！function deleteP()var oP = document.getElementsByTagName(p)0;oP.parentNode.removeChild(oP);/刪除節(jié)點3.10替換節(jié)點function replaceP()var oOldP = document.getElementsByTagName(p)0;var oNewP = document.createElement(p);/新建節(jié)點var oText = document.createTextNode(這是一個感人肺腑的故事);oNewP.appendChild(oText);oOldP.parentNod