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

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

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

• elem.children：只輸出普通的DOM元素，返回子元素列表(HTMLCollection)類型。
• elem.childNodes：會輸出所有的子元素，包括文本節(jié)點和數(shù)字，返回子元素列表(NodeList)類型。

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

• getElementById():返回指定ID屬性的元素節(jié)點。如果發(fā)現(xiàn)沒有指定的節(jié)點，則返回null。這是獲取元素最快的方法
• getElementsByClassName():返回一個類似數(shù)組的對象，包括了所有class名字符合指定條件的元素，元素的變化實時反映在返回結(jié)果中。
• getElementsByTagName():返回所有指定標簽的元素。
• getElementsByName():用于選擇擁有name屬性的HTML元素，返回一個NodeList格式的對象，不會實時反映元素的變化。
• ES5的元素選擇方法：
  • querySelector():返回匹配指定的CSS選擇器的元素節(jié)點。如果有多個節(jié)點滿足匹配條件，則返回第一個匹配的節(jié)點。如果沒有發(fā)現(xiàn)匹配的節(jié)點，則返回null。
  • querySelectorAll():返回匹配指定的CSS選擇器的所有節(jié)點。

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

創(chuàng)建元素

• createElement():用來生成HTML元素節(jié)點。

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

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

• createTextNode():用來生成文本節(jié)點，參數(shù)為所要生成的文本節(jié)點的內(nèi)容。

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

上面代碼新建一個div節(jié)點和一個文本節(jié)點

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

    var docFragment = document.createDocumentFragment();
  

DocumentFragment對象是一個存在于內(nèi)存的DOM片段，但是不屬于當前文檔，常常用來生成較復雜的DOM結(jié)構(gòu)，然后插入當前文檔。這樣做的好處在于，因為DocumentFragment不屬于當前文檔，對它的任何改動，都不會引發(fā)網(wǎng)頁的重新渲染，比直接修改當前文檔的DOM有更好的性能表現(xiàn)。

如何給元素設(shè)置屬性

• createAttribute():生成一個新的屬性對象節(jié)點，并返回它。

    attribute = document.createAttribute(name);
    createAttribute方法的參數(shù)name，是屬性的名稱。
  

• setAttribute():用于設(shè)置元素屬性

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

等同于

  var node = document.getElementById("div1");
  var a = document.createAttribute("my_attrib");
  a.value = "newVal";
  node.setAttributeNode(a);

如何刪除屬性

• removeAttribute():用于刪除元素屬性

    node.removeAttribute('id');
  

獲取元素屬性

• getAttribute():用于獲取元素的attribute值

    node.getAttribute('id');
  

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

給頁面元素添加子元素

• appendChild():在元素末尾添加元素

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

• replaceChild()

  • replaceChild()接受兩個參數(shù)：要插入的元素和要替換的元素

    newDiv.replaceChild(newElement, oldElement);
  

刪除元素

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

    parentNode.removeChild(childNode);
  

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

• element.classList方法
  • classList.contains() //判斷是否擁有class
  • classList.add() // 新增class
  • classList.remove() //刪除class
  • classList.toggle() //新增/刪除切換

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

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

  document.getElementsByTagName('li')
  // [<li>?list1?</li>?, <li>?list2?</li>?, <li>?list3?</li>?]

  document.getElementsByTagName('button')
  // [<button class=?"btn">?點我?</button>?]

  document.querySelectorAll('li')
  // [<li>?list1?</li>?, <li>?list2?</li>?, <li>?list3?</li>?]

  document.querySelectorAll('.btn')
  // [<button class=?"btn">?點我?</button>?]

參考

• dom操作