1.概述
1.1DOM
DOM是JavaScript操作網頁的接口，全稱為“文檔對象模型”（Document Object Model）。文檔對象模型 (DOM) 是HTML和XML文檔的編程接口。它給文檔（結構樹）提供了一個結構化的表述并且定義了一種方式—程序可以對結構樹進行訪問，以改變文檔的結構，樣式和內容。
瀏覽器會根據DOM模型，將結構化文檔（比如HTML和XML）解析成一系列的節點，再由這些節點組成一個樹狀結構（DOM Tree）。所有的節點和最終的樹狀結構，都有規范的對外接口。所以，DOM可以理解成網頁的編程接口。
DOM 提供了一種表述形式將文檔作為一個結構化的節點組以及包含屬性和方法的對象。從本質上說，它將web 頁面和腳本或編程語言連接起來了。
要改變頁面的某個東西，JavaScript就需要獲得對HTML文檔中所有元素進行訪問的入口。這個入口，連同對 HTML 元素進行添加、移動、改變或移除的方法和屬性，都是通過DOM來獲得的
1.2 document對象
每個載入瀏覽器的HTML文檔都會成為document對象。document對象包含了文檔的基本信息，我們可以通過JavaScript對HTML頁面中的所有元素進行訪問、修改。
1.3節點
DOM的最小組成單位叫做節點（node）。文檔的樹形結構（DOM樹），就是由各種不同類型的節點組成。每個節點可以看作是文檔樹的一片葉子。
節點的類型有七種。
Document：整個文檔樹的頂層節點DocumentType，聲明節點 ：doctype標簽（比如<!DOCTYPE html>）Element，元素節點：網頁的各種HTML標簽（比如<body>、<a>等）Attribute，屬性節點：網頁元素的屬性（比如class="right"）Text，文本節點：標簽之間或標簽包含的文本Comment，注釋節點：注釋DocumentFragment，文檔節點：文檔的片段
這七種節點都屬于瀏覽器原生提供的節點對象的派生對象，具有一些共同的屬性和方法。
1.4節點樹
一個文檔的所有節點，按照所在的層級，可以抽象成一種樹狀結構。這種樹狀結構就是DOM。
最頂層的節點就是document節點，它代表了整個文檔。文檔里面最高一層的HTML標簽，一般是<html>，它構成樹結構的根節點（root node），其他HTML標簽節點都是它的下級。
除了根節點以外，其他節點對于周圍的節點都存在三種關系。
1.父節點關系（
parentNode）：直接的那個上級節點
2.子節點關系（childNodes）：直接的下級節點
3.同級節點關系（sibling）：擁有同一個父節點的節點
DOM提供操作接口，用來獲取三種關系的節點。其中，子節點接口包括firstChild（第一個子節點）和lastChild（最后一個子節點）等屬性，同級節點接口包括nextSibling（緊鄰在后的那個同級節點）和previousSibling（緊鄰在前的那個同級節點）屬性。
2. DOM對象的innerText和innerHTML有什么區別？
<body>
<div id="test">
<span style="color:red">test1</span> test2
</div>
<script>
var test=document.getElementById('test');
console.log(test.innerHTML);//輸出 <span style="color:red">test1</span> test2
console.log(test.innerText);//輸出test1 test2
</script>
-
innerHTML可以用來取得從對象的起始位置到終止位置的全部內容,包括HTML標簽； -
innerText也可以用來取得從對象的起始位置到終止位置的全部內容，但是會把其中的HTML標簽去除掉。
特別說明： innerHTML是符合W3C標準的屬性，而innerText只適用于IE瀏覽器，因此，盡可能地去使用innerHTML，而少用innerText。
3.elem.children和elem.childNodes的區別？
- children：非標準屬性，它返回指定元素的子元素HTMLCollection集合，該集合只包含HTML節點，不包含文本節點。
- childNodes：標準屬性，它返回指定元素的子元素NodeList節點集合，包含HTML節點、所有屬性、文本節點。
舉例：
<div id="ct">asdad
<p class="p1">段落
<a href="#">鏈接</a>
</p>
</div>
<script>
console.log(ct.children);
console.log(ct.childNodes);
console.log(ct.children[0]);
console.log(ct.childNodes[0]);
</script>
4.查詢元素有幾種常見的方法？ES5的元素選擇方法是什么?
document.getElementById():返回匹配指定ID屬性的元素節點對應的對象,如果沒有發現匹配的節點，則返回null。document.getElementsByClassName():返回一個對象數組（HTMLCollection類型的對象），包括了所有class名字符合指定條件的元素（搜索范圍包括本身），元素的變化實時反映在返回結果中。這個方法不僅可以在document對象上調用，也可以在任何元素節點上調用。document.getElementsByTagName():返回一個對象數組，每個對象分別對應著文檔里有著給定標簽的一個元素。返回值是一個HTMLCollection對象，也就是說，搜索結果是一個動態集合，任何元素的變化都會實時反映在返回的集合中。這個方法不僅可以在document對象上調用，也可以在任何元素節點上調用。document.getElementsByName():用于選擇擁有name屬性的HTML元素，比如form、img、frame、embed和object，返回一個NodeList格式的對象，不會實時反映元素的變化。
ES5的方法：
document.querySelector():返回匹配指定的CSS選擇器的元素節點。如果有多個節點滿足匹配條件，則返回第一個匹配的節點。如果沒有發現匹配的節點，則返回null。document.querySelectorAll():返回匹配指定的CSS選擇器的所有節點，返回的是NodeList類型的對象。NodeList對象不是動態集合，所以元素節點的變化無法實時反映在返回結果中。document.elementFromPoint():返回位于頁面指定位置的DOM元素，如果該元素不可返回（比如文本框的滾動條），則返回它的父元素（比如文本框）。如果坐標值無意義（比如負值），則返回null。
5.如何創建一個元素？如何給元素設置屬性？如何刪除屬性
創建元素：
- createElement( )：用來生成HTML元素節點。
- createTextNode( )：用來生成文本節點，參數為所要生成的文本節點的內容。
給元素設置屬性：
- 使用setAttribute( )，里面傳入兩個值，第一個值為元素的屬性，第二個值為定義的值。setAttribute( )可以為元素添加指定的屬性，并為其賦指定的值；如果這個指定的屬性已存在，則僅設置/更改值。
元素的添加：
- 在元素末尾添加元素：appendChild( )
- 在某個元素之前插入元素：insertBefore(newElement,targetNode)
元素的刪除：
- 使用removeChild( )，在父元素上調用用來刪除子元素節點。
- 使用removeAttribute( )刪除屬性.
如下為一個創建元素、設置元素屬性、添加元素、刪除元素的例子：
<div id="ct">
<p class="p1">一個段落</p>
<a href="#">一個鏈接</a>
</div>
<script>
var ct = document.getElementById("ct");
//獲取id名為ct的元素，命名為ct
var ct2 = document.createElement("div");
//創建新的div元素，命名為ct2
ct2.setAttribute("class","ct2")
//給ct2元素設置屬性class名ct2
var newcontent = document.createTextNode("in div");
//創建一段文本內容，命名為newcontent
ct.appendChild(ct2);
//將ct2元素添加到父元素ct內的末尾位置
ct2.appendChild(newcontent);
//將newcontent文本內容添加到其父元素ct2內
var newspan = document.createElement("span");
//創建新的span元素，命名為newspan
ct2.insertBefore(newspan,ct2.childNodes[1]);
//將newspan插入其父元素ct2下第一子元素newcontent之前，并占據第一子元素位置。
ct2.removeChild(ct2.childNodes[1]);
//將ct2元素下的第一子元素刪除，即刪除newspan
</script>
6.element.classList有哪些方法？如何判斷一個元素的 class 列表中是否包含某個 class？如何添加一個class？如何刪除一個class?
<div class="one two three" id="myDiv"></div>
<script>
console.log(document.getElementById('myDiv').classList);
// {
// 0: "one"
// 1: "two"
// 2: "three"
// length: 3
// value: "one two three" }
</script>
從上面代碼可以看出，classList屬性指向一個類似數組的對象，該對象的length屬性（只讀）返回當前元素的class數量。
classList對象有下列方法。
- add()：增加一個class。
- remove()：移除一個class。
- contains()：檢查當前元素是否包含某個class。
- toggle()：將某個class移入或移出當前元素(如果指定的class不存在就加入，否則移除)。
- item()：返回指定索引位置的class。
- toString()：將class的列表轉為字符串。
myDiv.classList.add('myCssClass');
myDiv.classList.add('foo', 'bar');
myDiv.classList.remove('myCssClass');
myDiv.classList.toggle('myCssClass');
myDiv.classList.contains('myCssClass'); // true
myDiv.classList.item(0); // "one"
myDiv.classList.toString();//"one two three foo bar myCssClass"
7.如何選中如下代碼所有的li元素？ 如何選中btn元素？
<div class="mod-tabs">
<ul>
<li>list1<li>
<li>list2<li>
<li>list3<li>
</ul>
<button class="btn">點我</button>
</div>
//選中所有的<li>元素
document.getElementsByTagName("li")
document.querySelectorAll("li")
//選中btn元素
document.getElementsByClassName("btn")[0]
document.getElementsByTagName("button")[0]
document.querySelector(".btn")
document.querySelectorAll(".btn")[0]
