1、dom對(duì)象的innerText和innerHTML有什么區(qū)別？

• innerText 返回元素內(nèi)包含文本內(nèi)容
• innerHTML 返回元素的HTML結(jié)構(gòu)，在寫入的時(shí)候也會(huì)自動(dòng)構(gòu)建DOM
• outerHTML 返回內(nèi)容還包括本身
  例：

<div id="box">
  <p class="num num1">123<span class="num num2">456</span></p>
</div>

var elem = document.getElementById('box')
console.log(elem.innerText)     //123 456
console.log(elem.innerHTML)     //<p>123<span>456</span></p>
console.log(elem.outerHTML)    //<div id="box"> <p>123<span>456</span></p> </div>

2、elem.children和elem.childNodes的區(qū)別？

• elem.children 不包含空白節(jié)點(diǎn)
• elem.childNodes 包含空白節(jié)點(diǎn)
  

3、4種常見查詢?cè)胤椒?/h1>

• 通過id查找，由于id只有一個(gè)，注意只有這個(gè)才是Elelment 沒有帶s
  var elem = document.getElementById('box')

• 通過class名稱查找
  var elements = document.getElementsByClassName("num")

• 通過標(biāo)簽名稱查詢
  var paras = document.getElementsByTagName("p")

• 用于選擇擁有name屬性的HTML元素，比如form、img、frame、embed和object，返回一個(gè)NodeList格式的對(duì)象，不會(huì)實(shí)時(shí)反映元素的變化。
  var images = document.getElementsByName("image")

4種常見查詢?cè)胤椒?/div>

4、ES5的元素選擇方法：querySelector()、querySelectorAll()

ES5的元素選擇方法：querySelector()

function $(str){
    return document.querySelector(str)    //返回匹配的第一個(gè)節(jié)點(diǎn)
} 
runction $$(str){
    return document.querySelectorAll(str)   //返回全部匹配的節(jié)點(diǎn)
}
$('#box')   //調(diào)用函數(shù)查找id為box的
$$('.num')

5、getElementsByID 和 querySelector的區(qū)別

var btn1 = document.getElementByID('btn')
var btn2 = document.querySelector('#btn')

1、區(qū)別

getXXXByXXX 獲取的是動(dòng)態(tài)集合，querySelector獲取的是靜態(tài)集合。
簡(jiǎn)單的說就是，動(dòng)態(tài)就是選出的元素會(huì)隨文檔改變，靜態(tài)的不會(huì)，取出來之后就和文檔的改變無關(guān)了。
先看看一個(gè)例子：

<ul>  
    <li>aaa</li> 
    <li>ddd</li>  
    <li>ccc</li>
</ul>

//demo1
var ul = document.getElementsByTagName('ul')[0],
    lis = ul.getElementsByTagName("li");
for(var i = 0; i < lis.length ; i++){   
    ul.appendChild(document.createElement("li"));
}
console.log( lis.length);  //6

//demo2
var ul = document.querySelectorAll('ul'),    
    lis = ul.querySelectorAll("li");
for(var i = 0; i < lis.length ; i++){    
   ul.appendChild(document.createElement("li"))
   //這個(gè)時(shí)候就創(chuàng)建了3個(gè)新的li，添加在ul列表上。
}
console.log( lis.length);  //3 ，輸出的結(jié)果仍然是3，不是此時(shí)li的數(shù)量6

Demo1 中的 lis 是一個(gè)動(dòng)態(tài)的 Node List， 每一次調(diào)用 lis 都會(huì)重新對(duì)文檔進(jìn)行查詢，導(dǎo)致無限循環(huán)的問題。

2、性能

可通過該網(wǎng)站測(cè)試：https://jsperf.com/getelementsby-vs-queryselectorall/7
測(cè)試結(jié)果：getElementBy系列的執(zhí)行速度基本都是querySelectorAll的100+倍

3、querySelector和querySelectorAll()

querySelector() 方法僅僅返回匹配指定選擇器的第一個(gè)元素。如果你需要返回所有的元素，請(qǐng)使用 querySelectorAll() 方法替代。

4、總結(jié)

如果只要一次查找就可得到元素時(shí)，首選getXXXByXXX ，因?yàn)樗煲恍?br> 如果需要經(jīng)過多級(jí)查找，才能得到元素時(shí)，首選querySelector，因?yàn)樗奖?/p>

5、如何創(chuàng)建一個(gè)元素？如何給元素設(shè)置屬性？如何刪除屬性？

增 創(chuàng)建一個(gè)元素 var newElem = document.createElement()
刪 刪除屬性newElem.removeAttribute('屬性名')
改 設(shè)置元素屬性newElem.setAttribute('屬性名','屬性值')

6、如何給頁(yè)面元素添加子元素？如何刪除頁(yè)面元素下的子元素?

appendChild() 在元素末尾添加元素
removeChild() 刪除某元素下的子元素
insertBefore() 在元素之前插入元素
replaceChild() 接受兩個(gè)參數(shù)：要插入的元素和要替換的元素

7、element.classList有哪些方法？如何判斷一個(gè)元素的 class 列表中是包含某個(gè) class？如何添加一個(gè)class？如何刪除一個(gè)class?

1. add(class1,class2,…)：在元素中添加一個(gè)或多個(gè)類名。如果指定的類名已存在，則不會(huì)添加。
2. contains(class)：返回布爾值，判斷指定的類名是否存在。
3. item(index)：返回類名在元素中的索引值。索引值從 0 開始，在區(qū)間范圍外則返回null。
4. remove(class1,class2,…)：移除元素中一個(gè)或多個(gè)類名。移除不存在的類名，不會(huì)報(bào)錯(cuò)。
5. toggle(class,true|false)：在元素中切換類名。第一個(gè)參數(shù)為要在元素中移除的類名，并返回 false。 如果該類名不存在則會(huì)在元素中添加類名，并返回 true。 第二個(gè)是可選參數(shù)，是個(gè)布爾值用于設(shè)置元素是否強(qiáng)制添加或移除類，不管該類名是否存在。

8、如何選中如下代碼所有的li元素？ 如何選中btn元素？

<div class="mod-tabs">
   <ul>
       <li>list1<li>
       <li>list2<li>
       <li>list3<li>
   </ul>
   <button class="btn">點(diǎn)我</button>
</div>

<script>
    //ES5
    document.querySelector('.btn')
    document.querySelectorAll('li')

    //常見
    document.getElementsByClassName('btn');
    document.getElementsByTagName("li")
</script>