題目1： dom對象的innerText和innerHTML有什么區別？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="content">innertest <p>sasaf</p></div>
<script>
var elem = document.getElementById('content')
console.log(elem.innerText)//innertest sasaf
console.log(elem.innerHTML)//innertest <p>sasaf</p>
</script>
</body>
</html>
- innerText是一個可寫屬性，返回元素內包含的文本內容，在多層次的時候會按照元素由淺到深的順序拼接其內容
- 而innerHTML屬性雖然作用和innerText類似，但是不是返回元素的文本內容，而是返回元素的HTML結構，在寫入的時候也會自動構建DOM
題目2： elem.children和elem.childNodes的區別？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="content">熱門游戲<div>我是子節點</div> </div>
<script>
var elem = document.getElementById('content')
console.log(elem.children)// ["熱門游戲" ,<div>我是子節點</div>]
console.log(elem.childNodes)// ["<div>我是子節點</div>"]
</script>
</body>
</html>
- element.children只輸出普通的DOM元素,elem.children 屬于HTMLCollection對象；
- element.childNodes會輸出所有的子元素，包括文本節點、文字,elem.childNodes 屬于NodeList對象；
- 最大的區別就是HTMLCollection是元素集合，而NodeList是節點集合（即可以包含元素，也可以包含文本節點，即元素之間的空白或換行也屬于文字節點，注釋也屬于文本節點）
題目3：查詢元素有幾種常見的方法？ES5的元素選擇方法是什么?
| 函數 | 功能 |
|---|---|
| getElementById() | 指定ID找元素 |
| getElementsByClassName() | 指定class找元素 |
| getElementsByTagName() | 指定元素標簽找元素 |
| getElementsByName() | 指定name屬性找元素 |
| querySelector() | ES5支持，參數寫法可按照CSS選擇器，返回單個元素 |
| querySelectorAll() | ES5支持，參數寫法可按照CSS選擇器，返回多個元素 |
| elementFromPoint() | 指定位置找元素 |
題目4：如何創建一個元素？如何給元素設置屬性？如何刪除屬性
| 函數 | 功能 |
|---|---|
| createElement() | 創建HTML元素 |
| createTextNode() | 創建文本節點 |
| createAttribute() | 創建屬性 |
| setAttribute() | 設置屬性 |
| romoveAttribute() | 刪除屬性 |
題目5：如何給頁面元素添加子元素？如何刪除頁面元素下的子元素?
| 函數 | 功能 |
|---|---|
| appendChild() | 在元素末尾添加元素 |
| insertBefore() | 在某個元素之前插入元素 |
| replaceChild() | 替換元素 |
| removeChild() | 刪除子元素 |
// <div>
// <span id="childSpan">foo bar</span>
// </div>
// 創建一個空的span元素節點
// 沒有id,沒有任何屬性和內容
var sp1 = document.createElement("span");
// 添加一個id屬性,值為'newSpan'
sp1.setAttribute("id", "newSpan");
// 創建一個文本節點
var sp1_content = document.createTextNode("新的span元素的內容.");
// 將文本節點插入到span元素中
sp1.appendChild(sp1_content);
// 獲得被替換節點和其父節點的引用.
var sp2 = document.getElementById("childSpan");
var parentDiv = sp2.parentNode;
// 用新的span元素sp1來替換掉sp2
parentDiv.replaceChild(sp1, sp2);
// 結果:
// <div>
// <span id="newSpan">新的span元素的內容.</span>
// </div>
題目6： element.classList有哪些方法？如何判斷一個元素的 class 列表中是包含某個 class？如何添加一個class？如何刪除一個class?
- add( String [, String] )添加指定的類值。如果這些類已經存在于元素的屬性中，那么它們將被忽略。
- remove( String [,String] )刪除指定的類值。
- item ( Number )按集合中的索引返回類值。
- toggle ( String [, force] )當只有一個參數時：切換 class value; 即如果類存在，則刪除它并返回 false，如果不存在，則添加它并返回true。當存在第二個參數時：如果第二個參數的計算結果為true，則添加指定的類值，如果計算結果為false，則刪除它
- contains( String )檢查元素的類屬性中是否存在指定的類值。
題目7： 如何選中如下代碼所有的li元素？ 如何選中btn元素？
<div class="mod-tabs">
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
<button class="btn">點我</button>
</div>
document.getElementsByTagName('li')//選中所有的li元素
document.querySelectorAll('li')//選中所有的li元素
document.getElementsByClassName('btn')//選擇btn元素
document.querySelector('.btn')//選擇btn元素
