題目1： dom對象的innerText和innerHTML有什么區(qū)別？
<div>
<p>
123
<span>456</span>
</p>
</div>
- innerText屬性返回元素內(nèi)包含的文本內(nèi)容。外層div的innerText返回內(nèi)容是"123456"
- innerHTML屬性返回元素的HTML結(jié)構(gòu)。外層div的innerHTML返回內(nèi)容是"<p>123<span>456</span></p>"
題目2： elem.children和elem.childNodes的區(qū)別？
- childNodes 屬性，標(biāo)準(zhǔn)的，它返回指定元素的子元素集合，包括HTML節(jié)點，所有屬性，文本。
可以通過nodeType來判斷是哪種類型的節(jié)點，只有當(dāng)nodeType==1時才是元素節(jié)點，2是屬性節(jié)點，3是文本節(jié)點。 - children 屬性，非標(biāo)準(zhǔn)的，它返回指定元素的子元素集合。經(jīng)測試，它只返回HTML節(jié)點，甚至不返回文本節(jié)點。且在所有瀏覽器下表現(xiàn)驚人的一致。和childNodes 一樣，在Firefox下不支持()取集合元素。因此如果想獲取指定元素的第一個HTML節(jié)點，可以使用children[0]來替代上面的getFirst函數(shù)。需注意children在IE中包含注釋節(jié)點。
題目3：查詢元素有幾種常見的方法？ES5的元素選擇方法是什么?
- 查詢
- getElementById()：返回匹配指定ID屬性的元素節(jié)點
- getElementsByClassName()：返回一個類似數(shù)組的對象（HTMLCollection類型的對象）
- getElementsByTagName()：返回所有指定標(biāo)簽的元素（搜索范圍包括本身）
- getElementsByName()：選擇擁有name屬性的HTML元素，返回一個NodeList格式的對象
- ES5
- querySelector()：返回第一個匹配指定的CSS選擇器的元素節(jié)點
- querySelectorAll()：返回匹配指定的CSS選擇器的所有節(jié)點，返回的是NodeList類型的對象
題目4：如何創(chuàng)建一個元素？如何給元素設(shè)置屬性？如何刪除屬性
- createElement()：生成HTML元素節(jié)點
- setAttribute()：設(shè)置元素屬性
- removeAttribute()：刪除元素屬性
題目5：如何給頁面元素添加子元素？如何刪除頁面元素下的子元素?
- appendChild()：在元素末尾添加元素
- removeChild()：刪除元素
題目6： element.classList有哪些方法？如何判斷一個元素的 class 列表中是包含某個 class？如何添加一個class？如何刪除一個class?
- add()：增加一個class。
- remove()：移除一個class。
- contains()：檢查當(dāng)前元素是否包含某個class。
- toggle()：將某個class移入或移出當(dāng)前元素。
- item()：返回指定索引位置的class。
- toString()：將class的列表轉(zhuǎn)為字符串。
node.classList.contains('active');
node.classList.add('active');
node.classList.remove('active');
題目7： 如何選中如下代碼所有的li元素？ 如何選中btn元素？
<div class="mod-tabs">
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
<button class="btn">點我</button>
</div>
var modLi = document.querySelectorAll('.mod-tabs li');
var modBtn = document.querySelector('.mod-tabs .btn');
