題目1： dom對(duì)象的innerText和innerHTML有什么區(qū)別？
innerText是一個(gè)可寫屬性，返回元素包含的文本內(nèi)容焕妙，在多層次的時(shí)候，會(huì)按照元素
由淺到深的順序拼接其內(nèi)容孝偎。
innerHTML 屬性作用和innerText類似访敌，但是不是返回元素的文本內(nèi)容凉敲，而是返回元素的
HTML結(jié)構(gòu)衣盾，在寫入的時(shí)候寺旺，也會(huì)自動(dòng)構(gòu)建DOM。
舉列說明
<body>
<div id="ct">
<p>123
<span>456</span>
</p>
</div>
<script>
var ct = document.getElementById('ct');
console.log(ct.innerText);
// 結(jié)果為 “123456”
console.log(ct.innerHTML);
// 結(jié)果為 "<p>123<span>456</span></p>"
</script>
</body>
題目2： elem.children和elem.childNodes的區(qū)別势决？
舉列說明
<body>
<div class="mod-tabs">
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
<button class="btn">點(diǎn)我</button>
</div>
<script>
var oDiv = document.getElementsByClassName("mod-tabs")[0];
// 第一種遍歷子元素
console.log(oDiv.children.length); // 2
for(var i = 0; i < oDiv.children.length; i++) {
console.log(oDiv.children[i]); // ul , button
}
console.log(oDiv.childNodes.length); // 5
console.log(oDiv.childNodes); // [text, ul, text, button.btn, text]
for(var i = 0; i < oDiv.childNodes.length; i++) {
console.log(oDiv.childNodes[i].nodeType); // 3 1 3 1 3
/* 由此我們可以知道 文本節(jié)點(diǎn)對(duì)應(yīng)的nodeType為3阻塑，而元素節(jié)點(diǎn)對(duì)應(yīng)的
nodeType為1 */
if(oDiv.childNodes[i].nodeType === 1) { // 判斷是否是元素節(jié)點(diǎn)
// do something
}
}
</script>
</body>
題目3：查詢?cè)赜袔追N常見的方法？ES5的元素選擇方法是什么?
（1）getElementById方法返回匹配指定ID屬性的元素節(jié)點(diǎn)果复。
var elem = document.getElementById("test");
（2）getElementsByClassName方法返回一個(gè)類似數(shù)組的對(duì)象陈莽，包括了所有class名字符合指定條件的元素（搜索范圍包括本身），元素的變化實(shí)時(shí)反映在返回結(jié)果中虽抄。這個(gè)方法不僅可以在document對(duì)象上調(diào)用走搁，也可以在任何元素節(jié)點(diǎn)上調(diào)用。
var elements = document.getElementsByClassName('tab');
（3）getElementsByTagName()
var paras = document.getElementsByTagName("p");
（4）getElementsByName();
// 假定有一個(gè)表單是<form name="x"></form>
var forms = document.getElementsByName("x");
forms[0].tagName // "FORM"
ES5的元素選擇方法
（1）querySelector()
querySelector方法返回匹配指定的CSS選擇器的元素節(jié)點(diǎn)迈窟。如果有多個(gè)
節(jié)點(diǎn)滿足匹配條件私植，則返回第一個(gè)匹配的節(jié)點(diǎn)。如果沒有發(fā)現(xiàn)匹配的節(jié)點(diǎn)车酣，則返回null曲稼。
var el1 = document.querySelector(".myclass");
var el2 = document.querySelector("#myParent .child");
（2）querySelectorAll()
querySelectorAll 方法 返回匹配指定的CSS選擇器的所有節(jié)點(diǎn)，返回的是NodeList類型的對(duì)象湖员。NodeList對(duì)象不是動(dòng)態(tài)集合贫悄，所以元素節(jié)點(diǎn)的變化無法實(shí)時(shí)反映在返回結(jié)果中。
elementList = document.querySelectorAll(selectors);
querySelectorAll 方法的參數(shù)娘摔，可以是逗號(hào)分隔的多個(gè)CSS選擇器窄坦，返回所有匹配其中一個(gè)選擇器的元素。
var matches = document.querySelectorAll("div.note, div.alert");
題目4：如何創(chuàng)建一個(gè)元素凳寺？如何給元素設(shè)置屬性嫡丙？如何刪除屬性
var attribute = document.createElement(name); // 創(chuàng)建
var node = document.getElementById("div1");
node.setAttribute("my_attrib", "newVal"); // 設(shè)置
node.removeAttribute('src'); // 刪除
題目5：如何給頁面元素添加子元素？如何刪除頁面元素下的子元素?
（1）在元素末尾添加元素
var ct = document.getElementById("ct");
var newDiv = document.createElement("div");
var newContent = document.createTextNode("hello");
newDiv.appendChild(newContent);
ct.appendChild(newDiv);
（2）在某個(gè)元素之前插入元素
var ct = document.getElementById("ct");
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.insertBefore(newContent, newDiv.firstChild);
ct.appendChild(newDiv);
(3)document.createDocumentFragment()的用法读第。
var arr = [1,2,3,4,5,6,7,8,9];
var tempCt = document.createDocumentFragment();
for(var i = 0; i < arr.length; i++) {
var node = document.createElement('div');
node.innerText = arr[i];
tempCt.appendChild(node);
}
target.appendChild(tempCt);
刪除頁面元素下的子元素
parentNode.removeChild(childNode);
題目6： element.classList有哪些方法曙博？如何判斷一個(gè)元素的 class 列表中是包含某個(gè) class？如何添加一個(gè)class怜瞒？如何刪除一個(gè)class?
element.classList.add('active'); // 新增 class
element.classList.remove('active'); // 刪除 class
element.classList.toggle('active'); // 新增/刪除 切換
element.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">點(diǎn)我</button>
</div>
// 選中所有的li元素
// 方法一
var oLi = document.querySelectorAll(".mod-tabs li");
// 方法二
var oDiv = document.getElementsByClassName("mod-tabs")[0];
var oLi = oDiv.getElementsByTagName('li');
---------
// 選中btn元素
var oBtn = document.getElementsByClassName("btn");
