Dom對象的innerText和innerHTML有什么區(qū)別？
- innerText：可寫屬性，返回元素內(nèi)包含的文本內(nèi)容，在多層次的時候會按照元素由淺到深的順序拼接其內(nèi)容
- innerHTML：不是返回元素的文本內(nèi)容，而是返回元素的HTML結構
elem.children和elem.childNodes的區(qū)別？
- elem.children：返回元素內(nèi)的 HTML 子元素的集合（即HTMLCollection）
- elem.childNodes：返回元素內(nèi)的子節(jié)點列表（包括空白文本節(jié)點，即NodeList）
查詢元素有幾種常見的方法？ES5的元素選擇方法是什么?
| 方法 | 作用 |
|---|---|
| getElementById | 返回匹配指定ID屬性的元素節(jié)點 |
| getElementsByClassName | 返回一個類似數(shù)組的對象（HTMLCollection類型的對象），包括了所有class名字符合指定條件的元素（搜索范圍包括本身），元素的變化實時反映在返回結果中 |
| getElementsByTagName() | 返回所有指定標簽的元素（搜索范圍包括本身） |
| getElementsByName() | 選擇擁有name屬性的HTML元素，比如form、img、frame、embed和object，返回一個NodeList格式的對象，不會實時反映元素的變化 |
| querySelector() | 返回匹配指定的CSS選擇器的第一個元素節(jié)點 |
| querySelectorAll() | 返回匹配指定的CSS選擇器的所有節(jié)點，返回的是NodeList類型的對象 |
| elementFromPoint() | 返回位于頁面指定位置的元素 |
ES5的元素選擇方法是 querySelector()、querySelectorAll()
如何創(chuàng)建一個元素？如何給元素設置屬性？如何刪除屬性
var h1 = document.createElement('h1'); //創(chuàng)建元素
h1.setAttribute("class","123"); //設置class 屬性
h1.removeAttribute("class"); // 刪除class屬性
如何給頁面元素添加子元素？如何刪除頁面元素下的子元素?
添加元素：
- appendChild()
在元素末尾添加元素 - insertBefore()
在某個元素之前插入元素
刪除元素:
removeChild()
var h1 = document.createElement("h1"); //創(chuàng)建h1元素
var h1Text = document.createTextNode("123"); //創(chuàng)建文本元素
h1.appendChild(h1Text); // 在h1標簽末尾添加文本元素
var body = document.getElementsByTagName()[0]; // 獲取body標簽
body.appendChild(h1); // 在body元素末尾添加h1標簽
body.removeChild(h1); //在body的子元素中刪除h1元素
element.classList有哪些方法？如何判斷一個元素的 class 列表中是包含某個 class？如何添加一個class？如何刪除一個class?
- element.classList.add()：添加一個類名
- element.classList.item(index)：按集合中的索引返回類值。
- element.classList.remove(className)：為元素刪除指定的class
- element.classList.contains(className)：是否包含指定類名，返回布爾值,用于判斷一個元素的 class 列表中是包含某個 class
如何選中如下代碼所有的li元素？ 如何選中btn元素？
<div class="mod-tabs">
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
<button class="btn">點我</button>
</div>
var List1 = document.querySelectorAll('li')
var List2 =document.getElementsByTagName('li');//第二種方式
//三種方式選中btn
var btn0 = document.getElementsByTagName("button");
var btn1 = document.getElementsByClassName("btn");
var btn2 = document.querySelector(".btn");
