1、 dom對象的innerText和innerHTML有什么區別？

• innerText是一個可寫屬性，返回元素內包含的文本內容，在多層次的時候會按照元素由淺到深的順序拼接其內容
• innerHTML屬性作用和innerText類似，但是不是返回元素的文本內容，而是返回元素的HTML結構，在寫入的時候也會自動構建DOM
  舉例：

<div class="d1">
    <a href="">點我</a><img src="" alt="">
</div>
<script>
    var text  = document.querySelector(".d1").innerText;
    var html = document.querySelector(".d1").innerHTML;
    console.log(text);//"點我"
    console.log(html);//"<a href="">點我</a><img src="" alt="">"
</script>

2、 elem.children和elem.childNodes的區別？

• elem.children只包括子元素對象。
• elem.childNodes包括所有的子元素對象和文本節點。
  舉例：

<div class="d1">
    <a href="">點我</a>
    <img src="" alt="">
</div>
<script>
    console.log(document.querySelector(".d1").children);
    console.log(document.querySelector(".d1").childNodes);
</script>
//[a, img]
//[text, a, text, img, text]

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

常見六種：getElementById()、getElementsByClassName()、getElementsByTagName()、getElementsByName()、querySelector()、querySelectorAll()（ES5），后兩種是ES5的元素選擇方法

• getElementById()
  getElementById方法返回匹配指定ID屬性的元素節點。如果沒有發現匹配的節點，則返回null。這也是獲取一個元素最快的方法

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

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

var element = document.getElementsByClassName('tab')[0];
var element2 = element.getElementsByClassName('tab2')[0];

getElementsByClassName方法的參數，可以是多個空格分隔的class名字，返回同時具有這些節點的元素。

document.getElementsByClassName('red test');

• getElementsByTagName()（不區分大小寫）
  getElementsByTagName方法返回所有指定標簽的元素（搜索范圍包括本身）。返回值是一個HTMLCollection對象，也就是說，搜索結果是一個動態集合，任何元素的變化都會實時反映在返回的集合中。這個方法不僅可以在document對象上調用，也可以在任何元素節點上調用。

var paras = document.getElementsByTagName("p");

• 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屬性最好設為不一樣的值。

• querySelector()（ES5）
  querySelector方法返回匹配指定的CSS選擇器的元素節點。如果有多個節點滿足匹配條件，則返回第一個匹配的節點。如果沒有發現匹配的節點，則返回null。

var el1 = document.querySelector(".myclass");
var el2 = document.querySelector('#myParent > [ng-click]');
querySelector方法無法選中CSS偽元素。

• querySelectorAll()（ES5）
  querySelectorAll方法返回匹配指定的CSS選擇器的所有節點，返回的是NodeList類型的對象。NodeList對象不是動態集合，所以元素節點的變化無法實時反映在返回結果中。

elementList = document.querySelectorAll(selectors);

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

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

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

4、5、如何創建一個元素？如何給元素設置屬性？如何刪除屬性

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

DOM操作一般有元素節點、屬性節點、文本節點的操作。

創建DOM節點

• 創建元素節點：createElement()
  createElement方法用來生成HTML元素節點。

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

createElement方法的參數為元素的標簽名，即元素節點的tagName屬性。如果傳入大寫的標簽名，會被轉為小寫。如果參數帶有尖括號（即<和>）或者是null，會報錯。

• 創建元素的屬性節點：createAttribute()
  createAttribute()方法生成一個新的屬性對象節點，并返回它。

attribute = document.createAttribute(name);

createAttribute方法的參數name，是屬性的名稱。

• 創建文本節點：createTextNode()
  createTextNode方法用來生成文本節點，參數為所要生成的文本節點的內容。

var newContent = document.createTextNode("Hello");

上面代碼新建一個文本節點

• 創建DOM片段：createDocumentFragment()
  createDocumentFragment方法生成一個DocumentFragment對象。

var docFragment = document.createDocumentFragment();

DocumentFragment對象是一個存在于內存的DOM片段，但是不屬于當前文檔，常常用來生成較復雜的DOM結構，然后插入當前文檔。這樣做的好處在于，因為DocumentFragment不屬于當前文檔，對它的任何改動，都不會引發網頁的重新渲染，比直接修改當前文檔的DOM有更好的性能表現。

• clone元素
  cloneNode()方法用于克隆元素，方法有一個布爾值參數，傳入true的時候會深復制，也就是會復制元素及其子元素（IE還會復制其事件），false的時候只復制元素本身

node.cloneNode(true);

增、刪、改DOM元素節點：

• 添加元素節點：

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

• 刪除元素節點：

removeChild()方法

parentNode.removeChild(childNode);

• 更改元素節點：

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

newDiv.replaceChild(newElement, oldElement);

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

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

外層div的innerHTML返回內容是 "<p>123<span>456</span></p>"

增、刪、改、查DOM屬性節點：

• 查找、獲取屬性節點：getAttribute()
  getAttribute()用于獲取元素的attribute值

node.getAttribute('id');

• 設置、更改 、添加屬性節點：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()

node.removeAttribute('id');

• element.attributes

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

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

element.classLis方法有t有add( )、remove( )、toggle( )、contains( )

• 判斷是否包含 class：element.classList.contains( 'class' )，返回true/false

<div class="d1">
    <a href="">點我</a>
    <img src="" alt="">
</div>
<script>
    console.log(document.querySelector(".d1").classList.contains( 'd1' );
    console.log(document.querySelector(".d1").classList.contains( 'd2' );
</script>
//true
//false

• 添加一個class：element.classList.add( 'class' )

<div class="d1">
    <a href="">點我</a>
    <img src="" alt="">
</div>
<script>
    console.log(document.querySelector(".d1").classList.contains( 'd2' ));
    document.querySelector(".d1").classList.add( 'd2' );
    console.log(document.querySelector(".d1").classList.contains( 'd2' ));
</script>
//false
//true

• 刪除一個class：element.classList.remove( 'class' )

<div class="d1">
    <a href="">點我</a>
    <img src="" alt="">
</div>
<script>
    console.log(document.querySelector(".d1").classList.contains( 'd1' ));
    document.querySelector(".d1").classList.remove( 'd1' );
    console.log(document.querySelector(".d1").classList.contains( 'd1' ));
</script>
//true
//false

• 切換（有則刪、無則加）class：element.classList.toggle( 'class' )

<div class="d1">
    <a href="">點我</a>
    <img src="" alt="">
</div>
<script>
    console.log(document.querySelector(".d1").classList.contains( 'd1' ));
    document.querySelector(".d1").classList.toggle( 'd1' );
    console.log(document.querySelector(".d1").classList.contains( 'd1' ));
    document.querySelector(".d1").classList.toggle( 'd1' );
    console.log(document.querySelector(".d1").classList.contains( 'd1' ));
</script>
//true
//false
//true

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

<div class="mod-tabs">
   <ul>
       <li>list1</li>
       <li>list2</li>
       <li>list3</li>
   </ul>
   <button class="btn">點我</button>
</div>

• 選中所有的 li 元素

var lis = document.querySelectorAll( '.mod-tabs>ul>li' )

或

var lis = document.getElementsByTagName( 'li' )

或

var lis = document.getElementsByClassName( 'mod-tabs' )[0].children[0].children

• 選中 btn 元素

var btn = document.querySelector( '.btn' )

或

var btn = document.getElementsByTagName( 'button' )[0]

或

var btn = document.getElementsByClassName( 'mod-tabs' )[0].children[1]