前端必備基礎

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

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

二、DOM操做 —— 如何添加、移除、移動、複製、建立和查找節點等。

一、建立新節點
createDocumentFragment()  建立一個DOM片斷
creatElement()   建立一個具體的元素
creatTextNode()   建立一個文本節點
二、添加、移除、替換、插入
appendChild()
removeChild()
replaceChild()
insertBefore()  在已有的子節點前插入一個新的子節點
三、查找
getElementsByTagName()  經過標籤名稱
getElementsByName()  經過元素的name屬性的值
getElementById()  經過元素id，惟一性

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

一、關於事件流
（1）ie事件流：事件冒泡
  由事件的目標(event.srcElement)接受事件，而後逐級向上(例如：下一個爲包含event.srcElement的節點傳遞事件，直到文檔節點document)
 (2) 其餘瀏覽器支持的另外一種事件流：事件捕獲
  與事件冒泡正好相反，文檔節點document先監聽到事件，而後把事件逐級向下傳遞事件，直到節點目標節點event.target
 (3) dom事件流
   dom2級事件規範的事件流綜合了以上兩種，把事件流分爲了如下三個階段：
   
   1、事件捕獲階段：不涉及事件目標，或者說這個階段在目標以前就結束了
   2、處於目標階段：被看做冒泡階段的一部分，因此能夠在冒泡階段在目標事件上操做事件
   3、事件冒泡階段
  (4) 規範和瀏覽器實現的差異
    dom2級事件規範的捕獲階段，事件從文檔節點document開始傳播，現代瀏覽器大多數是從window對象開始傳播事件的
    dom2級事件規範捕獲階段不涉及事件目標，現代瀏覽器大多數都在這個階段包含事件目標
二、如何使用事件？如下幾種用來響應事件的事件處理程序
   html事件處理程序|dom0級事件處理程序|dom2級事件處理程序|ie的事件處理程序
   html事件處理程序：
     指定事件：<button type="button" onclick="alert('響應事件的處javascript代碼，能夠用全局的函數')">Click Me!</button>
     優缺點:簡單，可是與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);
       若是指定的處理程序是匿名函數則不能刪除，由於沒有函數名;
       優缺點:能夠添加多個監聽事件，缺點必須指定函數名才能刪除
三、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 //事件目標

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

一、關於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));
二、一次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可取的值：

五、嚴格模式與混雜模式 —— 如何觸發這兩種模式，區分它們有何意義。
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也是不恰當的。
1、選擇什麼樣的DOCTYPE?
xhtml 1.0中有3種dtd聲明能夠選擇，過渡性的(Transitional)、嚴格的(Strict)、框架的(Frameset)。下面咱們來分別介紹：
一、過渡的：一種要求不很嚴格的，容許在html中使用html 4.01的標識(符合xhtml語法標準)，過渡的dtd寫法以下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

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

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

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

<!-- HTML 4.01 嚴格型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">

<!-- XHTML 1.0 嚴格型 -->
<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

觸發混雜模式

<!-- HTML 4.01 過渡型 -->
<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">

<!-- HTML 4.01 框架集型 -->
<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01 Frameset//EN"  "http://www.w3.org/TR/html4/frameset.dtd"> 

<!-- XHTML 1.0 過渡型 -->
<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!-- XHTML 1.0 框架集型 -->
<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Frameset//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

IE8關閉超標準模式

<meta http-equiv="X-UA-Compatible" content="IE=7" />
content屬性中IE的值用於指定使用哪一個版本的呈現引擎來呈現頁面。設計這個值的目的就是爲了向後兼容那些專門爲老版本的IE設計的站點和頁面。

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

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

七、塊級元素與行內元素 —— 怎麼用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;屬性則變爲塊級元素
影響：周圍元素顯示在同一行或換行顯示，根據具體狀況調整樣式

八、浮動元素 —— 怎麼使用它們、它們有什麼問題以及怎麼解決這些問題。
須要浮動的元素可以使用CSS中float屬性來定義元素的浮動位置，left：往左浮動，right：往右浮動
浮動元素引發的問題：
（1）父元素的高度沒法被撐開，影響與父元素同級的元素
（2）與浮動元素同級的非浮動元素會跟隨其後
（3）若非第一個元素浮動，則該元素以前的元素也須要浮動，不然會影響頁面顯示的結構
解決方法：使用CSS中的clear:both;屬性來清除元素的浮動可解決二、3問題，對於問題1，添加以下樣式，給父元素添加clearfix樣式：

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

九、HTML與XHTML —— 兩者有什麼區別，你以爲應該使用哪個並說出理由。
主要區別：

XHTML 元素必須被正確地嵌套
 XHTML 元素必須被關閉，空標籤也必須被關閉，如 <br> 必須寫成 <br />
 XHTML 標籤名必須用小寫字母
 XHTML 文檔必須擁有根元素
 XHTML 文檔要求給全部屬性賦一個值
 XHTML 要求全部的屬性必須用引號""括起來
 XHTML 文檔須要把全部 < 、>、& 等特殊符號用編碼表示
 XHTML 文檔不要在註釋內容中使「--」
 XHTML 圖片必須有說明文字
 XHTML 文檔中用id屬性代替name屬性

十、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()