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

• innerText

innerText是一個可寫屬性颁督，返回元素內包含的文本內容践啄，在多層次的時候會按照元素由淺到深的順序拼接其內容

<div>
    <p>
        123
        <span>456</span>
    </p>
</div>

外層div的innerText返回內容是 "123456"

• innerHTML浇雹、outerHTML

innerHTML屬性作用和innerText類似沉御，但是不是返回元素的文本內容，而是返回元素的HTML結構昭灵，在寫入的時候也會自動構建DOM

<div>
    <p>
        123
        <span>456</span>
    </p>
</div>

外層div的innerHTML返回內容是 "<p>123<span>456</span></p>"
outerHTML 返回內容還包括本身

• 區(qū)別：innerText返回的是元素內包含的文本內容烂完，不包含html標簽抠蚣，innerHTML元素的HTML結構，包括html標簽和內容

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

• Node.childNodes 返回包含指定節(jié)點的子節(jié)點的集合吻谋，該集合為即時更新的集合（live collection）现横。

var ndList = elementNodeReference.childNodes;

ndList變量為 NodeList類型戒祠，且為只讀姜盈。

• ParentNode.children 是一個只讀屬性，返回 一個Node的子elements的活 HTMLCollection栋操。

var children = node.children;
var elList = elementNodeReference.children;

備注
children屬性為只讀屬性蜕青，對象類型為 HTMLCollection凯正，你可以使用 elementNodeReference.children[1].nodeName來獲取某個子元素的標簽名稱。

• 區(qū)別：
  elem.children: 獲取指定元素的子元素列表，包含HTML元素節(jié)點地淀。
  elem.childNodes：獲取指定元素的子元素列表，包含HTML元素節(jié)实苞、文本節(jié)點黔牵、注釋節(jié)點爷肝，內容更加豐富。

題目3：查詢元素有幾種常見的方法金赦？ES5的元素選擇方法是什么?

• getElementById()

getElementById方法返回匹配指定ID屬性的元素節(jié)點。如果沒有發(fā)現(xiàn)匹配的節(jié)點素邪，則返回null兔朦。這也是獲取一個元素最快的方法

var elem = document.getElementById("test");

• getElementsByClassName()

getElementsByClassName方法返回一個類似數(shù)組的對象（HTMLCollection類型的對象）磨确，包括了所有class名字符合指定條件的元素（搜索范圍包括本身）乏奥，元素的變化實時反映在返回結果中邓了。這個方法不僅可以在document對象上調用，也可以在任何元素節(jié)點上調用照宝。

var elements = document.getElementsByClassName(names);

getElementsByClassName方法的參數(shù)厕鹃，可以是多個空格分隔的class名字，返回同時具有這些節(jié)點的元素剂碴。

document.getElementsByClassName('red test');

• getElementsByTagName()

getElementsByTagName方法返回所有指定標簽的元素（搜索范圍包括本身）忆矛。返回值是一個HTMLCollection對象洪碳，也就是說，搜索結果是一個動態(tài)集合，任何元素的變化都會實時反映在返回的集合中镜雨。這個方法不僅可以在document對象上調用荚坞，也可以在任何元素節(jié)點上調用。

var paras = document.getElementsByTagName("p");
上面代碼返回當前文檔的所有p元素節(jié)點各淀。

注意碎浇，getElementsByTagName方法會將參數(shù)轉為小寫后奴璃，再進行搜索城豁。

• 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é)點的變化無法實時反映在返回結果中柱蟀。

elementList = document.querySelectorAll(selectors);

querySelectorAll方法的參數(shù)，可以是逗號分隔的多個CSS選擇器畜眨，返回所有匹配其中一個選擇器的元素康聂。

var matches = document.querySelectorAll("div.note, div.alert");

上面代碼返回class屬性是note或alert的div元素恬汁。

• elementFromPoint()

elementFromPoint方法返回位于頁面指定位置的元素蕊连。

var element = document.elementFromPoint(x, y);

上面代碼中，elementFromPoint方法的參數(shù)x和y尝蠕，分別是相對于當前窗口左上角的橫坐標和縱坐標看彼，單位是CSS像素标锄。

elementFromPoint方法返回位于這個位置的DOM元素料皇，如果該元素不可返回（比如文本框的滾動條）星压，則返回它的父元素（比如文本框）娜膘。如果坐標值無意義（比如負值），則返回null军洼。

題目4：如何創(chuàng)建一個元素匕争？如何給元素設置屬性？如何刪除屬性淑际？

創(chuàng)建元素

• createElement()

createElement方法用來生成HTML元素節(jié)點春缕。

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

createElement方法的參數(shù)為元素的標簽名艘蹋，即元素節(jié)點的tagName屬性。如果傳入大寫的標簽名宅荤，會被轉為小寫。如果參數(shù)帶有尖括號（即<和>）或者是null惫确，會報錯蚯舱。

• createTextNode()

createTextNode方法用來生成文本節(jié)點改化，參數(shù)為所要生成的文本節(jié)點的內容。

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

上面代碼新建一個div節(jié)點和一個文本節(jié)點

• createDocumentFragment()

createDocumentFragment方法生成一個DocumentFragment對象枉昏。

var docFragment = document.createDocumentFragment();

DocumentFragment對象是一個存在于內存的DOM片段陈肛，但是不屬于當前文檔，常常用來生成較復雜的DOM結構兄裂，然后插入當前文檔句旱。這樣做的好處在于，因為DocumentFragment不屬于當前文檔懦窘，對它的任何改動前翎，都不會引發(fā)網(wǎng)頁的重新渲染，比直接修改當前文檔的DOM有更好的性能表現(xiàn)畅涂。

插入元素

• appendChild()

在元素（newDiv）的子元素末尾添加子元素（newContent）

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.appendChild(newContent);   // newDiv作為父元素港华，newContent為子元素

• insertBefore()

在某個元素（newDiv）的子元素（newDiv.firstChild）之前插入元素（newContent）

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.insertBefore(newContent, newDiv.firstChild);

• replaceChild()

replaceChild()接受兩個參數(shù)：要插入的元素和要替換的元素

newDiv.replaceChild(newElement, oldElement);

屬性操作

• getAttribute()

getAttribute()用于獲取元素的attribute值

node.getAttribute('id');

• createAttribute()

createAttribute()方法生成一個新的屬性對象節(jié)點橙数，并返回它。

attribute = document.createAttribute(name);

createAttribute方法的參數(shù)name迎献，是屬性的名稱播演。

• 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()用于刪除元素屬性

node.removeAttribute('id');

• element.attributes

當然上面的方法做的事情也可以通過類操作數(shù)組屬性element.attributes來實現(xiàn)

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

var node=document.querySelector('body');
var newContent=document.createElement('div');
node.appendChild(newContent);//添加至子元素最后
node.insertBefore(newContent,node.firstChild)//添加到子元素node.firstChild前
node.removeChild(node.firstChild);//刪除子元素node.firstChild

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

element.classList方法：
add(class1, class2, ...);//在元素中添加一個或多個類名西雀。如果指定的類名已存在叁温，則不會添加
contains(class);//返回布爾值谤草，判斷指定的類名是否存在。
可能值：
true - 元素包已經(jīng)包含了該類名
false - 元素中不存在該類名
item(index);//返回類名在元素中的索引值花鹅。索引值從 0 開始箩帚。如果索引值在區(qū)間范圍外則返回 null
remove(class1, class2, ...);//移除元素中一個或多個類名。
注意： 移除不存在的類名，不會報錯站绪。
toggle(class, true|false);//在元素中切換類名馁筐。
第一個參數(shù)為要在元素中移除的類名赦抖，并返回 false要尔。
如果該類名不存在則會在元素中添加類名，并返回 true。
第二個是可選參數(shù)，是個布爾值用于設置元素是否強制添加或移除類誊爹，不管該類名是否存在办成。例如：

移除一個 class: element.classList.toggle("classToRemove", false);
添加一個 class: element.classList.toggle("classToAdd", true);

題目7： 如何選中如下代碼所有的li元素？ 如何選中btn元素馆截？

<div class="mod-tabs">
   <ul>
       <li>list1</li>
       <li>list2</li>
       <li>list3</li>
   </ul>
   <button class="btn">點我</button>
</div>
<script type="text/javascript">
  var node=document.getElementsByTagName('li');//標簽選擇li
  var node=document.querySelectorAll('li');//標簽選擇li
  var node=document.getElementsByClassName('btn');//類名選擇button
  var node=document.getElementsByTagName('button');//標簽選擇button
  var node=document.querySelector('.btn');//類名選擇button
  var node=document.querySelector('button');//標簽選擇button
</script>