1. dom對象的innerText和innerHTML有什么區(qū)別晤斩？
- innerText是一個可寫屬性吕粗，返回元素內(nèi)包含的文本內(nèi)容，在多層次的時候會按照元素由淺到深的順序拼接其內(nèi)容万牺，innerText會把html標簽當做普通的文本顯示阳掐。
- innerHTML屬性作用和innerText類似，但是不是返回元素的文本內(nèi)容武福，而是返回元素的HTML結(jié)構(gòu)议双，包括Html標簽，在寫入的時候也會自動構(gòu)建DOM捉片。
2. elem.children和elem.childNodes的區(qū)別平痰？
- childNodes 屬性：標準的，它返回指定元素的子元素集合伍纫，包括HTML節(jié)點宗雇，所有屬性，文本節(jié)點莹规∨馄眩可以通過nodeType來判斷是哪種類型的節(jié)點，F(xiàn)irefox3.5不支持childNodes屬性。
- children 屬性：非標準的嘹履，它返回指定元素的子元素集合。它只返回HTML節(jié)點债热，會忽略空白的文本節(jié)點砾嫉。且在所有瀏覽器下表現(xiàn)驚人的一致。和childNodes 一樣窒篱，在Firefox下不支持()取集合元素焕刮。需注意children在IE中包含注釋節(jié)點。
3. 查詢元素有幾種常見的方法墙杯？ES5的元素選擇方法是什么?
1.getElementById()
getElementById方法返回匹配指定ID屬性的元素節(jié)點配并。如果沒有發(fā)現(xiàn)匹配的節(jié)點，則返回null高镐。這也是獲取一個元素最快的方法溉旋。
var elem = document.getElementById("test");
2.getElementsByClassName()
getElementsByClassName方法返回一個類似數(shù)組的對象（HTMLCollection類型的對象），包括了所有class名字符合指定條件的元素（搜索范圍包括本身）嫉髓，元素的變化實時反映在返回結(jié)果中观腊。這個方法不僅可以在document對象上調(diào)用，也可以在任何元素節(jié)點上調(diào)用算行。getElementsByClassName方法的參數(shù)梧油，可以是多個空格分隔的class名字，返回同時具有這些節(jié)點的元素州邢。
var elem = document.getElementsByClassName(names);
var elem = document.getElementsByClassName('red test');
3.getElementsByTagName()
getElementsByTagName方法返回所有指定標簽的元素（搜索范圍包括本身）儡陨。返回值是一個HTMLCollection對象，也就是說量淌，搜索結(jié)果是一個動態(tài)集合骗村，任何元素的變化都會實時反映在返回的集合中。這個方法不僅可以在document對象上調(diào)用类少，也可以在任何元素節(jié)點上調(diào)用叙身。
var paras = document.getElementsByTagName("p");
4.getElementsByName()
getElementsByName方法用于選擇擁有name屬性的HTML元素，比如form硫狞、img信轿、frame、embed和object残吩，返回一個NodeList格式的對象财忽，不會實時反映元素的變化。
// 假定有一個表單是<form name="x"></form>
var forms = document.getElementsByName("x");
forms[0].tagName // "FORM"
ES5的元素選擇方法
1.querySelector()
querySelector方法返回匹配指定的CSS選擇器的元素節(jié)點泣侮。如果有多個節(jié)點滿足匹配條件即彪，則返回第一個匹配的節(jié)點。如果沒有發(fā)現(xiàn)匹配的節(jié)點，則返回null隶校。querySelector方法無法選中CSS偽元素漏益。
var el1 = document.querySelector(".myclass");
var el2 = document.querySelector('#myParent > [ng-click]');
2.querySelectorAll()
querySelectorAll方法返回匹配指定的CSS選擇器的所有節(jié)點，返回的是NodeList類型的對象深胳。NodeList對象不是動態(tài)集合绰疤，所以元素節(jié)點的變化無法實時反映在返回結(jié)果中。querySelectorAll方法的參數(shù)舞终，可以是逗號分隔的多個CSS選擇器轻庆，返回所有匹配其中一個選擇器的元素。
elementList = document.querySelectorAll(selectors);
3.elementFromPoint()
elementFromPoint方法返回位于頁面指定位置的元素敛劝。elementFromPoint方法的參數(shù)x和y余爆，分別是相對于當前窗口左上角的橫坐標和縱坐標，單位是CSS像素夸盟。elementFromPoint方法返回位于這個位置的DOM元素蛾方，如果該元素不可返回（比如文本框的滾動條），則返回它的父元素（比如文本框）上陕。如果坐標值無意義（比如負值）转捕，則返回null。
var element = document.elementFromPoint(x, y);
4. 如何創(chuàng)建一個元素唆垃？如何給元素設(shè)置屬性五芝？如何刪除屬性
1.createElement()
createElement方法用來生成HTML元素節(jié)點。
createElement方法的參數(shù)為元素的標簽名辕万，即元素節(jié)點的tagName屬性枢步。如果傳入大寫的標簽名，會被轉(zhuǎn)為小寫渐尿。如果參數(shù)帶有尖括號（即<和>）或者是null醉途，會報錯。
2.createTextNode()
createTextNode方法用來生成文本節(jié)點砖茸，參數(shù)為所要生成的文本節(jié)點的內(nèi)容隘擎。
3.createDocumentFragment()
createDocumentFragment方法生成一個DocumentFragment對象。
DocumentFragment對象是一個存在于內(nèi)存的DOM片段凉夯，但是不屬于當前文檔货葬，常常用來生成較復(fù)雜的DOM結(jié)構(gòu)，然后插入當前文檔劲够。這樣做的好處在于震桶，因為DocumentFragment不屬于當前文檔，對它的任何改動征绎，都不會引發(fā)網(wǎng)頁的重新渲染蹲姐，比直接修改當前文檔的DOM有更好的性能表現(xiàn)。
設(shè)置屬性、刪除屬性
1.getAttribute()
getAttribute()用于獲取元素的attribute值柴墩。
node.getAttribute('id');
2.createAttribute()
createAttribute()方法生成一個新的屬性對象節(jié)點忙厌，并返回它。
createAttribute方法的參數(shù)name江咳，是屬性的名稱慰毅。
attribute = document.createAttribute(name);
3.setAttribute()
setAttribute()方法用于設(shè)置元素屬性
var node = document.getElementById("div1");
node.setAttribute("my_attrib", "newVal");
4.romoveAttribute()
removeAttribute()用于刪除元素屬性
node.removeAttribute('id');
5. 如何給頁面元素添加子元素？如何刪除頁面元素下的子元素?
1.appendChild()
在元素末尾添加元素
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.appendChild(newContent);
2.insertBefore()
在某個元素之前插入元素
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.insertBefore(newContent, newDiv.firstChild);
3.replaceChild()
replaceChild()接受兩個參數(shù)：要插入的元素和要替換的元素
newDiv.replaceChild(newElement, oldElement);
4.刪除元素
刪除元素使用removeChild()方法即可
parentNode.removeChild(childNode);
6. element.classList有哪些方法扎阶？如何判斷一個元素的 class 列表中是包含某個 class？如何添加一個class婶芭？如何刪除一個class?
1.add( String [, String] )
添加指定的類值东臀。如果這些類已經(jīng)存在于元素的屬性中，那么它們將被忽略犀农。
2.remove( String [,String] )
刪除指定的類值惰赋。
3.item ( Number )
按集合中的索引返回類值。
4.toggle ( String [, force] )
當只有一個參數(shù)時：切換 class value; 即如果類存在呵哨，則刪除它并返回false赁濒，如果不存在，則添加它并返回true孟害。
當存在第二個參數(shù)時：如果第二個參數(shù)的計算結(jié)果為true拒炎，則添加指定的類值，如果計算結(jié)果為false挨务，則刪除它击你。
5.contains( String )
檢查元素的類屬性中是否存在指定的類值。
示例：
// div是具有class =“foo bar”的<div>元素的對象引用
div.classList.remove("foo");
div.classList.add("anotherclass");
// 如果visible被設(shè)置則刪除它谎柄，否則添加它
div.classList.toggle("visible");
// 添加/刪除 visible丁侄，取決于測試條件，i小于10
div.classList.toggle("visible", i < 10);
alert(div.classList.contains("foo"));
//添加或刪除多個類
div.classList.add("foo","bar");
div.classList.remove("foo", "bar");
7. 如何選中如下代碼所有的li元素朝巫？ 如何選中btn元素鸿摇？
<div class="mod-tabs">
<ul>
<li>list1<li>
<li>list2<li>
<li>list3<li>
</ul>
<button class="btn">點我</button>
</div>
示例：
選中所有l(wèi)i元素
document.getElementsByTagName("li");
或 document.querySelectorAll("li");
選中btn元素
document.getElementsByClassName("btn");
或 document.querySelector(".btn")
