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

• innerText返回的是元素內(nèi)包含的文本內(nèi)容，在多層次的時(shí)候會按照元素由淺到深的順序拼接其內(nèi)容。

<div>
    <p>
        123
        <span>456</span>
    </p>
</div>

外層div的innerText返回內(nèi)容是 123456

• innerHTML返回元素的文本內(nèi)容，而是返回元素的HTML結(jié)構(gòu)，在寫入的時(shí)候也會自動(dòng)構(gòu)建DOM。

<div>
    <p>
        123
        <span>456</span>
    </p>
</div>

外層div的innerHTML返回內(nèi)容是 <p>123<span>456</span></p>

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

• elem.childNodes 返回包含指定節(jié)點(diǎn)的子節(jié)點(diǎn)的集合，該集合為即時(shí)更新的集合。包括HTML節(jié)點(diǎn)，所有屬性，文本。
• elem.children 它返回指定元素的子元素集合。經(jīng)測試，它只返回HTML節(jié)點(diǎn)，甚至不返回文本節(jié)點(diǎn)。

題目3：查詢元素有幾種常見的方法？ES5的元素選擇方法是什么?

• getElementById()
  getElementById方法返回匹配指定ID屬性的元素節(jié)點(diǎn)。如果沒有發(fā)現(xiàn)匹配的節(jié)點(diǎn)，則返回null。這也是獲取一個(gè)元素最快的方法

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

• getElementsByTagName()
  getElementsByTagName方法返回所有指定標(biāo)簽的元素（搜索范圍包括本身）。返回值是一個(gè)HTMLCollection對象，也就是說，搜索結(jié)果是一個(gè)動(dòng)態(tài)集合，任何元素的變化都會實(shí)時(shí)反映在返回的集合中。這個(gè)方法不僅可以在document對象上調(diào)用，也可以在任何元素節(jié)點(diǎn)上調(diào)用。
  getElementsByTagName方法會將參數(shù)轉(zhuǎn)為小寫后，再進(jìn)行搜索。

• getElementsByName()
  getElementsByName方法用于選擇擁有name屬性的HTML元素，比如form、img、frame、embed和object，返回一個(gè)NodeList格式的對象，不會實(shí)時(shí)反映元素的變化。
  注意，在IE瀏覽器使用這個(gè)方法，會將沒有name屬性、但有同名id屬性的元素也返回，所以name和id屬性最好設(shè)為不一樣的值。

ES5選擇方法：

• querySelector()
  querySelector方法返回匹配指定的CSS選擇器的元素節(jié)點(diǎn)。如果有多個(gè)節(jié)點(diǎn)滿足匹配條件，則返回第一個(gè)匹配的節(jié)點(diǎn)。如果沒有發(fā)現(xiàn)匹配的節(jié)點(diǎn)，則返回null。
  querySelector方法無法選中CSS偽元素。

• querySelectorAll()
  querySelectorAll方法返回匹配指定的CSS選擇器的所有節(jié)點(diǎn)，返回的是NodeList類型的對象。NodeList對象不是動(dòng)態(tài)集合，所以元素節(jié)點(diǎn)的變化無法實(shí)時(shí)反映在返回結(jié)果中。
  querySelectorAll方法的參數(shù)，可以是逗號分隔的多個(gè)CSS選擇器，返回所有匹配其中一個(gè)選擇器的元素。

• elementFromPoint()
  elementFromPoint方法返回位于頁面指定位置的元素。
  var element = document.elementFromPoint(x, y);
  elementFromPoint方法的參數(shù)x和y，分別是相對于當(dāng)前窗口左上角的橫坐標(biāo)和縱坐標(biāo)，單位是CSS像素。
  elementFromPoint方法返回位于這個(gè)位置的DOM元素，如果該元素不可返回（比如文本框的滾動(dòng)條），則返回它的父元素（比如文本框）。如果坐標(biāo)值無意義（比如負(fù)值），則返回null。

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

創(chuàng)建元素：

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

• createTextNode()
  createTextNode方法用來生成文本節(jié)點(diǎn)，參數(shù)為所要生成的文本節(jié)點(diǎn)的內(nèi)容。
  var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
  上面代碼新建一個(gè)div節(jié)點(diǎn)和一個(gè)文本節(jié)點(diǎn)

• createDocumentFragment()
  createDocumentFragment方法生成一個(gè)DocumentFragment對象。

設(shè)置屬性：

• getAttribute()
  getAttribute()用于獲取元素的attribute值
  node.getAttribute('id');

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

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

刪除屬性：

• romoveAttribute()
  removeAttribute()用于刪除元素屬性
  node.removeAttribute('id');

• element.attributes
  當(dāng)然上面的方法做的事情也可以通過類操作數(shù)組屬性element.attributes來實(shí)現(xiàn)。

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

• appendChild()
  在元素末尾添加元素，父元素里放進(jìn)一個(gè)子元素，子元素在父元素內(nèi)最后位置。

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);

insertBefore方法可在已有的子節(jié)點(diǎn)前插入一個(gè)新的子節(jié)點(diǎn)。
父元素.insertBefore(放入的子元素，父元素的某個(gè)子元素).

• replaceChild()
  replaceChild()接受兩個(gè)參數(shù)：要插入的元素和要替換的元素
  newDiv.replaceChild(newElement, oldElement);

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

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

classList 屬性返回元素的類名，作為 DOMTokenList 對象。
該屬性用于在元素中添加，移除及切換 CSS 類。
classList 屬性是只讀的，但你可以使用 add() 和 remove() 方法修改它。
獲取 <div> 元素的類名:

<div id="myDIV" class="mystyle anotherClass thirdClass">I am a DIV element</div>
var x = document.getElementById("myDIV").classList;

輸出mystyle anotherClass thirdClass

• contains()
  返回布爾值，判斷指定的類名是否存在。
  var x=document.getElementById("myDIV").classList.contains("mystyle");

• add()
  在元素中添加一個(gè)或多個(gè)類名。
  如果指定的類名已存在，則不會添加。
  document.getElementById("myDIV").classList.add("mystyle","anotherClass", "thirdClass");

• remove()
  移除元素中一個(gè)或多個(gè)類名。
  注意： 移除不存在的類名，不會報(bào)錯(cuò)。
  document.getElementById("myDIV").classList.remove("mystyle");

• item()
  返回類名在元素中的索引值。索引值從 0 開始。
  如果索引值在區(qū)間范圍外則返回 null。
  獲取 <div> 元素的第一個(gè)類名（索引為0）:
  var x = document.getElementById("myDIV").classList.item(0);

• toggle(class, true|false)
  在元素中切換類名。
  第一個(gè)參數(shù)為要在元素中移除的類名，并返回 false。
  如果該類名不存在則會在元素中添加類名，并返回 true。
  第二個(gè)是可選參數(shù)，是個(gè)布爾值用于設(shè)置元素是否強(qiáng)制添加或移除類，不管該類名是否存在。例如：
  移除一個(gè) class: element.classList.toggle("classToRemove", false);
  添加一個(gè) class:element.classList.toggle("classToAdd", true);
  注意： Internet Explorer 或 Opera 12 及其更早版本不支持第二個(gè)參數(shù)。

題目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>

選中所有l(wèi)i：
document.getElementsByTagName("li")
選中btn元素：
document.getElementsByClassName("btn")
document.getElementsByTagName("button")
document.querySelector(".btn")