題目1： dom對(duì)象的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é)點(diǎn)恢总，所有屬性迎罗，文本。
可以通過nodeType來判斷是哪種類型的節(jié)點(diǎn)片仿，只有當(dāng)nodeType==1時(shí)才是元素節(jié)點(diǎn)纹安，2是屬性節(jié)點(diǎn)，3是文本節(jié)點(diǎn)砂豌。 - children 屬性厢岂，非標(biāo)準(zhǔn)的，它返回指定元素的子元素集合阳距。經(jīng)測(cè)試塔粒，它只返回HTML節(jié)點(diǎn)，甚至不返回文本節(jié)點(diǎn)筐摘。且在所有瀏覽器下表現(xiàn)驚人的一致卒茬。和childNodes 一樣，在Firefox下不支持()取集合元素蓄拣。因此如果想獲取指定元素的第一個(gè)HTML節(jié)點(diǎn)扬虚，可以使用children[0]來替代上面的getFirst函數(shù)。需注意children在IE中包含注釋節(jié)點(diǎn)球恤。
題目3：查詢?cè)赜袔追N常見的方法？ES5的元素選擇方法是什么?
- 查詢
- getElementById()：返回匹配指定ID屬性的元素節(jié)點(diǎn)
- getElementsByClassName()：返回一個(gè)類似數(shù)組的對(duì)象（HTMLCollection類型的對(duì)象）
- getElementsByTagName()：返回所有指定標(biāo)簽的元素（搜索范圍包括本身）
- getElementsByName()：選擇擁有name屬性的HTML元素荸镊，返回一個(gè)NodeList格式的對(duì)象
- ES5
- querySelector()：返回第一個(gè)匹配指定的CSS選擇器的元素節(jié)點(diǎn)
- querySelectorAll()：返回匹配指定的CSS選擇器的所有節(jié)點(diǎn)咽斧，返回的是NodeList類型的對(duì)象
題目4：如何創(chuàng)建一個(gè)元素？如何給元素設(shè)置屬性躬存？如何刪除屬性
- createElement()：生成HTML元素節(jié)點(diǎn)
- setAttribute()：設(shè)置元素屬性
- removeAttribute()：刪除元素屬性
題目5：如何給頁面元素添加子元素张惹？如何刪除頁面元素下的子元素?
- appendChild()：在元素末尾添加元素
- removeChild()：刪除元素
題目6： element.classList有哪些方法？如何判斷一個(gè)元素的 class 列表中是包含某個(gè) class岭洲？如何添加一個(gè)class宛逗？如何刪除一個(gè)class?
- add()：增加一個(gè)class。
- remove()：移除一個(gè)class盾剩。
- contains()：檢查當(dāng)前元素是否包含某個(gè)class雷激。
- toggle()：將某個(gè)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">點(diǎn)我</button>
</div>
var modLi = document.querySelectorAll('.mod-tabs li');
var modBtn = document.querySelector('.mod-tabs .btn');
