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

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

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

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

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

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

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

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

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

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

switch(xhr.readyState){
  case 0 : alert("未初始化，及還未調(diào)用open方法");
           break;
  case 1 : alert("啟動，未調(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)//啟動一個請求，未發(fā)送
xhr.send(null);//發(fā)送請求. 如果該請求是異步模式(默認),該方法會立刻返回. 相反,如果請求是同步模式,則直到請求的響應(yīng)完全接受以后,該方法才會返回
XMLHttpRequest.readyState可取的值：

5、嚴(yán)格模式與混雜模式 —— 如何觸發(fā)這兩種模式，區(qū)分它們有何意義。
Doctype：(Document Type)文檔類型，它位于文檔中最前面的位置，處于標(biāo)簽之前。如果你想制作符合標(biāo)準(zhǔn)的頁面，一個必不可少的關(guān)鍵組成部分就是DOCTYPE的聲明。確定了正確的Doctype，xhtml里面的標(biāo)識和css才能正常生效(也就是說它會很負責(zé)地告訴瀏覽器怎么解釋你的這個標(biāo)簽和你寫的css)。既然它是一種聲明，它的責(zé)任就是告訴瀏覽器文檔使用哪種html或者xhtml規(guī)范。為了獲取正確的Doctype聲明，關(guān)鍵就是讓dtd與文檔所遵循的標(biāo)準(zhǔn)對應(yīng)。例如：假定文檔遵循的是xhtml 1.0 strict,那么文檔的Doctype聲明就應(yīng)該是相應(yīng)的dtd,如果Doctype聲明指定的是xhtml dtd，但文檔包含的依舊是html標(biāo)記就是不恰當(dāng)?shù)摹ｎ愃频模绻臋n包含的是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)識(符合xhtml語法標(biāo)準(zhǔn))，過渡的dtd寫法如下：

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

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

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

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

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

觸發(fā)混雜模式

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

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

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

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

7、塊級元素與行內(nèi)元素 —— 怎么用CSS控制它們、以及如何合理的使用它們
1.塊級元素：每個塊級元素默認占一行高度，若有塊級元素則同行無法再添加其他元素（float浮動除外）
特點：高度行高以及外邊距內(nèi)邊距都可控制 寬度默認100% 可以容納內(nèi)聯(lián)元素及塊元素
2.行內(nèi)元素：可以和其他元素都在一行上.
特點：寬度就是它的文本或圖片的寬度，不可改變 內(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)元素與塊狀元素的特性，但是各有取舍
特點：不自動換行 能夠識別寬高 默認排列方式從左到右
4.塊級元素有哪些：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

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

8、浮動元素 —— 怎么使用它們、它們有什么問題以及怎么解決這些問題。
需要浮動的元素可使用CSS中float屬性來定義元素的浮動位置，left：往左浮動，right：往右浮動
浮動元素引起的問題：
（1）父元素的高度無法被撐開，影響與父元素同級的元素
（2）與浮動元素同級的非浮動元素會跟隨其后
（3）若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結(jié)構(gòu)
解決方法：使用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 —— 二者有什么區(qū)別，你覺得應(yīng)該使用哪一個并說出理由。
主要區(qū)別：

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

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

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

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

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

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

JSON.stringify()