1. dom對象的innerText和innerHTML有什么區別？
- innerText：返回對應元素內的所有文本內容；
- innerHTML：返回元素內的HTML代碼（從對象的起始位置到終止位置的全部內容，包括HTML標簽）
<body>
<p1>標題</p1>
</body>
---------------------------------------------
document.body.innerText;
//"標題"
document.body.innerHTML;
/*
"
<h1>標題</h1>
"
*/
1.png
2. elem.children和elem.childNodes的區別？
- elem.childNodes : 是標準屬性，返回指定元素的子元素集合，包括HTML節點，所有屬性，文本節點。可以通過nodeType來判斷是哪種類型的節點，只有當nodeType==1時才是元素節點，2是屬性節點，3是文本節點。
- ele.children : 非標準屬性，返回指定元素的子元素集合。
3. 查詢元素有幾種常見的方法？ES5的元素選擇方法是什么?
-
Document方法：
-
getElementById()：返回匹配指定ID屬性的元素節點，如果沒有發現匹配的節點，則返回null。這也是獲取一個元素最快的方法。 -
getElementsByClassName()：返回一個類似數組的對象，包括所有class名字符合指定條件的元素，元素的變化實時反應在返回的結果中。這個方法不僅可以在document對象上調用，也可以在任何元素節點上調用。 -
getElementsByTagName()：返回所有指定標簽的元素（搜索范圍包括元素本身）。返回值是一個HTMLCollection對象，也就是說，搜索結果是一個動態集合，任何元素的變化都會實時反映在返回的集合中。這個方法不僅可以在document對象上調用，也可以在任何元素節點上調用。 -
getElementsByName()：適用于擁有name屬性的HTML元素，（比如<form><input><img><frame><a>和<object>等），返回一個NodeList格式的對象，不會實時反應元素的變化。
-
-
ES5：
-
document.querySelector()：接受一個CSS選擇器作為參數，返回匹配該選擇器的元素節點。如果有多個節點滿足匹配條件，則返回第一個匹配的節點。如果沒有發現匹配的節點，則返回null -
document.querySelectorAll()：與querySelector用法類似，區別是返回一個NodeList對象，包含所有匹配給定選擇器的節點。
-
4. 如何創建一個元素？如何給元素設置屬性？如何刪除屬性
- 創建元素
- 創建元素：
document.creatElement(tagName)用來生成HTML元素節點，參數為引號包裹的元素的標簽名。 - 創建文本節點：
document.createTextNode(content)用來生成文本節點，參數為所要生成的文本節點的內容。 - 創建DOM片段：
document.createDocumentFragment生成一個DocumentFragment對象。該對象是一個存在于內存的DOM片段，不屬于當前文檔，常用來生成較復雜的DOM結構，然后插入當前文檔。這樣做的好處在于，因為DocumentFragment不屬于當前文檔，對它的任何改動，都不會引發網頁的重新渲染，比直接修改當前文檔的DOM有更好的性能表現。
- 創建元素：
- 設置屬性
element.setAttribute(attr,value) - 刪除屬性
element.removeAttribute(attr)
5. 如何給頁面元素添加子元素？如何刪除頁面元素下的子元素?
- 添加：
parentNode.appendChild("newElement")//在父元素parentNode末尾添加一個元素newElement - 刪除：
node.removeChild("oldElement")//在node元素中刪除子節點oldElement - 替換：
parentNode.replaceChild("newElement","oldElement")//用 newchild 來替換父元素 parentNode 元素中的 oldChild 節點，如果 newChild 已經存在于 DOM 樹中，則他會被從原始位置刪除。
6. element.classList有哪些方法？如何判斷一個元素的 class 列表中是包含某個 class？如何添加一個class？如何刪除一個class?
Element.classList 是一個只讀屬性，返回一個元素的類屬性的實時 DOMTokenList集合。
var element=document.createElement('div');
element.classList.add('active') //添加一個class:"active"
element.classList.add('box') //添加一個class:"box"
element.classList.remove('active') //刪除class:"active"
element.classList.contains('active') //檢測是否存在"active"，存在返回true，不存在返回false
element.classList.contains('box') //檢測是否存在"box"，存在返回true，不存在返回false
7. 如何選中如下代碼所有的li元素？ 如何選中btn元素？
代碼.png
-
選中給所有li元素：
document.getElementsByTagName("li")或者document.querySelectorAll(".mod-tabs li")
3.png -
選中btn元素：
document.getElementsByClassName("btn")或者document.querySelector(".btn")
4.png
