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

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

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

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

• innerHTML返回元素的文本內(nèi)容，而是返回元素的HTML結構，在寫入的時候也會自動構建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é)點的子節(jié)點的集合，該集合為即時更新的集合。包括HTML節(jié)點，所有屬性，文本。
• elem.children 它返回指定元素的子元素集合。經(jīng)測試，它只返回HTML節(jié)點，甚至不返回文本節(jié)點。

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

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

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

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

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

ES5選擇方法：

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

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

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

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

創(chuàng)建元素：

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

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

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

設置屬性：

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

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

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

刪除屬性：

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

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

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

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

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

• insertBefore()
  在某個元素之前插入元素

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

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

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

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

題目6： element.classList有哪些方法？如何判斷一個元素的 class 列表中是包含某個 class？如何添加一個class？如何刪除一個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()
  在元素中添加一個或多個類名。
  如果指定的類名已存在，則不會添加。
  document.getElementById("myDIV").classList.add("mystyle","anotherClass", "thirdClass");

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

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

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

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

<div class="mod-tabs">
   <ul>
       <li>list1</li>
       <li>list2</li>
       <li>list3</li>
   </ul>
   <button class="btn">點我</button>
</div>

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