題目1： dom對(duì)象的innerText和innerHTML有什么區(qū)別？

innerText是一個(gè)可寫屬性，返回元素內(nèi)包含的文本內(nèi)容，在多層次的時(shí)候會(huì)按照元素由淺到深的順序拼接其內(nèi)容
innerHTML屬性作用和innerText類似，但是不是返回元素的文本內(nèi)容，而是返回元素的HTML結(jié)構(gòu)，在寫入的時(shí)候也會(huì)自動(dòng)構(gòu)建DOM
例：

題目2： elem.children和elem.childNodes的區(qū)別？

elem.children（HTMLCoolection）：返回HTML的元素子節(jié)點(diǎn)，是HTMLCollection的實(shí)例；
elem.childNodes（NodeList）：返回元素中的所有子節(jié)點(diǎn)（包括空白文本節(jié)點(diǎn)），childNodes中保存著一個(gè)NodeList類數(shù)組對(duì)象（有l(wèi)ength屬性但并不是Array的實(shí)例），可通過(guò)方括號(hào)語(yǔ)法來(lái)訪問(wèn)NodeList的值。

題目3：查詢?cè)赜袔追N常見(jiàn)的方法？ES5的元素選擇方法是什么?

• getElementById方法返回匹配指定ID屬性的元素節(jié)點(diǎn)。如果沒(méi)有發(fā)現(xiàn)匹配的節(jié)點(diǎn)，則返回null。這也是獲取一個(gè)元素最快的方法
  使用方法：var elem = document.getElementById("test");

• getElementsByClassName方法返回一個(gè)類似數(shù)組的對(duì)象（HTMLCollection類型的對(duì)象），包括了所有class名字符合指定條件的元素（搜索范圍包括本身），元素的變化實(shí)時(shí)反映在返回結(jié)果中。這個(gè)方法不僅可以在document對(duì)象上調(diào)用，也可以在任何元素節(jié)點(diǎn)上調(diào)用。
  使用方法：var elem = document.getElementsByClassName(names);
  getElementsByClassName方法的參數(shù)，可以是多個(gè)空格分隔的class名字，返回同時(shí)具有這些節(jié)點(diǎn)的元素。
  document.getElementsByClassName('red test');

• getElementsByTagName方法返回所有指定標(biāo)簽的元素（搜索范圍包括本身）。返回值是一個(gè)HTMLCollection對(duì)象，也就是說(shuō)，搜索結(jié)果是一個(gè)動(dòng)態(tài)集合，任何元素的變化都會(huì)實(shí)時(shí)反映在返回的集合中。這個(gè)方法不僅可以在document對(duì)象上調(diào)用，也可以在任何元素節(jié)點(diǎn)上調(diào)用。
  使用方法：var paras = document.getElementsByTagName("p");

• getElementsByName方法用于選擇擁有name屬性的HTML元素，比如form、img、frame、embed和object，返回一個(gè)NodeList格式的對(duì)象，不會(huì)實(shí)時(shí)反映元素的變化。
  使用方法：
  // 假如表單是<form name="x"></form>
var forms = document.getElementsByName("x");
forms[0].tagName // "FORM"

ES5選擇方法：

• querySelector方法返回匹配指定的CSS選擇器的元素節(jié)點(diǎn)。如果有多個(gè)節(jié)點(diǎn)滿足匹配條件，則返回第一個(gè)匹配的節(jié)點(diǎn)。如果沒(méi)有發(fā)現(xiàn)匹配的節(jié)點(diǎn)，則返回null。
  使用方法：
  document.querySelector('.title')
document.querySelector('a')
document.querySelector('#ct p.title')

• querySelectorAll方法返回匹配指定的CSS選擇器的所有節(jié)點(diǎn)，返回的是NodeList類型的對(duì)象。NodeList對(duì)象不是動(dòng)態(tài)集合，所以元素節(jié)點(diǎn)的變化無(wú)法實(shí)時(shí)反映在返回結(jié)果中。
  使用方法：
  document.querySelectorAll('#ct p.title')
  選出來(lái)的是類數(shù)組對(duì)象
  querySelector和querySelectorAll在IE9和一些移動(dòng)端都可以用

題目4：如何創(chuàng)建一個(gè)元素？如何給元素設(shè)置屬性？如何刪除屬性

創(chuàng)建元素

• createElement方法用來(lái)生成HTML元素節(jié)點(diǎn)。createElement方法的參數(shù)為元素的標(biāo)簽名，即元素節(jié)點(diǎn)的tagName屬性。如果傳入大寫的標(biāo)簽名，會(huì)被轉(zhuǎn)為小寫。如果參數(shù)帶有尖括號(hào)（即<和>）或者是null，會(huì)報(bào)錯(cuò)。
  var newDiv = document.createElement("div");

• createTextNode方法用來(lái)生成文本節(jié)點(diǎn)，參數(shù)為所要生成的文本節(jié)點(diǎn)的內(nèi)容。
  var newDiv = document.createElement("div"); var newContent = document.createTextNode("Hello");

• createDocumentFragment方法生成一個(gè)DocumentFragment對(duì)象。DocumentFragment對(duì)象是一個(gè)存在于內(nèi)存的DOM片段，但是不屬于當(dāng)前文檔，常常用來(lái)生成較復(fù)雜的DOM結(jié)構(gòu)，然后插入當(dāng)前文檔。這樣做的好處在于，因?yàn)镈ocumentFragment不屬于當(dāng)前文檔，對(duì)它的任何改動(dòng)，都不會(huì)引發(fā)網(wǎng)頁(yè)的重新渲染，比直接修改當(dāng)前文檔的DOM有更好的性能表現(xiàn)。
  var docFragment = document.createDocumentFragment();

設(shè)置元素屬性

• createAttribute()方法生成一個(gè)新的屬性對(duì)象節(jié)點(diǎn)，并返回它。
  attribute = document.createAttribute(name);
  createAttribute方法的參數(shù)name，是屬性的名稱。

• setAttribute()方法用于設(shè)置元素屬性
  var node = document.getElementById("div1"); node.setAttribute("my_attrib", "newVal");

刪除屬性

• 刪除元素使用removeChild()方法即可
  parentNode.removeChild(childNode);

題目5：如何給頁(yè)面元素添加子元素？如何刪除頁(yè)面元素下的子元素?

appendChild() 在元素末尾添加元素
insertBefore() 在某個(gè)元素之前插入元素
removeChild() 刪除元素某個(gè)元素

題目6： element.classList有哪些方法？如何判斷一個(gè)元素的 class 列表中是包含某個(gè) class？如何添加一個(gè)class？如何刪除一個(gè)class?

add：添加
remove： 刪除
contains：是否包含某元素
replace：用一個(gè)新的class取代一個(gè)舊的class

題目7： 如何選中如下代碼所有的li元素？ 如何選中btn元素？

<div class="mod-tabs">
   <ul>
       <li>list1</li>
       <li>list2</li>
       <li>list3</li>
   </ul>
   <button class="btn">點(diǎn)我</button>
</div>

var elem = document.querySelectorAll('.mod-tabs>ul>li')
var elem2 = document.querySelector('.mod-tabs .btn')