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

• innerText是一個可寫屬性，返回元素內包含的文本內容，在多層次的時候會按照元素由淺到深的順序拼接其內容

<div id = 'test'>
    <p>
        123
        <span>456</span>
    </p>
</div>```
console.log(test.innerText) ;//返回123456 
- innerHTML innerHTML屬性作用和innerText類似，但是不是返回元素的文本內容，而是返回元素的HTML結構，在寫入的時候也會自動構建DOM

console.log(test.innerText)
//返回如下
<p>
123
<span>456</span>
</p>```

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

• elem.childNodes
  childNodes：子元素列表（NodeList）標準的，返回指定元素的直接子元素集合，包括HTML屬性，所有屬性，文本（包括空白符）。可以通過nodeType來判斷是哪種類型的節(jié)點，只有當nodeType==1時才是元素節(jié)點，2是屬性節(jié)點，3是文本節(jié)點。
  有時候需要獲取指定元素的第一個HTML子節(jié)點（非屬性/文本節(jié)點），最容易想到的就是firstChild 屬性。代碼中第一個HTML節(jié)點前如果有換行，空格，那么firstChild返回的就不是你想要的了?？梢允褂胣odeType來判斷下。

 function getFirst(elem){
     for(var i=0,e;e=elem.childNodes[i++];){
        if(e.nodeType==1)
            return e;
    }      
 }```
- elem.children 
children：子元素列表（HTMLCollection） 
非標準的，它返回指定元素的直接子元素集合。經測試，它只返回HTML節(jié)點，甚至不返回文本節(jié)點。且在所有瀏覽器下表現(xiàn)驚人的一致。和childNodes 一樣，在Firefox下不支持()取集合元素。因此如果想獲取指定元素的第一個HTML節(jié)點，可以使用children[0]來替代上面的 getFirst函數(shù)。需注意children在IE中包含注釋節(jié)點。
##題目3：查詢元素有幾種常見的方法？ES5的元素選擇方法是什么?

- getElementById() 
getElementById方法返回匹配指定ID屬性的元素節(jié)點。如果沒有發(fā)現(xiàn)匹配的節(jié)點，則返回null。這也是獲取一個元素最快的方法
- getElementsByClassName() 
getElementsByClassName方法返回一個類似數(shù)組的對象（HTMLCollection類型的對象），包括了所有class名字符合指定條件的元素（搜索范圍包括本身），元素的變化實時反映在返回結果中。這個方法不僅可以在document對象上調用，也可以在任何元素節(jié)點上調用。
- getElementsByTagName() 
getElementsByTagName方法返回所有指定標簽的元素（搜索范圍包括本身）。返回值是一個HTMLCollection對象，也就是說，搜索結果是一個動態(tài)集合，任何元素的變化都會實時反映在返回的集合中。這個方法不僅可以在document對象上調用，也可以在任何元素節(jié)點上調用。

- getElementsByName() 
getElementsByName方法用于選擇擁有name屬性的HTML元素，比如form、img、frame、embed和object，返回一個NodeList格式的對象，不會實時反映元素的變化。

 -querySelector() 
querySelector方法返回匹配指定的CSS選擇器的元素節(jié)點。如果有多個節(jié)點滿足匹配條件，則返回第一個匹配的節(jié)點。如果沒有發(fā)現(xiàn)匹配的節(jié)點，則返回null。
- querySelectorAll() 
querySelectorAll方法返回匹配指定的CSS選擇器的所有節(jié)點，返回的是NodeList類型的對象。NodeList對象不是動態(tài)集合，所以元素節(jié)點的變化無法實時反映在返回結果中。 
##題目4：如何創(chuàng)建一個元素？如何給元素設置屬性？如何刪除屬性

- createElement() 
createElement方法用來生成HTML元素節(jié)點。

- createTextNode() 
createTextNode方法用來生成文本節(jié)點，參數(shù)為所要生成的文本節(jié)點的內容。
- createDocumentFragment() 
createDocumentFragment方法生成一個DocumentFragment對象。 
DocumentFragment對象是一個存在于內存的DOM片段，但是不屬于當前文檔，常常用來生成較復雜的DOM結構，然后插入當前文檔。這樣做的好處在于，因為DocumentFragment不屬于當前文檔，對它的任何改動，都不會引發(fā)網頁的重新渲染，比直接修改當前文檔的DOM有更好的性能表現(xiàn)。 
##題目5：如何給頁面元素添加子元素？如何刪除頁面元素下的子元素?

- father.appendChild(new); 是在父元素節(jié)點的最后添加。

- insertBefore()在某個元素之前插入元素
- replaceChild()replaceChild()接受兩個參數(shù)：要插入的元素和要替換的元素
- 刪除元素使用removeChild()方法即可 
##題目6： element.classList有哪些方法？如何判斷一個元素的 class 列表中是包含某個 class？如何添加一個class？如何刪除一個class? 
方法：
- add( String [, String] ) 
添加指定的類值。如果這些類已經存在于元素的屬性中，那么它們將被忽略。
- remove( String [,String] ) 
刪除指定的類值。
- item ( Number ) 
按集合中的索引返回類值。
- toggle ( String [, force] ) 
當只有一個參數(shù)時：切換 class value; 即如果類存在，則刪除它并返回false，如果不存在，則添加它并返回true。 
當存在第二個參數(shù)時：如果第二個參數(shù)的計算結果為true，則添加指定的類值，如果計算結果為false，則刪除它
- contains( String ) 
檢查元素的類屬性中是否存在指定的類值。

- elem.classList.contains(‘className’)來判斷是否包含某個 class

- elem.classList.add(‘className’) 添加類 
- elem.classList.remove(‘className’) 刪除類 
##題目7： 如何選中如下代碼所有的li元素？ 如何選中btn元素？

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