今天小編看到一篇博文《發現一篇不錯的博文,和大家分享一下,爲有志成爲一名優秀前端工程師的童鞋們提供一個》其中有這樣幾個問題。
1、DOM結構 —— 兩個節點之間可能存在哪些關係以及如何在節點之間任意移動。 2、DOM操作 ——如何添加、移除、移動、複製、創建和查找節點等。 3、事件 —— 如何使用事件,以及IE和標準DOM事件模型之間存在的差別。 4、XMLHttpRequest —— 這是什麼、怎樣完整地執行一次GET請求、怎樣檢測錯誤。 5、嚴格模式與混雜模式 —— 如何觸發這兩種模式,區分它們有何意義。 6、盒模型 —— 外邊距、內邊距和邊框之間的關係,及IE8以下版本的瀏覽器中的盒模型 7、塊級元素與行內元素 —— 怎麼用CSS控制它們、以及如何合理的使用它們 8、浮動元素——怎麼使用它們、它們有什麼問題以及怎麼解決這些問題。 9、HTML與XHTML——二者有什麼區別,你覺得應該使用哪一個並說出理由。 10、JSON —— 作用、用途、設計結構。
下面對這些解析:
1、DOM結構——兩個節點之間可能存在哪些關係以及如何在節點之間任意移動。 document.documentElement 返回文檔的根節點<html> document.body <body> document.activeElement 返回當前文檔中被擊活的標籤節點(ie) event.fromElement 返回鼠標移出的源節點(ie) event.toElement 返回鼠標移入的源節點(ie) event.srcElement 返回激活事件的源節點(ie) event.target 返回激活事件的源節點(firefox) 當前對象爲node 返回父節點:node.parentNode, node.parendElement, 返回所有子節點:node.childNodes(包含文本節點及標籤節點),node.children 返回第一個子節點:node.firstChild 返回最後一個子節點: node.lastChild 返回同屬上一個子節點:node.nextSibling 返回同屬下一個子節點:node.previousSibling parentNode和parentElement功能一樣,childNodes和children功能一樣。但是parentNode和 childNodes是符合W3C標準的,可以說比較通用。而另外兩個只是IE支持,不是標準,Firefox就不支持 ,所以大家只要記得有parentElement和children就行了 2、DOM操作——怎樣添加、移除、移動、複製、創建和查找節點。 (1)創建新節點 createDocumentFragment() //創建一個DOM片段 createElement() //創建一個具體的元素 createTextNode() //創建一個文本節點 (2)添加、移除、替換、插入 appendChild() removeChild() replaceChild() insertBefore() (3)查找 getElementsByTagName() //通過標籤名稱 getElementsByName() //通過元素的Name屬性的值 getElementById() //通過元素Id,唯一性 3、事件——怎樣使用事件以及IE和DOM事件模型之間存在哪些主要差別。 (1)冒泡型事件:事件按照從最特定的事件目標到最不特定的事件目標(document對象)的順序觸發。 IE 5.5: div -> body -> document IE 6.0: div -> body -> html -> document Mozilla 1.0: div -> body -> html -> document -> window (2)捕獲型事件(event capturing):事件從最不精確的對象(document 對象)開始觸發,然後到最精確(也可以在窗口級別捕獲事件,不過必須由開發人員特別指定)。 (3)DOM事件流:同時支持兩種事件模型:捕獲型事件和冒泡型事件,但是,捕獲型事件先發生。兩種事件流會觸及DOM中的所有對象,從document對象開始,也在document對象結束。 DOM事件模型最獨特的性質是,文本節點也觸發事件(在IE中不會)。 4、XMLHttpRequest——這是什麼、怎樣完整地執行一次GET請求、怎樣檢測錯誤。 XMLHttpRequest 對象提供了在網頁加載後與服務器進行通信的方法。 <script type="text/javascript"> varxmlhttp; functionloadXMLDoc(url){ xmlhttp=null; if(window.XMLHttpRequest){ //code for all new browsers xmlhttp=newXMLHttpRequest(); }elseif(window.ActiveXObject){ //code for IE5 and IE6 xmlhttp=newActiveXObject("Microsoft.XMLHTTP"); } if(xmlhttp!=null){ xmlhttp.onreadystatechange=state_Change; xmlhttp.open("GET",url,true); xmlhttp.send(null); }else{ alert("Your browser does not support XMLHTTP."); } } functionstate_Change(){ if(xmlhttp.readyState==4){ //4 = "loaded" if(xmlhttp.status==200){ //200 = OK //...our code here... }else{ alert("Problem retrieving XML data"); } } } </script> 5、嚴格模式與混雜模式——如何觸發這兩種模式,區分它們有何意義。 在標準模式中,瀏覽器根據規範呈現頁面; 在混雜模式中,頁面以一種比較寬鬆的向後兼容的方式顯示。 瀏覽器根據DOCTYPE是否存在以及使用的哪種DTD來選擇要使用的呈現方法。如果XHTML文檔包含形式完整的DOCTYPE,那麼它一般以標準模式 呈現。對於HTML 4.01文檔,包含嚴格DTD的DOCTYPE常常導致頁面以標準模式呈現。包含過渡DTD和URI的DOCTYPE也導致頁面以標準模式呈現,但是有過 渡DTD而沒有URI會導致頁面以混雜模式呈現。DOCTYPE不存在或形式不正確會導致HTML和XHTML文檔以混雜模式呈現。 6、盒模型——外邊距、內邊距和邊框之間的關係,IE 8以下版本的瀏覽器中的盒模型有什麼不同。 一個元素盒模型的層次從內到外分別爲:內邊距、邊框和外邊距 IE8以下瀏覽器的盒模型中定義的元素的寬高不包括內邊距和邊框 7、塊級元素與行內元素——怎麼用CSS控制它們、它們怎樣影響周圍的元素以及你覺得應該如何定義它們的樣式。 塊級元素,用CSS中的display:inline;屬性則變爲行內元素 行內元素,用CSS中的display:block;屬性則變爲塊級元素 影響:周圍元素顯示在同一行或換行顯示,根據具體情況調整樣式 8、浮動元素——怎麼使用它們、它們有什麼問題以及怎麼解決這些問題。 需要浮動的元素可使用CSS中float屬性來定義元素的浮動位置,left:往左浮動,right:往右浮動 浮動元素引起的問題: (1)父元素的高度無法被撐開,影響與父元素同級的元素 (2)與浮動元素同級的非浮動元素會跟隨其後 (3)若非第一個元素浮動,則該元素之前的元素也需要浮動,否則會影響頁面顯示的結構 解決方法: 使用CSS中的clear:both;屬性來清除元素的浮動可解決2、3問題,對於問題1,添加如下樣式,給父元素添加clearfix樣式: .clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;} .clearfix{display: inline-block;} /* for IE/Mac */ 9、HTML與XHTML——二者有什麼區別,你覺得應該使用哪一個並說出理由。 主要區別: XHTML 元素必須被正確地嵌套 XHTML 元素必須被關閉,空標籤也必須被關閉,如 <br> 必須寫成 <br /> XHTML 標籤名必須用小寫字母 XHTML 文檔必須擁有根元素 XHTML 文檔要求給所有屬性賦一個值 XHTML 要求所有的屬性必須用引號""括起來 XHTML 文檔需要把所有 < 、>、& 等特殊符號用編碼表示 XHTML 文檔不要在註釋內容中使“--” XHTML 圖片必須有說明文字 XHTML 文檔中用id屬性代替name屬性 10、JSON——它是什麼、爲什麼應該使用它、到底該怎麼使用它,說出實現細節來。 JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。易於人閱讀和編寫。同時也易於機器解析和生成。 JSON建構於兩種結構: “名稱/值”對的集合(A collection of name/value pairs)。不同的語言中,它被理解爲對象(object),紀錄(record),結構(struct),字典(dictionary),哈希表 (hash table),有鍵列表(keyed list),或者關聯數組 (associative array)。 值的有序列表(An ordered list of values)。在大部分語言中,它被理解爲數組(array)。以上是我搜集的答案。 這裏只是先記錄一下。