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

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

<div>
    <p>
        123
        <span>456</span>
    </p>
</div>
innerText返回的是   123456
innerHTML返回的是 <p>123<span>456</span></p>

題目2： elem.children和elem.childNodes的區別？

elem.chidren：非標準屬性，它返回指定元素的子元素HTMLCollection集合，該集合只包含HTML節點，不包含文本節點。
elem.chidNodes：標準屬性，它返回指定元素的子元素NodeList節點集合，包含HTML節點、所有屬性、文本節點。

Paste_Image.png

elem.chidNodes會出現text，而elem.chidren不會。

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

• 常見方法：

方法 |說明
----|------|----
getElementById()| getElementById方法返回匹配指定ID屬性的元素節點。如果沒有發現匹配的節點，則返回null。這也是獲取一個元素最快的方法。
getElementsByClassName() |getElementsByClassName方法返回一個類似數組的對象。（HTMLCollection類型的對象），包括了所有class名字符合指定條件的元素（搜索范圍包括本身），元素的變化實時反映在返回結果中。
getElementsByTagName() | getElementsByTagName方法返回所有指定標簽的元素（搜索范圍包括本身）。返回值是一個HTMLCollection對象，也就是說，搜索結果是一個動態集合，任何元素的變化都會實時反映在返回的集合中。這個方法不僅可以在document對象上調用，也可以在任何元素節點上調用。
getElementsByName() | getElementsByName方法用于選擇擁有name屬性的HTML元素，比如form、img、frame、embed和object，返回一個NodeList格式的對象，不會實時反映元素的變化。

• ES5：

方法 |說明
----|------|----
querySelector()|querySelector方法返回匹配指定的CSS選擇器的元素節點。如果有多個節點滿足匹配條件，則返回第一個匹配的節點。如果沒有發現匹配的節點，則返回null。
querySelectorAll() |querySelectorAll方法返回匹配指定的CSS選擇器的所有節點，返回的是NodeList類型的對象。NodeList對象不是動態集合，所以元素節點的變化無法實時反映在返回結果中。

題目4：如何創建一個元素？如何給元素設置屬性？如何刪除屬性

• 創建元素
  • createElement()用來生成HTML元素節點。參數為元素的標簽名，即元素節點的tagName屬性。如果傳入大寫的標簽名，會被轉為小寫。如果參數帶有尖括號（即<和>）或者是null，會報錯。

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

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

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

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

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

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

• 刪除：
  • removeChild()

parentNode.removeChild(childNode);

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

• 方法：
  • add(string[,string]) 添加指定class值，若已存在則忽略
  • remove(string[,string]) 刪除指定class值
  • item(number) 通過參數來搜索索引返回class值
  • toggle(string,[,force]) 當只有第一個參數時，當class值存在時，刪除class值返回false,當class不存在時，添加該參數作為class值，并返回true；當第二個參數存在時，當第二個參數的結果為true時，添加class值,當計算結果為false時，刪除第一參數對應的class
  • contains(string) 檢查元素中的class是否有指定值對應的class,返回布爾值
• 判斷：
  • 判斷是否包含div.classList.contains(str);
  • 添加classdiv.classList.add(str);
  • 刪除classdiv.classList.remove(str);

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

     <div class="mod-tabs">
       <ul>
         <li>list1</li>
         <li>list2</li>
         <li>list3</li>
       </ul>  
             <button class="btn">點我</button>
 </div>
              //document.querySelectorAll('.mod-tabs li')
             //document.querySelector('.mod-tabs btn')