題目1： dom對(duì)象的innerText和innerHTML有什么區(qū)別主经？
- innerText：是一個(gè)可寫屬性闰围，返回元素內(nèi)包含的文本內(nèi)容，在多層次的時(shí)候會(huì)按照元素由淺到深的順序拼接其內(nèi)容稽穆。
- innerHTML：作用和innerText類似送矩，但是不是返回元素的文本內(nèi)容，而是返回元素的HTML結(jié)構(gòu)蝌以，在寫入的時(shí)候也會(huì)自動(dòng)構(gòu)建DOM霎奢。
<div>
<p>
123
<span>456</span>
</p>
</div>
innerText返回的是 123456
innerHTML返回的是 <p>123<span>456</span></p>
題目2： elem.children和elem.childNodes的區(qū)別？
elem.chidren：非標(biāo)準(zhǔn)屬性饼灿，它返回指定元素的子元素HTMLCollection集合幕侠，該集合只包含HTML節(jié)點(diǎn)，不包含文本節(jié)點(diǎn)碍彭。
elem.chidNodes：標(biāo)準(zhǔn)屬性晤硕，它返回指定元素的子元素NodeList節(jié)點(diǎn)集合悼潭，包含HTML節(jié)點(diǎn)、所有屬性舞箍、文本節(jié)點(diǎn)舰褪。
elem.chidNodes會(huì)出現(xiàn)text，而elem.chidren不會(huì)疏橄。
題目3：查詢?cè)赜袔追N常見的方法占拍？ES5的元素選擇方法是什么?
- 常見方法：
方法 |說明
----|------|----
getElementById()| getElementById方法返回匹配指定ID屬性的元素節(jié)點(diǎn)。如果沒有發(fā)現(xiàn)匹配的節(jié)點(diǎn)捎迫，則返回null晃酒。這也是獲取一個(gè)元素最快的方法。
getElementsByClassName() |getElementsByClassName方法返回一個(gè)類似數(shù)組的對(duì)象窄绒。（HTMLCollection類型的對(duì)象）贝次，包括了所有class名字符合指定條件的元素（搜索范圍包括本身），元素的變化實(shí)時(shí)反映在返回結(jié)果中彰导。
getElementsByTagName() | getElementsByTagName方法返回所有指定標(biāo)簽的元素（搜索范圍包括本身）蛔翅。返回值是一個(gè)HTMLCollection對(duì)象，也就是說位谋，搜索結(jié)果是一個(gè)動(dòng)態(tài)集合山析，任何元素的變化都會(huì)實(shí)時(shí)反映在返回的集合中。這個(gè)方法不僅可以在document對(duì)象上調(diào)用掏父，也可以在任何元素節(jié)點(diǎn)上調(diào)用盖腿。
getElementsByName() | getElementsByName方法用于選擇擁有name屬性的HTML元素，比如form损同、img、frame鸟款、embed和object膏燃，返回一個(gè)NodeList格式的對(duì)象，不會(huì)實(shí)時(shí)反映元素的變化何什。
- ES5：
方法 |說明
----|------|----
querySelector()|querySelector方法返回匹配指定的CSS選擇器的元素節(jié)點(diǎn)组哩。如果有多個(gè)節(jié)點(diǎn)滿足匹配條件，則返回第一個(gè)匹配的節(jié)點(diǎn)处渣。如果沒有發(fā)現(xiàn)匹配的節(jié)點(diǎn)伶贰，則返回null。
querySelectorAll() |querySelectorAll方法返回匹配指定的CSS選擇器的所有節(jié)點(diǎn)罐栈，返回的是NodeList類型的對(duì)象黍衙。NodeList對(duì)象不是動(dòng)態(tài)集合，所以元素節(jié)點(diǎn)的變化無法實(shí)時(shí)反映在返回結(jié)果中荠诬。
題目4：如何創(chuàng)建一個(gè)元素琅翻？如何給元素設(shè)置屬性位仁？如何刪除屬性
- 創(chuàng)建元素
-
createElement()用來生成HTML元素節(jié)點(diǎn)。參數(shù)為元素的標(biāo)簽名方椎，即元素節(jié)點(diǎn)的tagName屬性聂抢。如果傳入大寫的標(biāo)簽名，會(huì)被轉(zhuǎn)為小寫棠众。如果參數(shù)帶有尖括號(hào)（即<和>）或者是null琳疏，會(huì)報(bào)錯(cuò)。
-
var newDiv = document.createElement("div");
- 設(shè)置屬性
-
setAttribute()方法用于設(shè)置元素屬性
-
var node = document.getElementById("div1");
node.setAttribute("my_attrib", "newVal");
等同于
var node = document.getElementById("div1");
var a = document.createAttribute("my_attrib");
a.value = "newVal";
node.setAttributeNode(a);
- 刪除屬性
-
removeAttribute()用于刪除元素屬性
-
node.removeAttribute('id');
題目5：如何給頁(yè)面元素添加子元素闸拿？如何刪除頁(yè)面元素下的子元素?
- 添加：
-
appendChild()在元素末尾添加元素
-
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.appendChild(newContent);
- 刪除：
removeChild()
parentNode.removeChild(childNode);
題目6： element.classList有哪些方法空盼？如何判斷一個(gè)元素的 class 列表中是包含某個(gè) class？如何添加一個(gè)class胸墙？如何刪除一個(gè)class?
- 方法：
- add(string[,string]) 添加指定class值我注，若已存在則忽略
- remove(string[,string]) 刪除指定class值
- item(number) 通過參數(shù)來搜索索引返回class值
- toggle(string,[,force]) 當(dāng)只有第一個(gè)參數(shù)時(shí)，當(dāng)class值存在時(shí)迟隅，刪除class值返回false,當(dāng)class不存在時(shí)但骨，添加該參數(shù)作為class值，并返回true智袭；當(dāng)?shù)诙€(gè)參數(shù)存在時(shí)奔缠，當(dāng)?shù)诙€(gè)參數(shù)的結(jié)果為true時(shí)，添加class值,當(dāng)計(jì)算結(jié)果為false時(shí)吼野，刪除第一參數(shù)對(duì)應(yīng)的class
- contains(string) 檢查元素中的class是否有指定值對(duì)應(yīng)的class,返回布爾值
- 判斷：
- 判斷是否包含
div.classList.contains(str); - 添加class
div.classList.add(str); - 刪除class
div.classList.remove(str);
- 判斷是否包含
題目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>
//document.querySelectorAll('.mod-tabs li')
//document.querySelector('.mod-tabs btn')
