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

• Element.innerText屬性返回該元素包含的文本代碼。該屬性可讀寫，常用來設(shè)置某個節(jié)點(diǎn)的內(nèi)容。
  如果將該屬性設(shè)為空，等于刪除所有它包含的所有節(jié)點(diǎn)。
• Element.innerHTML屬性返回該元素包含的HTML代碼。該屬性可讀寫，常用來設(shè)置某個節(jié)點(diǎn)的內(nèi)容。
  如果將該屬性設(shè)為空，等于刪除所有它包含的所有節(jié)點(diǎn)。

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

• Element.children屬性返回一個HTMLCollection對象，包括當(dāng)前元素節(jié)點(diǎn)的所有子元素。它是一個類似數(shù)組的動態(tài)對象（實(shí)時反映網(wǎng)頁元素的變化）。如果當(dāng)前元素沒有子元素，則返回的對象包含零個成員。
• childNodes屬性返回一個NodeList集合，成員包括當(dāng)前節(jié)點(diǎn)的所有子節(jié)點(diǎn)。注意，除了HTML元素節(jié)點(diǎn)，該屬性返回的還包括Text節(jié)點(diǎn)和Comment節(jié)點(diǎn)。如果當(dāng)前節(jié)點(diǎn)不包括任何子節(jié)點(diǎn)，則返回一個空的NodeList集合。由于NodeList對象是一個動態(tài)集合，一旦子節(jié)點(diǎn)發(fā)生變化，立刻會反映在返回結(jié)果之中。

查詢元素有幾種常見的方法？ES5的元素選擇方法是什么?

• ** document.getElementsByTagName**方法返回所有指定HTML標(biāo)簽的元素，返回值是一個類似數(shù)組的HTMLCollection對象，可以實(shí)時反映HTML文檔的變化。如果沒有任何匹配的元素，就返回一個空集。
• document.getElementsByClassName方法返回一個類似數(shù)組的對象（HTMLCollection實(shí)例對象），包括了所有class名字符合指定條件的元素，元素的變化實(shí)時反映在返回結(jié)果中。
• document.getElementsByName方法用于選擇擁有name屬性的HTML元素（比如<form>、<radio<img>、<frame>、<embed>和<object>等），返回一個類似數(shù)組的的對象（NodeList對象的實(shí)例），因?yàn)閚ame屬性相同的元素可能不止一個。
• getElementById方法返回匹配指定id屬性的元素節(jié)點(diǎn)。如果沒有發(fā)現(xiàn)匹配的節(jié)點(diǎn)，則返回null。

ES5

• document.querySelector方法接受一個CSS選擇器作為參數(shù)，返回匹配該選擇器的元素節(jié)點(diǎn)。如果有多個節(jié)點(diǎn)滿足匹配條件，則返回第一個匹配的節(jié)點(diǎn)。如果沒有發(fā)現(xiàn)匹配的節(jié)點(diǎn)，則返回null。
• document.querySelectorAll方法與querySelector用法類似，區(qū)別是返回一個NodeList對象，包含所有匹配給定選擇器的節(jié)點(diǎn)。

但是，它們不支持CSS偽元素的選擇器（比如:first-line和:first-letter）和偽類的選擇器（比如:link和:visited），即無法選中偽元素和偽類。
如果querySelectorAll方法的參數(shù)是字符串*，則會返回文檔中的所有HTML元素節(jié)點(diǎn)。另外，querySelectorAll的返回結(jié)果不是動態(tài)集合，不會實(shí)時反映元素節(jié)點(diǎn)的變化。
最后，這兩個方法除了定義在document對象上，還定義在元素節(jié)點(diǎn)上，即在元素節(jié)點(diǎn)上也可以調(diào)用。

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

• **document.createElement **方法用來生成網(wǎng)頁元素節(jié)點(diǎn)。
• Element.getAttribute方法返回當(dāng)前元素節(jié)點(diǎn)的指定屬性。如果指定屬性不存在，則返回null。
• Element.setAttribute方法用于為當(dāng)前元素節(jié)點(diǎn)新增屬性。如果同名屬性已存在，則相當(dāng)于編輯已存在的屬性。
• Element.hasAttribute方法返回一個布爾值，表示當(dāng)前元素節(jié)點(diǎn)是否包含指定屬性。
• Element.removeAttribute方法用于從當(dāng)前元素節(jié)點(diǎn)移除屬性。

如何給頁面元素添加子元素？如何刪除頁面元素下的子元素?

• Node.appendChild方法接受一個節(jié)點(diǎn)對象作為參數(shù)，將其作為最后一個子節(jié)點(diǎn)，插入當(dāng)前節(jié)點(diǎn)。
  Node.appendChild**方法接受一個節(jié)點(diǎn)對象作為參數(shù)，將其作為最后一個子節(jié)點(diǎn)，插入當(dāng)前節(jié)點(diǎn)。
• Node.removeChild方法接受一個子節(jié)點(diǎn)作為參數(shù)，用于從當(dāng)前節(jié)點(diǎn)移除該子節(jié)點(diǎn)。它返回被移除的子節(jié)點(diǎn)。注意，這個方法是在父節(jié)點(diǎn)上調(diào)用的，不是在被移除的節(jié)點(diǎn)上調(diào)用的。
• Node.replaceChild方法用于將一個新的節(jié)點(diǎn)，替換當(dāng)前節(jié)點(diǎn)的某一個子節(jié)點(diǎn)。它接受兩個參數(shù)，第一個參數(shù)是用來替換的新節(jié)點(diǎn)，第二個參數(shù)將要被替換走的子節(jié)點(diǎn)。它返回被替換走的那個節(jié)點(diǎn)。
• Node.insertBefore方法用于將某個節(jié)點(diǎn)插入當(dāng)前節(jié)點(diǎn)的指定位置。它接受兩個參數(shù)，第一個參數(shù)是所要插入的節(jié)點(diǎn)，第二個參數(shù)是當(dāng)前節(jié)點(diǎn)的一個子節(jié)點(diǎn)，新的節(jié)點(diǎn)將插在這個節(jié)點(diǎn)的前面。該方法返回被插入的新節(jié)點(diǎn)。

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

classList屬性則返回一個類似數(shù)組的對象，當(dāng)前元素節(jié)點(diǎn)的每個class就是這個對象的一個成員。該對象的length屬性（只讀）返回當(dāng)前元素的class數(shù)量。
classList對象有下列方法。

• add()：增加一個class。
• remove()：移除一個class。
• contains()：檢查當(dāng)前元素是否包含某個class。
• toggle()：將某個class移入或移出當(dāng)前元素。
• item()：返回指定索引位置的class。
• toString()：將class的列表轉(zhuǎn)為字符串。

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

<div class="mod-tabs">
   <ul>
       <li>list1<li>
       <li>list2<li>
       <li>list3<li>
   </ul>
   <button class="btn">點(diǎn)我</btn>
</div>
  
<script>
  var liElements = document.querySelectorAll(".mod-tabs>ul>li");
  var btnElements = document.getElementsByClassName('btn');
  console.log(liElements);
  console.log(btnElements);
</script>