1、dom對象的innerText和innerHTML有什么區(qū)別？
- innerText 返回元素內(nèi)包含文本內(nèi)容
- innerHTML 返回元素的HTML結構，在寫入的時候也會自動構建DOM
-
outerHTML 返回內(nèi)容還包括本身
例：
<div id="box">
<p class="num num1">123<span class="num num2">456</span></p>
</div>
var elem = document.getElementById('box')
console.log(elem.innerText) //123 456
console.log(elem.innerHTML) //<p>123<span>456</span></p>
console.log(elem.outerHTML) //<div id="box"> <p>123<span>456</span></p> </div>
2、elem.children和elem.childNodes的區(qū)別？
- elem.children 不包含空白節(jié)點
-
elem.childNodes 包含空白節(jié)點
3、4種常見查詢元素方法
通過id查找，由于id只有一個，注意只有這個才是Elelment 沒有帶s
var elem = document.getElementById('box')通過class名稱查找
var elements = document.getElementsByClassName("num")通過標簽名稱查詢
var paras = document.getElementsByTagName("p")用于選擇擁有name屬性的HTML元素，比如form、img、frame、embed和object，返回一個NodeList格式的對象，不會實時反映元素的變化。
var images = document.getElementsByName("image")
4、ES5的元素選擇方法：querySelector()、querySelectorAll()
function $(str){
return document.querySelector(str) //返回匹配的第一個節(jié)點
}
runction $$(str){
return document.querySelectorAll(str) //返回全部匹配的節(jié)點
}
$('#box') //調(diào)用函數(shù)查找id為box的
$$('.num')
5、getElementsByID 和 querySelector的區(qū)別
var btn1 = document.getElementByID('btn')
var btn2 = document.querySelector('#btn')
1、區(qū)別
getXXXByXXX 獲取的是動態(tài)集合，querySelector獲取的是靜態(tài)集合。
簡單的說就是，動態(tài)就是選出的元素會隨文檔改變，靜態(tài)的不會，取出來之后就和文檔的改變無關了。
先看看一個例子：
<ul>
<li>aaa</li>
<li>ddd</li>
<li>ccc</li>
</ul>
//demo1
var ul = document.getElementsByTagName('ul')[0],
lis = ul.getElementsByTagName("li");
for(var i = 0; i < lis.length ; i++){
ul.appendChild(document.createElement("li"));
}
console.log( lis.length); //6
//demo2
var ul = document.querySelectorAll('ul'),
lis = ul.querySelectorAll("li");
for(var i = 0; i < lis.length ; i++){
ul.appendChild(document.createElement("li"))
//這個時候就創(chuàng)建了3個新的li，添加在ul列表上。
}
console.log( lis.length); //3 ，輸出的結果仍然是3，不是此時li的數(shù)量6
Demo1 中的 lis 是一個動態(tài)的 Node List， 每一次調(diào)用 lis 都會重新對文檔進行查詢，導致無限循環(huán)的問題。
2、性能
可通過該網(wǎng)站測試：https://jsperf.com/getelementsby-vs-queryselectorall/7
測試結果：getElementBy系列的執(zhí)行速度基本都是querySelectorAll的100+倍
3、querySelector和querySelectorAll()
querySelector() 方法僅僅返回匹配指定選擇器的第一個元素。如果你需要返回所有的元素，請使用 querySelectorAll() 方法替代。
4、總結
如果只要一次查找就可得到元素時，首選getXXXByXXX ，因為它快一些；
如果需要經(jīng)過多級查找，才能得到元素時，首選querySelector，因為它方便
5、如何創(chuàng)建一個元素？如何給元素設置屬性？如何刪除屬性？
增 創(chuàng)建一個元素 var newElem = document.createElement()
刪 刪除屬性newElem.removeAttribute('屬性名')
改 設置元素屬性newElem.setAttribute('屬性名','屬性值')
6、如何給頁面元素添加子元素？如何刪除頁面元素下的子元素?
appendChild() 在元素末尾添加元素
removeChild() 刪除某元素下的子元素
insertBefore() 在元素之前插入元素
replaceChild() 接受兩個參數(shù)：要插入的元素和要替換的元素
7、element.classList有哪些方法？如何判斷一個元素的 class 列表中是包含某個 class？如何添加一個class？如何刪除一個class?
- add(class1,class2,…)：在元素中添加一個或多個類名。如果指定的類名已存在，則不會添加。
- contains(class)：返回布爾值，判斷指定的類名是否存在。
- item(index)：返回類名在元素中的索引值。索引值從 0 開始，在區(qū)間范圍外則返回null。
- remove(class1,class2,…)：移除元素中一個或多個類名。移除不存在的類名，不會報錯。
- toggle(class,true|false)：在元素中切換類名。第一個參數(shù)為要在元素中移除的類名，并返回 false。 如果該類名不存在則會在元素中添加類名，并返回 true。 第二個是可選參數(shù)，是個布爾值用于設置元素是否強制添加或移除類，不管該類名是否存在。
8、如何選中如下代碼所有的li元素？ 如何選中btn元素？
<div class="mod-tabs">
<ul>
<li>list1<li>
<li>list2<li>
<li>list3<li>
</ul>
<button class="btn">點我</button>
</div>
<script>
//ES5
document.querySelector('.btn')
document.querySelectorAll('li')
//常見
document.getElementsByClassName('btn');
document.getElementsByTagName("li")
</script>
