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

• innerText是一個(gè)可寫屬性, 返回元素內(nèi)包含的文本內(nèi)容,不包括標(biāo)簽, 在多層次的時(shí)候會(huì)按照元素由淺到深的順序拼接其內(nèi)容; 設(shè)定innerText值時(shí),即便輸入的內(nèi)容是HTML標(biāo)簽, 也會(huì)以文本形式顯示; 安全性比使用innerHTML顯示用戶輸入的內(nèi)容要高
• innerHTML屬性作用與innerText類似, 但不是返回元素的文本內(nèi)容, 而是返回元素的HTML結(jié)構(gòu),包括HTML標(biāo)簽和文本內(nèi)容; 設(shè)定innerHTML值時(shí)如果輸入的內(nèi)容中包含HTML標(biāo)簽, 則會(huì)以HTML形式解析

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

• elem.children只會(huì)返回以HTML標(biāo)簽形成的節(jié)點(diǎn)
• elem.childNodes會(huì)返回包括文本, 注釋在內(nèi)的所有節(jié)點(diǎn); 使用時(shí)容易出現(xiàn)問(wèn)題, 因此多用elem.children

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

• getElementById(): 查詢含指定id的元素節(jié)點(diǎn), 返回單個(gè)對(duì)象,如果沒(méi)有發(fā)現(xiàn)匹配的節(jié)點(diǎn)，則返回null。
• getElementByClassName(): 查詢含指定class的元素節(jié)點(diǎn), 可以是多個(gè)空格分隔的class名字，返回同時(shí)具有這些節(jié)點(diǎn)的元素。
• getElementByTagName(): 查詢標(biāo)簽為指定tag的元素節(jié)點(diǎn)(搜索范圍包括本身), 返回所有符合條件的元素節(jié)點(diǎn)組成的類數(shù)組對(duì)象; 注意，getElementsByTagName方法會(huì)將參數(shù)轉(zhuǎn)為小寫后，再進(jìn)行搜索。
• getElementByName(): 查詢name屬性值為指定name的元素節(jié)點(diǎn), 返回所有符合條件的元素節(jié)點(diǎn)組成的類數(shù)組對(duì)象
  ES5:
• querySelector(): 查詢匹配指定的CSS選擇器的元素節(jié)點(diǎn), 返回第一個(gè)符合條件的對(duì)象; 如果沒(méi)有發(fā)現(xiàn)匹配的節(jié)點(diǎn)，則返回null。
• querySelectorAll(): 返回所有符合條件的的元素節(jié)點(diǎn)組成的類數(shù)組對(duì)象, querySelectorAll方法的參數(shù)，可以是逗號(hào)分隔的多個(gè)CSS選擇器，返回所有匹配其中一個(gè)選擇器的元素。

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

• createElement()
  createElement方法用來(lái)生成HTML元素節(jié)點(diǎn)。

var newDiv = document.createElement("div");

createElement方法的參數(shù)為元素的標(biāo)簽名，即元素節(jié)點(diǎn)的tagName屬性。如果傳入大寫的標(biāo)簽名，會(huì)被轉(zhuǎn)為小寫。如果參數(shù)帶有尖括號(hào)（即<和>）或者是null，會(huì)報(bào)錯(cuò)。

• setAttribute()

setAttribute()方法用于設(shè)置元素屬性

var node = document.getElementById("div1");
node.setAttribute("my_attrib", "newVal");

• romoveAttribute()

removeAttribute()用于刪除元素屬性

node.removeAttribute('id');

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

• appendChild()

在元素末尾添加元素

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.appendChild(newContent);

• insertBefore()

在某個(gè)元素之前插入元素

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.insertBefore(newContent, newDiv.firstChild);

• 刪除元素使用removeChild()方法即可

parentNode.removeChild(childNode);

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

var nodeBox = document.querySelector('.box')
console.log( nodeBox.classList )
nodeBox.classList.add('active')   //新增 class
nodeBox.classList.remove('active')  //刪除 class
nodeBox.classList.toggle('active')   //新增/刪除切換
node.classList.contains('active')   // 判斷是否擁有 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 oTab = document.getElementsByClassName('mod-tabs');
  var aLi = oTab.getElementByTagName('li');
  var oBtn = document.getElementsByClassName('btn');
  //ES5
  var oTab = document.querySelectorAll('.mod-tabs li');
  var oBtn = document.querySelector('.btn');