摘要：文檔類型，它位于文檔中最前面的位置，處于標(biāo)簽之前。如果你想制作符合標(biāo)準(zhǔn)的頁面，一個(gè)必不可少的關(guān)鍵組成部分就是的聲明。類似的，如果文檔包含的是標(biāo)記，但是聲明指定是也是不恰當(dāng)?shù)?。如何觸發(fā)兩種模式不存在或形式不正確會(huì)導(dǎo)致和文檔以混雜模式呈現(xiàn)。

1、DOM結(jié)構(gòu) —— 兩個(gè)節(jié)點(diǎn)之間可能存在哪些關(guān)系以及如何在節(jié)點(diǎn)之間任意移動(dòng)。

1、包含與被包含
A.contains(B)檢測(cè)B節(jié)點(diǎn)是否是A節(jié)點(diǎn)的子節(jié)點(diǎn)，返回布爾值
2、父與子
獲取父節(jié)點(diǎn)：node.parentNode,node.parentElement,兩者區(qū)別在于后者只能獲取元素
獲取子節(jié)點(diǎn)：childNodes(NodeList對(duì)象存在的子節(jié)點(diǎn)集合),firstChild,lastChild
3、同輩（兄弟節(jié)點(diǎn)）
nextSibling,previousSibling
4、Element Travel API給DOM添加的屬性
childElementCount,firstElementChild,lastElementChild,nextElementSilbling,previousElementSibling,他們與之前的方法的區(qū)別是多了Element，保證只返回元素節(jié)點(diǎn)，而之前的方法普通的文本節(jié)點(diǎn)及注釋節(jié)點(diǎn)也會(huì)返回，之前的方法在非IE瀏覽器中還會(huì)把元素之間的空白符當(dāng)文本節(jié)點(diǎn)返回
5、children屬性
與childNodes不同的地方在于：children只包含元素子節(jié)點(diǎn)

2、DOM操作 —— 如何添加、移除、移動(dòng)、復(fù)制、創(chuàng)建和查找節(jié)點(diǎn)等。

1、創(chuàng)建新節(jié)點(diǎn)
createDocumentFragment()  創(chuàng)建一個(gè)DOM片段
creatElement()   創(chuàng)建一個(gè)具體的元素
creatTextNode()   創(chuàng)建一個(gè)文本節(jié)點(diǎn)
2、添加、移除、替換、插入
appendChild()
removeChild()
replaceChild()
insertBefore()  在已有的子節(jié)點(diǎn)前插入一個(gè)新的子節(jié)點(diǎn)
3、查找
getElementsByTagName()  通過標(biāo)簽名稱
getElementsByName()  通過元素的name屬性的值
getElementById()  通過元素id，唯一性

3、事件 —— 如何使用事件，以及IE和標(biāo)準(zhǔn)DOM事件模型之間存在的差別。

1、關(guān)于事件流
（1）ie事件流：事件冒泡
  由事件的目標(biāo)(event.srcElement)接受事件，然后逐級(jí)向上(例如：下一個(gè)為包含event.srcElement的節(jié)點(diǎn)傳遞事件，直到文檔節(jié)點(diǎn)document)
 (2) 其他瀏覽器支持的另一種事件流：事件捕獲
  與事件冒泡正好相反，文檔節(jié)點(diǎn)document先監(jiān)聽到事件，然后把事件逐級(jí)向下傳遞事件，直到節(jié)點(diǎn)目標(biāo)節(jié)點(diǎn)event.target
 (3) dom事件流
   dom2級(jí)事件規(guī)范的事件流綜合了以上兩種，把事件流分為了以下三個(gè)階段：
   
   一、事件捕獲階段：不涉及事件目標(biāo)，或者說這個(gè)階段在目標(biāo)之前就結(jié)束了
   二、處于目標(biāo)階段：被看作冒泡階段的一部分，所以可以在冒泡階段在目標(biāo)事件上操作事件
   三、事件冒泡階段
  (4) 規(guī)范和瀏覽器實(shí)現(xiàn)的差別
    dom2級(jí)事件規(guī)范的捕獲階段，事件從文檔節(jié)點(diǎn)document開始傳播，現(xiàn)代瀏覽器大多數(shù)是從window對(duì)象開始傳播事件的
    dom2級(jí)事件規(guī)范捕獲階段不涉及事件目標(biāo)，現(xiàn)代瀏覽器大多數(shù)都在這個(gè)階段包含事件目標(biāo)
2、如何使用事件？以下幾種用來響應(yīng)事件的事件處理程序
   html事件處理程序|dom0級(jí)事件處理程序|dom2級(jí)事件處理程序|ie的事件處理程序
   html事件處理程序：
     指定事件：Click Me!
     優(yōu)缺點(diǎn):簡(jiǎn)單，但是與HTML代碼緊密耦合，更改不方便;
     刪除事件:同DOM0的刪除事件處理方式;
   dom0級(jí)事件處理程序
      指定事件：document.onclick = function(){alert("document has been clicked")};
      優(yōu)缺點(diǎn):簡(jiǎn)單且跨瀏覽器
      刪除事件:document.onclick = null;
      實(shí)質(zhì): 為元素指定方法(栗子中為document指定onclick方法)，移除方法，所以其處理程序是在元素的作用域運(yùn)行的；
   dom2級(jí)事件處理程序：
       指定事件:addEventListener("引號(hào)括起來的事件名"， 觸發(fā)事件后調(diào)用的事件處理程序, 是否在捕獲節(jié)點(diǎn)調(diào)用時(shí)間處理程序的布爾值)
       栗子:var funA = function(){alert(" DOM2級(jí)事件處理程序")};
      document.addEventListener("click", funA, false);
      刪除事件: document.removeEventListener("click", funA, false);
      如果指定的處理程序是匿名函數(shù)則不能刪除，因?yàn)闆]有函數(shù)名;
      優(yōu)缺點(diǎn): 可以添加多個(gè)監(jiān)聽事件，缺點(diǎn)必須指定函數(shù)名才能刪除
   ie事件處理程序（IE11以下，IE11及Edge用的DOM2級(jí)事件處理程序）
       指定事件: attachEvent("onclick", function(){alert("is no longer supported in ie11")});
       刪除事件: detachEvent("onclick", funA);
       如果指定的處理程序是匿名函數(shù)則不能刪除，因?yàn)闆]有函數(shù)名;
       優(yōu)缺點(diǎn):可以添加多個(gè)監(jiān)聽事件，缺點(diǎn)必須指定函數(shù)名才能刪除
3、ie和標(biāo)準(zhǔn)dom事件模型之間存在的差別
   這里的IE是IE11以下;
   參數(shù)的差別: attachEvent()的第一個(gè)參數(shù)比addEventListener()的事件名多一個(gè)"on"，且沒有第三個(gè)參數(shù)，因?yàn)镮E事件模型只支持冒泡事件流;
   事件處理函數(shù)作用域的區(qū)別: IE中事件處理程序處于全局作用域，其內(nèi)的this會(huì)指向window;而用DOM（0或2）級(jí)事件的事件處理程序的作用域是元素作用域，其內(nèi)的this指向其所屬的元素
   例：
   document.addEventListener("click", function(){ 
        if(this == document){
          alert("此時(shí)this指向document");
        }
      }, false);
   事件對(duì)象event的屬性方法的差別
   IE                     DOM
   cancelBubble = true    stopPropagation() //停止冒泡
   returnValue = false    preventDefault() //阻止元素默認(rèn)事件
   srcEelement            target //事件目標(biāo)

4、XMLHttpRequest —— 這是什么、怎樣完整地執(zhí)行一次GET請(qǐng)求、怎樣檢測(cè)錯(cuò)誤。

1、關(guān)于XMLHttpRequest
  作用：提供了網(wǎng)頁加載后在后臺(tái)與服務(wù)器通信的方法;實(shí)現(xiàn)AJAX通信;
  創(chuàng)建: var xhr = new XMLHttpRequest();//不適用于IE7之前的版本，其他低版本IE可通過 ActiveXObject構(gòu)造;
  readyState,可取的值見圖
  對(duì)象事件: readyState的值的改變會(huì)觸發(fā)readyStatechange事件;錯(cuò)誤會(huì)觸發(fā)error事件；
  優(yōu)缺點(diǎn): 在不重新加載頁面的情況下更新網(wǎng)頁;
  XMLHttpRequest 2級(jí):
  FromData對(duì)象:用來序列化表單或者創(chuàng)建與表單格式相同的數(shù)據(jù);其實(shí)例可直接傳給send()方法使用;
  例：
  var form1 = document.forms[0];
  xhr.send(new FormData(form1));
2、一次GET請(qǐng)求分析,并檢測(cè)執(zhí)行過程
   異步GET
   var xhr = new XMLHttpRequest();

xhr.onerror = function(){alert("我出錯(cuò)啦")};
xhr.onreadystatechange = function(){

switch(xhr.readyState){
  case 0 : alert("未初始化，及還未調(diào)用open方法");
           break;
  case 1 : alert("啟動(dòng)，未調(diào)用send方法");
           break;
  case 2 : alert("發(fā)送，未收到響應(yīng)");
           break;
  case 3 : alert("接受，取得部分?jǐn)?shù)據(jù)");
           break;
  case 4 : if((xhr.status >=200 && xhr.status < 300) || xhr.status ==304){
            alert(xhr.responceText);
           };
            break;
  default : alert("are you kidding?");
  }
};
xhr.open("get", "url", true)//啟動(dòng)一個(gè)請(qǐng)求，未發(fā)送
xhr.send(null);//發(fā)送請(qǐng)求. 如果該請(qǐng)求是異步模式(默認(rèn)),該方法會(huì)立刻返回. 相反,如果請(qǐng)求是同步模式,則直到請(qǐng)求的響應(yīng)完全接受以后,該方法才會(huì)返回
XMLHttpRequest.readyState可取的值：

5、嚴(yán)格模式與混雜模式 —— 如何觸發(fā)這兩種模式，區(qū)分它們有何意義。
Doctype：(Document Type)文檔類型，它位于文檔中最前面的位置，處于標(biāo)簽之前。如果你想制作符合標(biāo)準(zhǔn)的頁面，一個(gè)必不可少的關(guān)鍵組成部分就是DOCTYPE的聲明。確定了正確的Doctype，xhtml里面的標(biāo)識(shí)和css才能正常生效(也就是說它會(huì)很負(fù)責(zé)地告訴瀏覽器怎么解釋你的這個(gè)標(biāo)簽和你寫的css)。既然它是一種聲明，它的責(zé)任就是告訴瀏覽器文檔使用哪種html或者xhtml規(guī)范。為了獲取正確的Doctype聲明，關(guān)鍵就是讓dtd與文檔所遵循的標(biāo)準(zhǔn)對(duì)應(yīng)。例如：假定文檔遵循的是xhtml 1.0 strict,那么文檔的Doctype聲明就應(yīng)該是相應(yīng)的dtd,如果Doctype聲明指定的是xhtml dtd，但文檔包含的依舊是html標(biāo)記就是不恰當(dāng)?shù)?。類似的，如果文檔包含的是xhtml 1.0 strict標(biāo)記，但是Doctype聲明指定是html dtd也是不恰當(dāng)?shù)摹?br> 一、選擇什么樣的DOCTYPE?
xhtml 1.0中有3種dtd聲明可以選擇，過渡性的(Transitional)、嚴(yán)格的(Strict)、框架的(Frameset)。下面我們來分別介紹：
1、過渡的：一種要求不很嚴(yán)格的，允許在html中使用html 4.01的標(biāo)識(shí)(符合xhtml語法標(biāo)準(zhǔn))，過渡的dtd寫法如下：

2、嚴(yán)格的：一種要求嚴(yán)格的dtd，不允許使用任何表現(xiàn)層的標(biāo)識(shí)和屬性，嚴(yán)格的dtd寫法如下：

3、框架的：一種專門針對(duì)框架頁面所使用的dtd，當(dāng)頁面中含有框架元素時(shí)，就要采用這種dtd，寫法如下：

PS：使用嚴(yán)格的dtd來制作頁面當(dāng)然是最理想的方式，但是對(duì)于還沒有深入了解web標(biāo)準(zhǔn)的網(wǎng)頁設(shè)計(jì)者，比較適合用過渡的dtd，因?yàn)檫@種dtd還允許使用表現(xiàn)層的標(biāo)識(shí)、元素和屬性，比較適合大多數(shù)的網(wǎng)頁制作人員(當(dāng)然量力而為了!)
二、什么是標(biāo)準(zhǔn)模式與混雜模式？
不同文檔模式主要影響CSS內(nèi)容的呈現(xiàn)，尤其是瀏覽器對(duì)盒模型的解析，但在某些情況下也會(huì)影響到JavaScript的解釋執(zhí)行。
1、文檔模式目前有四種：
混雜模式（quirks mode）//讓IE的行為與（包含非標(biāo)準(zhǔn)特性的）IE5相同
標(biāo)準(zhǔn)模式（standards mode）//讓IE的行為更接近標(biāo)準(zhǔn)行為
準(zhǔn)標(biāo)準(zhǔn)模式（almost standards mode）//這種模式下的瀏覽器特性有很多都是符合標(biāo)準(zhǔn)的，不標(biāo)準(zhǔn)的地方主要體現(xiàn)在處理圖片間隙的時(shí)候（在表格中使用圖片時(shí)問題最明顯）。
超級(jí)標(biāo)準(zhǔn)模式 //IE8引入的一種新的文檔模式，超級(jí)文檔模式可以讓IE以其所有版本中最符合標(biāo)準(zhǔn)的方式來解釋網(wǎng)頁內(nèi)容。
ps：
總的來看，混雜模式讓IE像IE5，標(biāo)準(zhǔn)模式使用IE7的呈現(xiàn)引擎，而超級(jí)標(biāo)準(zhǔn)模式則是IE8的默認(rèn)文檔模式。
2、兩種模式間的差異
對(duì)于這兩種模式之間的差異，最顯著的一個(gè)例子與Windows上IE專有的盒模型有關(guān)。在IE 6出現(xiàn)時(shí)，在標(biāo)準(zhǔn)模式中使用的是正確的盒模型，在混雜模式中使用的則是老式的專有盒模型。為了維持對(duì)IE 5和更低版本的向后兼容性，Opera 7和更高版本也在混雜模式中使用有缺點(diǎn)的IE盒模型。

呈現(xiàn)方面的其他差異比較小，而且是與特定瀏覽器相關(guān)的，包括對(duì)于十六進(jìn)制顏色值不需要#號(hào)、假設(shè)CSS中沒有指定單位的長(zhǎng)度的單位是像素，以及在使用關(guān)鍵字時(shí)將字號(hào)增加一級(jí)。

3、如何觸發(fā)兩種模式
DOCTYPE不存在或形式不正確會(huì)導(dǎo)致HTML和XHTML文檔以混雜模式呈現(xiàn)。
觸發(fā)嚴(yán)格模式:

觸發(fā)混雜模式

IE8關(guān)閉超標(biāo)準(zhǔn)模式

content屬性中IE的值用于指定使用哪個(gè)版本的呈現(xiàn)引擎來呈現(xiàn)頁面。設(shè)計(jì)這個(gè)值的目的就是為了向后兼容那些專門為老版本的IE設(shè)計(jì)的站點(diǎn)和頁面。

6、盒模型 —— 外邊距、內(nèi)邊距和邊框之間的關(guān)系，及IE8以下版本的瀏覽器中的盒模型
1、w3c盒模型（標(biāo)準(zhǔn)盒模型）
通過在文檔頂部加doctype聲明就會(huì)按.W3C盒模型顯示;整體見下圖

2、ie8以下版本的瀏覽器中的盒模型（ie盒子模型）
IE8以下瀏覽器的盒模型中定義的元素的寬高包括內(nèi)邊距和邊框
設(shè)置box-sizing：border-box可以讓寬度高度包含border盒padding

7、塊級(jí)元素與行內(nèi)元素 —— 怎么用CSS控制它們、以及如何合理的使用它們
1.塊級(jí)元素：每個(gè)塊級(jí)元素默認(rèn)占一行高度，若有塊級(jí)元素則同行無法再添加其他元素（float浮動(dòng)除外）
特點(diǎn)：高度行高以及外邊距內(nèi)邊距都可控制 寬度默認(rèn)100% 可以容納內(nèi)聯(lián)元素及塊元素
2.行內(nèi)元素：可以和其他元素都在一行上.
特點(diǎn)：寬度就是它的文本或圖片的寬度，不可改變 內(nèi)聯(lián)元素只能容納文本或者其他的內(nèi)聯(lián)元素 設(shè)置寬度width無效 設(shè)置高度height無效，可通過line-height來設(shè)置 設(shè)置margin只有左右有效，上下無效 設(shè)置padding只有左右padding有效，上下無效
3.行內(nèi)塊狀元素：綜合了行內(nèi)元素與塊狀元素的特性，但是各有取舍
特點(diǎn)：不自動(dòng)換行 能夠識(shí)別寬高 默認(rèn)排列方式從左到右
4.塊級(jí)元素有哪些：div | dl(定義列表) | h1(h開頭系列) | hr | menu | ol | p | table | ul
5.行內(nèi)元素有哪些：a | b | br | em | i | img | input | label | select | span | strong|sub | textarea | u
6.行內(nèi)塊狀元素有哪些：button | del | iframe | ins | map | object

塊級(jí)元素，用CSS中的display:inline;屬性則變?yōu)樾袃?nèi)元素
行內(nèi)元素，用CSS中的display:block;屬性則變?yōu)閴K級(jí)元素
影響：周圍元素顯示在同一行或換行顯示，根據(jù)具體情況調(diào)整樣式

8、浮動(dòng)元素 —— 怎么使用它們、它們有什么問題以及怎么解決這些問題。
需要浮動(dòng)的元素可使用CSS中float屬性來定義元素的浮動(dòng)位置，left：往左浮動(dòng)，right：往右浮動(dòng)
浮動(dòng)元素引起的問題：
（1）父元素的高度無法被撐開，影響與父元素同級(jí)的元素
（2）與浮動(dòng)元素同級(jí)的非浮動(dòng)元素會(huì)跟隨其后
（3）若非第一個(gè)元素浮動(dòng)，則該元素之前的元素也需要浮動(dòng)，否則會(huì)影響頁面顯示的結(jié)構(gòu)
解決方法：使用CSS中的clear:both;屬性來清除元素的浮動(dòng)可解決2、3問題，對(duì)于問題1，添加如下樣式，給父元素添加clearfix樣式：

.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{display: inline-block;}  /* for IE/Mac */

9、HTML與XHTML —— 二者有什么區(qū)別，你覺得應(yīng)該使用哪一個(gè)并說出理由。
主要區(qū)別：

 XHTML 元素必須被正確地嵌套
 XHTML 元素必須被關(guān)閉，空標(biāo)簽也必須被關(guān)閉，如 
 必須寫成 

 XHTML 標(biāo)簽名必須用小寫字母
 XHTML 文檔必須擁有根元素
 XHTML 文檔要求給所有屬性賦一個(gè)值
 XHTML 要求所有的屬性必須用引號(hào)""括起來
 XHTML 文檔需要把所有 < 、>、& 等特殊符號(hào)用編碼表示
 XHTML 文檔不要在注釋內(nèi)容中使“--”
 XHTML 圖片必須有說明文字
 XHTML 文檔中用id屬性代替name屬性

10、JSON —— 作用、用途、設(shè)計(jì)結(jié)構(gòu)。
作用用途：
可以轉(zhuǎn)換為任意語言中的對(duì)象，json在開發(fā)中的主要用來數(shù)據(jù)的交互。
json和js對(duì)象格式一樣，只不過json字符串中的屬性名必須加雙引號(hào)其他得和js語法一致；是一種基于文本，獨(dú)立于語言的輕文本交換格式，易于人的閱讀和編寫，也易于機(jī)器的解析和生成
用法：
json寫法（結(jié)構(gòu)）：

var json1 = {
    "username":"smally",
    "age":20
}


var json2 = [
    {"username":"smally","age":20},
    {"username":"liuteng","age":20},
    {"username":"lizhongshuo","age":20}
]

json中允許的值，

    1.字符串
    2.數(shù)值
    3.布爾值
    4.null
    5.對(duì)象
    6.數(shù)組

json轉(zhuǎn)化為js對(duì)象用parse方法

var o=JSON.parse(json);
console.log(o.name);

js對(duì)象轉(zhuǎn)化為json

JSON.stringify()