-
關(guān)鍵詞：DOM
DOM 帶來了動(dòng)態(tài)修改文檔的能力
1. DOM 對象的 'innerText' 和 'innerHTML' 有什么區(qū)別处窥？
- 返回內(nèi)容不同
-
innerText：返回元素內(nèi)包含的文本內(nèi)容涨冀；若存在嵌套，按序由淺至深拼接文本內(nèi)容 -
innerHTML：返回元素內(nèi)包含的HTML結(jié)構(gòu)柜裸，在寫入時(shí)自動(dòng)構(gòu)建 DOM
2. elem.children 和 elem.childNodes 的區(qū)別？
- 包含節(jié)點(diǎn)的類型不同
-
elem.children：元素集合掷漱，只包含元素（HTML標(biāo)簽） -
elem.childNodes：節(jié)點(diǎn)集合粘室，可包含元素（HTML標(biāo)簽）、文本節(jié)點(diǎn)卜范、注釋節(jié)點(diǎn)
3.1 查詢元素有幾種常見的方法？
-
getElementById()：返回指定條件的元素節(jié)點(diǎn)鹿榜，匹配 ID屬性海雪；若無，則返回null -
getElementsByClassName()：返回指定條件的元素節(jié)點(diǎn)舱殿，匹配 class屬性 奥裸；返回值為 HTMLCollection類型的對象 -
getElementsByTagName()：返回所有指定標(biāo)簽的元素；返回值為HTMLCollection類型的對象
3.2 ES5的元素選擇方法是什么?
-
querySelector()：返回指定的元素節(jié)點(diǎn)沪袭，匹配CSS選擇器 - 若多個(gè)節(jié)點(diǎn)滿足匹配條件湾宙，則返回第一個(gè)匹配的節(jié)點(diǎn)
- 若沒有節(jié)點(diǎn)滿足匹配條件，則返回null冈绊。
-
querySelectorAll()：返回指定的所有節(jié)點(diǎn)侠鳄，匹配CSS選擇器 - 返回所有、滿足任一匹配條件（參數(shù)中任一選擇器）的元素
- 該方法參數(shù)可以是：以逗號(hào)分隔的多個(gè)CSS選擇器
- 返回值為NodeList類型的對象
4.1 如何創(chuàng)建一個(gè)元素死宣？
- 方法
createElement()：用來生成HTML元素節(jié)點(diǎn)
createTextNode()：用來生成文本節(jié)點(diǎn)
createDocumentFragment()：用來生成一個(gè)DocumentFragment對象 - DocumentFragment對象：用來生成較復(fù)雜的DOM結(jié)構(gòu)伟恶，然后將DocumentFragment對象插入當(dāng)前文檔，這樣擁有更好的性能表現(xiàn)
- 例子
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.appendChild(newContent);
4.2如何給元素設(shè)置屬性毅该？如何刪除屬性
- 方法
getAttribute()：用于獲取元素的attribute值
createAttribute()：用于生成一個(gè)新的屬性對象節(jié)點(diǎn)博秫，并返回它
setAttribute()：用于設(shè)置元素屬性
romoveAttribute()：用于刪除元素屬性 - 例子：設(shè)置元素屬性
// 方法一
var newDiv = document.getElementById("div");
var a = document.createAttribute("newAttrib");
a.value = "newValue";
newDiv.setAttributeNode(a);
// 方法二
var newDiv = document.getElementById("div");
newDiv.setAttribute("id", "header");
- 例子：刪除元素屬性
var newDiv = document.getElementById("div");
newDiv.setAttribute("id", "header");
newDiv.removeAttribute('id');
5. 如何給頁面元素添加子元素？如何刪除頁面元素下的子元素?
- 方法
appendChild()：用于在元素末尾添加元素
insertBefore()：用于在元素之前插入元素
replaceChild()：用于替換某個(gè)元素
removeChild()：用于刪除某個(gè)元素
cloneNode()：用于復(fù)制元素 - 例子：給頁面元素添加子元素
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.appendChild(newContent);
- 例子：刪除頁面元素的子元素
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.appendChild(newContent);
newDiv.removeChild(newContent);
6. element.classList 有哪些方法眶掌？
- 方法
classList.contains：用于判斷一個(gè)元素的 class 列表中是包含某個(gè) class
classList.add()：用于添加一個(gè)或多個(gè) class
classList.remove：用于刪除一個(gè)或多個(gè) class - 例子：添加一個(gè)class挡育？線上代碼栗子
var getE = document.getElementById("newDiv");
getE.classList.add("mystyle");
- 例子：如何判斷一個(gè)元素的 class 列表中是否包含某個(gè) class？
var getE = document.getElementById("newDiv");
getE.classList.add("mystyle");
getE.classList.contains("newDiv"); // false
getE.classList.contains("mystyle"); // true
- 例子：刪除一個(gè)class?線上代碼栗子
var getE = document.getElementById("newDiv");
getE.classList.add("mystyle");
getE.classList.remove("mystyle");
7. 如何選中如下代碼所有的 li元素朴爬？ 如何選中 btn元素即寒？
<div class="mod-tabs">
<ul>
<li>list1<li>
<li>list2<li>
<li>list3<li>
</ul>
<button class="btn">點(diǎn)我</button>
</div>
選中 li標(biāo)簽、btn標(biāo)簽
// 選中 li 標(biāo)簽
var li1 = getElementsByTagName("li"); // 第一種
var li2 = querySelectorAll("ul>li")寝殴； // 第二種
// 選中 btn 標(biāo)簽
var btn1 = getElementsByClassName("btn"); // 第一種
var btn2 = getElementsByTagName("button"); // 第二種
var btn3 = querySelector("div>button"); // 第三種
