摘要：文檔類型，它位于文檔中最前面的位置，處于標簽之前。如果你想制作符合標準的頁面，一個必不可少的關鍵組成部分就是的聲明。類似的，如果文檔包含的是標記，但是聲明指定是也是不恰當的。如何觸發兩種模式不存在或形式不正確會導致和文檔以混雜模式呈現。

1、DOM結構 —— 兩個節點之間可能存在哪些關系以及如何在節點之間任意移動。

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

2、DOM操作 —— 如何添加、移除、移動、復制、創建和查找節點等。

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

3、事件 —— 如何使用事件，以及IE和標準DOM事件模型之間存在的差別。

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

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

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

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

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

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

2、嚴格的：一種要求嚴格的dtd，不允許使用任何表現層的標識和屬性，嚴格的dtd寫法如下：

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

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

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

3、如何觸發兩種模式
DOCTYPE不存在或形式不正確會導致HTML和XHTML文檔以混雜模式呈現。
觸發嚴格模式:

觸發混雜模式

IE8關閉超標準模式

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

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

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

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

塊級元素，用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 元素必須被關閉，空標簽也必須被關閉，如 
 必須寫成 

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

10、JSON —— 作用、用途、設計結構。
作用用途：
可以轉換為任意語言中的對象，json在開發中的主要用來數據的交互。
json和js對象格式一樣，只不過json字符串中的屬性名必須加雙引號其他得和js語法一致；是一種基于文本，獨立于語言的輕文本交換格式，易于人的閱讀和編寫，也易于機器的解析和生成
用法：
json寫法（結構）：

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


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

json中允許的值，

    1.字符串
    2.數值
    3.布爾值
    4.null
    5.對象
    6.數組

json轉化為js對象用parse方法

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

js對象轉化為json

JSON.stringify()