-
DOM對象的innerText和innerHTML有什么區別？
共同點：innerHTML和innerText是doctument對象的屬性，都可以用來讀取一個元素的內容。
區別1：對于一個單行無嵌套的元素，innerHTML和innerText得到的結果是相同的；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<p>A test!</p>
</body>
</html> //innerText、innerHTML獲取<p>,結果都是相同的；
區別2：對于多行或有嵌套的元素，innerHTML會獲取從開始標簽到結束標簽中的所有內容，包括子元素標簽，返回整個HTML結構；innerText會獲取從開始標簽到結束標簽中的所有內容，但不包括子元素標簽，并把內容拼湊在一行；
<div>
<p>
123
<span>456</span>
</p>
</div>
<!--
<div>innerHTML返回：
"
<p>
123
<span>456</span>
</p>
" -->
<!--
<div>innerText返回：
"123 456"
-->
-
elem.children和elem.childNodes的區別？
相同點：elem.children和elem.childNodes都可以以類數組的形式返回子元素節點；
區別1：elem.children返回的類數組是HTMLCollection，elem.childNodes返回的類數組是NodeList；
區別2：elem.children只包含元素節點，elem.childNodes包含元素節點、文本節點、注釋節點等。
-
查詢元素有幾種常見的方法？ES5的元素選擇方法是什么?
1.getElementById()：通過元素的id屬性查詢元素，若不存在，則返回null；
<p id="test">aa<p>
var a = document.getElementById("test") //獲取到id="test"的p元素；
2.getElementsByClassName()：返回一個類數組的對象HTMLCollection，包括了所有class名字符合指定條件的元素（搜索范圍包括本身），參數可以是多個空格分隔的class名字，返回同時具有這些節點的元素，元素的變化實時反映在返回結果中。：
document.getElementsByClassName('nav layout'); //獲取擁有class為nav、layout的所有元素
3.getElementsByTagName()：返回所有指定標簽的元素（搜索范圍包括本身）。返回值是一個HTMLCollection類數組，搜索結果是一個動態集合，任何元素的變化都會實時反映在返回的集合中：
var paras = document.getElementsByTagName("h1"); //匹配所有的h1元素；
4.getElementsByName()：用于選擇擁有name屬性的HTML元素，比如img、form等，返回一個NodeList格式的對象，不會實時反映元素的變化；
var img = document.getElementsByName("pic");
5.querySelector()：ES5新增方法，返回匹配指定的CSS選擇器的元素節點。如果有多個節點滿足匹配條件，則返回第一個匹配的節點。如果沒有發現匹配的節點，則返回null；
document.querySelector(".box1") //匹配class為box1的元素（若有多個，返回第一個）；
6.querySelectorAll()：與querySelector()類似，返回匹配指定的CSS選擇器的所有節點，返回的是NodeList類型的對象。NodeList對象不是動態集合，所以元素節點的變化無法實時反映在返回結果中；
document.querySelector(".box1") //匹配class為box1的所有元素；
-
如何創建一個元素？如何給元素設置屬性？如何刪除屬性？
創建元素：
createElement()：可以生成HTML元素節點；
var newDiv = document.createElement("div"); //創建了一個div；
設置元素屬性：
setAttribute()：為一個元素設定屬性值，若屬性不存在，則創建這個屬性，并設值；
var p = document.getElementById("title")
p.setAttribute("class","layout") //第一個參數是屬性名，第二個為屬性值，用逗號分隔；
刪除屬性：
removeAttribute()： 刪除一個元素的指定屬性；
var p = document.getElementById("title");
p.removeAttribute("id"); // 刪除p元素的id屬性；
-
如何給頁面元素添加子元素？如何刪除頁面元素下的子元素?
給頁面元素添加子元素：
1.appendChild()：在父元素的末尾添加子元素；
<div id="box"></div> //已知一個div元素；
var p = createElement("p"); //創建一個p元素；
var div = getElementById("box"); // 通過id獲取div元素；
div.appendChild(p); //將p元素添加到div中；
2.insertBefore()：在某個元素之前插入元素；
<div id="box">
<a href=""></a>
</div>
var p = createElement("p");
var div = getElementById("box");
div.insertBefore(p,div.firstchid); //在div第一個子元素前插入p元素；
3.replaceChild()：用于替換元素，參數為要插入的元素和要替換的元素，逗號分隔；
刪除頁面元素下的子元素：
removeChild()：刪除參數指定的子元素，參數為子元素的節點對象（childNode）；
var list=document.getElementById("myList");
list.removeChild(list.childNodes[0]); //刪除list下第一個子元素；
-
element.classList有哪些方法？如何判斷一個元素的 class 列表中是包含某個 class？如何添加一個class？如何刪除一個class?
element.classList返回屬性的類名，有這么幾個屬性和方法：
1.length：返回元素類名的個數，只讀；
2.item()：支持一個參數，為類名的索引，返回對應的類名；
<body class="a b c"></body>
document.body.classList.item(0) // 得到a；
3.add()：接受一個class名字符串作為參數，把該class名添加到元素上，若已存在，則忽略；
document.body.classList.add("d")
document.body.classList.contains("d") // ture；
4.remove() ：接受一個class名字符串作為參數，把該class從元素上移除；
document.body.classList.remove("c");
document.body.classList.contains("c"); // false；
5.contains()：接受一個class名字符串作為參數，驗證元素的class列表中是否包含該class，返回布爾值；
document.body.classList.contains("a") // ture；
6.toggle()：接受2個參數，第一個為class名字符串，第二個為布爾值，如果為true表示添加該class，如果為false則表示移除該class，并返回該Boolean值。
-
如何選中如下代碼所有的li元素？ 如何選中btn元素？
<div class="mod-tabs">
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
<button class="btn">點我</button>
</div>
//獲取li
//方法1
document.querySelectorAll('li');
//方法2
document.getElementsByTagName('li');
//獲取btn
//方法1
document.getElementsByClassName('btn');
//方法2
document.querySelector('.btn')
//方法3
document.getElementsByTagName('button');
