1： dom對象的innerText和innerHTML有什么區(qū)別龟糕？
- innerText：當使用innerText讀取值時浅蚪，如果有HTML標簽朦促，它會過濾掉HTML標簽叉信，并且按照由淺入深的順序?qū)⑺械奈谋酒唇悠饋怼?br> 當使用innerText寫入值時置媳，結(jié)果會刪除dom對象的所有子節(jié)點于樟，插入包含的相應文本值的文本節(jié)點。如果有HTML標簽拇囊，它會對HTML語法字符（小于號迂曲、大于號、引號及和號等）進行編碼寥袭，使HTML標簽以正常的文本形式出現(xiàn)在dom對象中路捧。舉例：
<<body>
<div id="content">
<p>This is a <strong>test</strong> paragraph</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
<script>
var oDiv = document.getElementById("content");
console.log(oDiv.innerText);
oDiv.innerText = "<h2>Hello & <strong>hunger</strong></h2>";
innerText運行結(jié)果
- innerHTML當使用innerHTML讀取值時，返回dom對象的所有子節(jié)點（包括元素传黄、注釋和文本節(jié)點）對應的HTML標記杰扫。
當使用innerHTML寫入值時，會根據(jù)寫入的值創(chuàng)建新的DOM樹膘掰，然后用這個DOM樹完全替換原先所有的子節(jié)點章姓。舉例
body>
<div id="content">
<p>This is a <strong>test</strong> paragraph</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
<script>
var oDiv = document.getElementById("content");
console.log(oDiv.innerHTML);
oDiv.innerHTML = "<h2>Hello & <strong>hunger</strong></h2>";
innerHTML運行結(jié)果.png
那么總而言之：innerHTML是一種插入HTML字符的方法，所以它會根據(jù)標簽生成DOM樹识埋，而innerText是一種插入文本的方法凡伊，所以它會過濾掉標簽。
2： elem.children和elem.childNodes的區(qū)別惭聂？
- elem.children:獲取元素的所有子節(jié)點dom對象窗声，不包含自身的文本內(nèi)容；
- elem.childNodes:獲取元素的所有子節(jié)點對象辜纲，包含自身的文本內(nèi)容笨觅；
- elem.childNodes:會把子節(jié)點和父標簽間的空格當作文本內(nèi)容拦耐；
3：查詢元素有幾種常見的方法？ES5的元素選擇方法是什么?
- getElementById()
getElementById方法返回匹配指定ID屬性的元素節(jié)點见剩。如果沒有發(fā)現(xiàn)匹配的節(jié)點杀糯，則返回null。這也是獲取一個元素最快的方法
var elem = document.getElementById("test");
- getElementsByClassName()
getElementsByClassName方法返回一個類似數(shù)組的對象（HTMLCollection類型的對象）苍苞，包括了所有class名字符合指定條件的元素（搜索范圍包括本身）固翰，元素的變化實時反映在返回結(jié)果中。這個方法不僅可以在document對象上調(diào)用羹呵，也可以在任何元素節(jié)點上調(diào)用骂际。
var elements = document.getElementsByClassName(names);
getElementsByClassName方法的參數(shù)，可以是多個空格分隔的class名字冈欢，返回同時具有這些節(jié)點的元素歉铝。
document.getElementsByClassName('red test');
- getElementsByTagName()
getElementsByTagName方法返回所有指定標簽的元素（搜索范圍包括本身）。返回值是一個HTMLCollection對象凑耻，也就是說太示，搜索結(jié)果是一個動態(tài)集合，任何元素的變化都會實時反映在返回的集合中香浩。這個方法不僅可以在document對象上調(diào)用类缤，也可以在任何元素節(jié)點上調(diào)用。
var paras = document.getElementsByTagName("p");
上面代碼返回當前文檔的所有p元素節(jié)點邻吭。
注意餐弱，getElementsByTagName方法會將參數(shù)轉(zhuǎn)為小寫后，再進行搜索镜盯。
- getElementsByName()
getElementsByName方法用于選擇擁有name屬性的HTML元素岸裙，比如form猖败、img速缆、frame、embed和object恩闻，返回一個NodeList格式的對象艺糜，不會實時反映元素的變化。
// 假定有一個表單是<form name="x"></form>
var forms = document.getElementsByName("x");
forms[0].tagName // "FORM"
注意幢尚，在IE瀏覽器使用這個方法破停，會將沒有name屬性、但有同名id屬性的元素也返回尉剩，所以name和id屬性最好設為不一樣的值真慢。
ES5的元素選擇方法
- querySelector()
querySelector方法返回匹配指定的CSS選擇器的元素節(jié)點。如果有多個節(jié)點滿足匹配條件理茎，則返回第一個匹配的節(jié)點黑界。如果沒有發(fā)現(xiàn)匹配的節(jié)點管嬉，則返回null。
var el1 = document.querySelector(".myclass");
var el2 = document.querySelector('#myParent > [ng-click]');
注意：querySelector方法無法選中CSS偽元素朗鸠。
- querySelectorAll()
querySelectorAll方法返回匹配指定的CSS選擇器的所有節(jié)點蚯撩，返回的是NodeList類型的對象。NodeList對象不是動態(tài)集合烛占，所以元素節(jié)點的變化無法實時反映在返回結(jié)果中胎挎。
elementList = document.querySelectorAll(selectors);
querySelectorAll方法的參數(shù)，可以是逗號分隔的多個CSS選擇器忆家，返回所有匹配其中一個選擇器的元素犹菇。
var matches = document.querySelectorAll("div.note, div.alert");
上面代碼返回class屬性是note或alert的div元素。
4：如何創(chuàng)建一個元素芽卿？如何給元素設置屬性项栏？如何刪除屬性
- 創(chuàng)建元素
- createElement()
createElement方法的參數(shù)為元素的標簽名，即元素節(jié)點的tagName屬性蹬竖。
var newDiv = document.createElement('div');
createElement方法的參數(shù)為元素的標簽名沼沈，即元素節(jié)點的tagName屬性。如果傳入大寫的標簽名币厕，會被轉(zhuǎn)為小寫列另。如果參數(shù)帶有尖括號(即<和>)或者null，會報錯旦装。
- createTextNode()
createTextNode方法用來生成文本節(jié)點页衙，參數(shù)為所要生成的文本節(jié)點的內(nèi)容；
var newDiv = document.createElement('div');
var newContent = document.createTextNode('hello');
newDive.appendChild(newContent);
上面代碼新建一個div節(jié)點和一個文本節(jié)點
- createDocumentFragment()
createDocumentFragment方法生成一個DocumentFragment對象阴绢。
var docFragment = document.createDocumentFragment();
DocumentFragment對象是一個存在于內(nèi)存的DOM片段店乐，但是不屬于當前文檔，常常用來生成較復雜的DOM結(jié)構(gòu)呻袭，然后插入當前文檔眨八。這樣做的好處在于，因為DocumentFragment不屬于當前文檔左电，對它的任何改動廉侧，都不會引發(fā)網(wǎng)頁的重新渲染，比直接修改當前文檔的DOM有更好的性能表現(xiàn)篓足。
- 設置元素的屬性
setAttribute()
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);
刪除屬性
romoveAttribute()
removeAttribute()用于刪除元素屬性
5：如何給頁面元素添加子元素段誊？如何刪除頁面元素下的子元素?
appendChild()
在元素末尾添加元素
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.appendChild(newContent);
insertBefore()
在某個元素之前插入元素
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.insertBefore(newContent, newDiv.firstChild);
replaceChild()
replaceChild()接受兩個參數(shù)：要插入的元素和要替換的元素
newDiv.replaceChild(newElement, oldElement);
6： element.classList有哪些方法？如何判斷一個元素的 class 列表中是包含某個 class栈拖？如何添加一個class连舍？如何刪除一個class?
element.classList的方法
add()：增加一個class。
remove()：移除一個class涩哟。
contains()：檢查當前元素是否包含某個class索赏。
toggle()：將某個class移入或移出當前元素诗鸭。
item()：返回指定索引位置的class。
toString()：將class的列表轉(zhuǎn)為字符串参滴。
具體應用
myDiv.classList.add('myCssClass');//在myDiv元素上添加一個class
myDiv.classList.add('foo', 'bar');
myDiv.classList.remove('myCssClass');//刪除myDiv元素中名為myCssClass的class
myDiv.classList.toggle('myCssClass'); // 如果myCssClass不存在就加入强岸，否則移除
myDiv.classList.contains('myCssClass'); // 返回 true 或者 false
myDiv.classList.item(0); // 返回第一個Class
myDiv.classList.toString();
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元素
var getbytagname = document.getElementsByTagName('li');
或
var getbyqueryall = document.querySelectorAll('li');
如何選中btn元素
document.getElementsByClassName('btn')
或
document.querySelector('.btn')
