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

• innerText：是一個(gè)可寫屬性，返回元素內(nèi)包含的文本內(nèi)容，在多層次的時(shí)候會(huì)按照元素由淺到深的順序拼接其內(nèi)容。
• innerHTML：作用和innerText類似，但是不是返回元素的文本內(nèi)容，而是返回元素的HTML結(jié)構(gòu)，在寫入的時(shí)候也會(huì)自動(dòng)構(gòu)建DOM。

<div>
    <p>
        123
        <span>456</span>
    </p>
</div>
innerText返回的是   123456
innerHTML返回的是 <p>123<span>456</span></p>

題目2： elem.children和elem.childNodes的區(qū)別？

elem.chidren：非標(biāo)準(zhǔn)屬性，它返回指定元素的子元素HTMLCollection集合，該集合只包含HTML節(jié)點(diǎn)，不包含文本節(jié)點(diǎn)。
elem.chidNodes：標(biāo)準(zhǔn)屬性，它返回指定元素的子元素NodeList節(jié)點(diǎn)集合，包含HTML節(jié)點(diǎn)、所有屬性、文本節(jié)點(diǎn)。

Paste_Image.png

elem.chidNodes會(huì)出現(xiàn)text，而elem.chidren不會(huì)。

題目3：查詢?cè)赜袔追N常見的方法？ES5的元素選擇方法是什么?

• 常見方法：

方法 |說明
----|------|----
getElementById()| getElementById方法返回匹配指定ID屬性的元素節(jié)點(diǎn)。如果沒有發(fā)現(xiàn)匹配的節(jié)點(diǎn)，則返回null。這也是獲取一個(gè)元素最快的方法。
getElementsByClassName() |getElementsByClassName方法返回一個(gè)類似數(shù)組的對(duì)象。（HTMLCollection類型的對(duì)象），包括了所有class名字符合指定條件的元素（搜索范圍包括本身），元素的變化實(shí)時(shí)反映在返回結(jié)果中。
getElementsByTagName() | getElementsByTagName方法返回所有指定標(biāo)簽的元素（搜索范圍包括本身）。返回值是一個(gè)HTMLCollection對(duì)象，也就是說，搜索結(jié)果是一個(gè)動(dòng)態(tài)集合，任何元素的變化都會(huì)實(shí)時(shí)反映在返回的集合中。這個(gè)方法不僅可以在document對(duì)象上調(diào)用，也可以在任何元素節(jié)點(diǎn)上調(diào)用。
getElementsByName() | getElementsByName方法用于選擇擁有name屬性的HTML元素，比如form、img、frame、embed和object，返回一個(gè)NodeList格式的對(duì)象，不會(huì)實(shí)時(shí)反映元素的變化。

• ES5：

方法 |說明
----|------|----
querySelector()|querySelector方法返回匹配指定的CSS選擇器的元素節(jié)點(diǎn)。如果有多個(gè)節(jié)點(diǎn)滿足匹配條件，則返回第一個(gè)匹配的節(jié)點(diǎn)。如果沒有發(fā)現(xiàn)匹配的節(jié)點(diǎn)，則返回null。
querySelectorAll() |querySelectorAll方法返回匹配指定的CSS選擇器的所有節(jié)點(diǎn)，返回的是NodeList類型的對(duì)象。NodeList對(duì)象不是動(dòng)態(tài)集合，所以元素節(jié)點(diǎn)的變化無法實(shí)時(shí)反映在返回結(jié)果中。

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

• 創(chuàng)建元素
  • createElement()用來生成HTML元素節(jié)點(diǎn)。參數(shù)為元素的標(biāo)簽名，即元素節(jié)點(diǎn)的tagName屬性。如果傳入大寫的標(biāo)簽名，會(huì)被轉(zhuǎn)為小寫。如果參數(shù)帶有尖括號(hào)（即<和>）或者是null，會(huì)報(bào)錯(cuò)。

var newDiv = document.createElement("div");

• 設(shè)置屬性
  • setAttribute()方法用于設(shè)置元素屬性

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);

• 刪除屬性
  • removeAttribute()用于刪除元素屬性

node.removeAttribute('id');

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

• 添加：
  • appendChild()在元素末尾添加元素

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.appendChild(newContent);

• 刪除：
  • removeChild()

parentNode.removeChild(childNode);

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

• 方法：
  • add(string[,string]) 添加指定class值，若已存在則忽略
  • remove(string[,string]) 刪除指定class值
  • item(number) 通過參數(shù)來搜索索引返回class值
  • toggle(string,[,force]) 當(dāng)只有第一個(gè)參數(shù)時(shí)，當(dāng)class值存在時(shí)，刪除class值返回false,當(dāng)class不存在時(shí)，添加該參數(shù)作為class值，并返回true；當(dāng)?shù)诙€(gè)參數(shù)存在時(shí)，當(dāng)?shù)诙€(gè)參數(shù)的結(jié)果為true時(shí)，添加class值,當(dāng)計(jì)算結(jié)果為false時(shí)，刪除第一參數(shù)對(duì)應(yīng)的class
  • contains(string) 檢查元素中的class是否有指定值對(duì)應(yīng)的class,返回布爾值
• 判斷：
  • 判斷是否包含div.classList.contains(str);
  • 添加classdiv.classList.add(str);
  • 刪除classdiv.classList.remove(str);

題目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>
              //document.querySelectorAll('.mod-tabs li')
             //document.querySelector('.mod-tabs btn')