題目1： dom對象的innerText和innerHTML有什么區(qū)別？
innerText返回元素內(nèi)包含的文本內(nèi)容
返回元素的HTML結(jié)構(gòu)(不包括元素本身)
<div>
<p>
123
<span>456</span>
</p>
</div>
//外層div的innerText返回內(nèi)容是 "123456"
//外層div的innerHTML返回內(nèi)容是 "<p>123<span>456</span></p>"
題目2： elem.children和elem.childNodes的區(qū)別？
elem.children: 它返回指定元素的子元素集合，它只返回HTML節(jié)點
elem.childNodes : 它返回指定元素的子元素集合，包括HTML節(jié)點，所有屬性，文本
題目3：查詢元素有幾種常見的方法？ES5的元素選擇方法是什么?
- getElementById('id')
通過訪問id查詢,返回匹配指定ID屬性的元素節(jié)點。如果沒有發(fā)現(xiàn)匹配的節(jié)點，則返回null。如： - getElementsByClassName('title red')
返回一個類似數(shù)組的對象，包括了所有class名字符合指定條件的元素（搜索范圍包括本身），元素的變化實時反映在返回結(jié)果中。這個方法不僅可以在document對象上調(diào)用，也可以在任何元素節(jié)點上調(diào)用;參數(shù)可以是多個空格分隔的class名字，返回同時具有這些節(jié)點的元素 - getElementByTagName('div')
返回所有指定標(biāo)簽的元素（搜索范圍包括本身）,返回值是一個HTMLCollection對象,不僅可以在document對象上調(diào)用，也可以在任何元素節(jié)點上調(diào)用；此方法會將參數(shù)轉(zhuǎn)為小寫后，再進行搜索 - getElementsByName()
用于選擇擁有name屬性的HTML元素，比如form、img、frame、embed和object，返回一個NodeList格式的對象，不會實時反映元素的變化
ES5的元素選擇方法：
- querySelector()
返回匹配指定的CSS選擇器的元素節(jié)點。如果有多個節(jié)點滿足匹配條件，則返回第一個匹配的節(jié)點。如果沒有發(fā)現(xiàn)匹配的節(jié)點，則返回null。querySelector方法無法選中CSS偽元素 - querySelectorAll()
返回匹配指定的CSS選擇器的所有節(jié)點，返回的是NodeList類型的對象。NodeList對象不是動態(tài)集合，所以元素節(jié)點的變化無法實時反映在返回結(jié)果中;querySelectorAll方法的參數(shù)，可以是逗號分隔的多個CSS選擇器，返回所有匹配其中一個選擇器的元素。
var elem = document.getElementById("test");
var el1 = document.querySelector(".myclass");
var el2 = document.querySelector('#myParent > [ng-click]');
//返回class屬性是note或alert的div元素
var matches = document.querySelectorAll("div.note, div.alert");
題目4：如何創(chuàng)建一個元素？如何給元素設(shè)置屬性？如何刪除屬性
通過createElement()方法創(chuàng)建元素
通過createTextNode()方法用來生成文本節(jié)點，參數(shù)為所要生成的文本節(jié)點的內(nèi)容
通過元素的setAttribute()方法給元素設(shè)置屬性
通過元素的removeAttribute()刪除屬性
var newImg = document.createElement("img");
var newContent = document.createTextNode("Hello");
parentNode.removeChild(childNode);
newImg.createAttribute('src','http://baidu.com')
newImg.removeAttribute('src','http://baidu.com')
題目5：如何給頁面元素添加子元素？如何刪除頁面元素下的子元素?
appendChild(node)在元素末尾添加子元素
insertBefore()在某個元素之前插入元素
removeChild()刪除頁面元素下的子元素
/在元素末尾添加元素
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.appendChild(newContent);
//刪除頁面元素下的子元素
parentNode.removeChild(childNode);
題目6： element.classList有哪些方法？如何判斷一個元素的 class 列表中是包含某個 class？如何添加一個class？如何刪除一個class?
var nodeBox = document.querySelector('.box')
console.log( nodeBox.classList )
nodeBox.classList.add('active') //新增 class
nodeBox.classList.remove('active') //刪除 class
nodeBox.classList.toggle('active') //新增/刪除切換
node.classList.contains('active') // 判斷是否擁有 class
題目7： 如何選中如下代碼所有的li元素？ 如何選中btn元素？
<div class="mod-tabs">
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
<button class="btn">點我</button>
</div>
//選中所有的li元素
document.querySelectorAll('li')
//選中btn元素
document.getElementsByClassName('btn')
document.querySelector('.btn')
