1: dom對象的innerText和innerHTML的區(qū)別
innerText只獲取該元素內(nèi)的文本,innerHTML獲取該元素內(nèi)的全部內(nèi)容操禀,包括HTML標簽和文本。
2: elem.children與elem.childNodes的區(qū)別
elem.childNodes:標準屬性横腿,它返回指定元素的子元素集合床蜘,包括HTML節(jié)點,所有屬性蔑水,文本節(jié)點。
elem.children:非標準屬性扬蕊,它返回指定元素的子元素集合搀别。但它只返回HTML節(jié)點,不返回文本節(jié)點尾抑。
3:查詢元素常見的方法
常見方法:
1.getElementById() :可返回對擁有指定 ID 的第一個對象的引用歇父。
2.getElementsByName() :返回帶有指定名稱的對象集合。
3.getElementsByTagName() : 返回帶有指定標簽名的對象集合再愈。
4.getElementByClassName() : 返回帶有指定類名的對象的集合榜苫。
ES5的元素選擇方法:querySelector()方法,參數(shù)形式與CSS選擇器相同翎冲,可獲取第一個符合條件的元素垂睬,
querySelectorAll()方法可獲取符合條件的全部元素。
4:創(chuàng)建元素抗悍,添加驹饺、刪除屬性:
- 創(chuàng)建元素:createElement()用來生成HTML元素節(jié)點,參數(shù)即為需要創(chuàng)建的標簽名缴渊。
- 設(shè)置屬性:setAttribute()用于設(shè)置元素屬性赏壹,參數(shù)為屬性名和屬性值。
- 刪除屬性:removeAttribute()用于刪除元素屬性衔沼,參數(shù)為要刪除的屬性名蝌借。
5:添加與刪除子元素
appendChild()方法可以在元素末尾添加元素;刪除元素使用removeChild()方法指蚁。
6: element.classList
element.classList的方法有:add(class1, class2, ...)菩佑、contains(class)、item(index)欣舵、remove(class1, class2, ...)擎鸠、toggle(class, true|false)。
判斷classlist是否包含某個class:contains(class) 返回布爾值缘圈,true表示包含劣光,false表示不包含袜蚕;
添加class:add(class1, class2, ...) 在元素中添加一個或多個類名。如果指定的類名已存在绢涡,則不會添加 牲剃。
刪除class: remove(class1, class2, ...) 移除元素中一個或多個類名。移除不存在的類名雄可,不會報錯凿傅。
7: 舉例:如何選中如下代碼所有的li元素? 如何選中btn元素数苫?
<div class="mod-tabs">
<ul>
<li>list1<li>
<li>list2<li>
<li>list3<li>
</ul>
<button class="btn">點我</button>
</div>
<script>
document.getElementsByTagName('li') //選中所有l(wèi)i元素
document.getElementsByClassName('btn') //選中btn元素
</script>