1： dom對象的innerText和innerHTML有什么區(qū)別？
- innerText 屬性可以過濾掉標(biāo)簽，直接獲取文本元素，在多層次的時(shí)候會(huì)按照元素由淺到深的順序拼接其內(nèi)容。
- innerHTML 屬性和 innerText 類似，但是不是返回元素的文本內(nèi)容，而是返回元素的HTML結(jié)構(gòu)，在寫入的時(shí)候也會(huì)自動(dòng)構(gòu)建DOM。
2： elem.children和elem.childNodes的區(qū)別？
- elem.children : 返回指定元素的子元素節(jié)點(diǎn)集合，只返回HTML節(jié)點(diǎn)，甚至不返回文本節(jié)點(diǎn)。
- elem.childNodes : 返回指定元素的所有子節(jié)點(diǎn)集合，包括 元素節(jié)點(diǎn)，屬性節(jié)點(diǎn)，文本節(jié)點(diǎn)，注釋節(jié)點(diǎn)等。
參考博客: JavaScript中Element與Node的區(qū)別，children與childNodes的區(qū)別
3：查詢元素有幾種常見的方法？ES5的元素選擇方法是什么?
常見的有：
- getElementById() 返回匹配指定ID屬性的元素節(jié)點(diǎn)
-getElementsByClassName() 返回class名字符合指定條件的元素
-getElementsByTageName() 返回所有指定標(biāo)簽的元素
( excluding the element itself 搜索范圍不包括本身)
-getElementsByName() 返回所有擁有name屬性的HTML元素，比如form、img、frame、embed和object
ES5的元素選擇方法有：
- querySelector() 返回匹配指定的CSS選擇器的元素節(jié)點(diǎn)，需要注意兩點(diǎn)：
- 如果有多個(gè)節(jié)點(diǎn)滿足匹配條件，則返回第一個(gè)匹配的節(jié)點(diǎn)
- querySelector方法無法選中CSS偽元素
- querySelectorAll() 返回匹配指定的CSS選擇器的所有節(jié)點(diǎn)
4：如何創(chuàng)建一個(gè)元素？如何給元素設(shè)置屬性？如何刪除屬性
如何創(chuàng)建元素
- createElement() 用來生成HTML元素節(jié)點(diǎn)，參數(shù)為元素的標(biāo)簽名。
- createTextNode() 用來生成文本節(jié)點(diǎn)，參數(shù)為所要生成的文本節(jié)點(diǎn)的內(nèi)容。
- createDocumentFragment() 生成一個(gè)DocumentFragment對象，其存在于內(nèi)存的DOM片段，但是不屬于當(dāng)前文檔，常常用來生成較復(fù)雜的DOM結(jié)構(gòu)，然后插入當(dāng)前文檔。
如何給元素設(shè)置屬性
有兩種方法:
- 一種是使用 creatAttribute() 方法生成一個(gè)新的屬性對象，然后賦值，然后設(shè)置給相應(yīng)的節(jié)點(diǎn)。
var node = document.getElementById("div1");
var a = document.createAttribute("my_attrib");
a.value = "newVal";
node.setAttributeNode(a);
- 直接使用 setAttribute()方法 ，傳入兩個(gè)參數(shù)，第一個(gè)是屬性名，第二個(gè)是屬性值，推薦這種方法
var node = document.getElementById("div1");
node.setAttribute("my_attrib", "newVal");
如何刪除屬性
使用removeAttribute()， 用于刪除元素屬性。
node.removeAttribute('id');
5：如何給頁面元素添加子元素？如何刪除頁面元素下的子元素?
如何給頁面元素添加子元素
- appendChild() 在元素末尾添加元素，如下所示：給 ct 下面添加子元素 img
var ct = document.querySelector('#ct')
var node = document.createElement('img')
ct.appendChild(node)
- insertBefore() 在某個(gè)元素之前插入元素，如下所示：在ct內(nèi)的最后一個(gè)子元素之前插入img子元素
var ct = document.querySelector('#ct')
var node = document.createElement('img')
ct.insertBefore(node, ct.lastChild)
如何刪除頁面元素下的子元素
removeChild() 方法可從子節(jié)點(diǎn)列表中刪除某個(gè)節(jié)點(diǎn)。
如刪除成功，此方法可返回被刪除的節(jié)點(diǎn)，如失敗，則返回 NULL。
如下所示：刪除 ct 下的 div 子元素節(jié)點(diǎn)，注意這里只能刪除單個(gè)節(jié)點(diǎn)，是 node，不是 nodes。
var ct = document.querySelector('#ct')
var node = document.querySelector('#ct div')
ct.removeChild(node)
6： element.classList有哪些方法？如何判斷一個(gè)元素的 class 列表中是包含某個(gè) class？如何添加一個(gè)class？如何刪除一個(gè)class?
參數(shù)為class類名字符串
- element.classList.add() //新增 class，如果已經(jīng)存在，則忽略, 可添加多個(gè)類 add('class1', 'class2')
- element.classList.remove() //刪除 class，可刪除多個(gè)類 remove('class1', 'class2')
- element.classList.toggle()
新增/刪除切換，只有一個(gè)參數(shù)時(shí)，類存在，則刪除它并返回false，如果不存在，則添加它并返回true。當(dāng)存在第二個(gè)參數(shù)時(shí)：如果第二個(gè)參數(shù)的計(jì)算結(jié)果為true，則添加指定的類值，如果計(jì)算結(jié)果為false，則刪除它。 - element.classList.contains() // 判斷是否擁有某個(gè) class，返回布爾值
element.classList.item ( Number ) 參數(shù)為索引值
按集合中的索引返回類值。
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>
<scirpt>
var li = document.querySelectorAll('.mod-tabs ul li')
// document.getElementsByTagName('li')
var btn = document.querySelector('.btn')
// document.getElementsByClassName('btn')[0]
</scirpt>
