1洁奈，dom對象的innerText和innerHTML有什么區(qū)別专酗？
- innerText是將對象中的字符串過濾組合展示吼旧；而innerHTML則是將對象中的所有內(nèi)容都進行展示坷牛；
- 對于鏈接夸浅，innerHTML會將其保留連接屬性轩娶，而innerText則會將鏈接轉(zhuǎn)化為字符串魄缚；
2暗甥，elem.children和elem.childNodes的區(qū)別喜滨？
elem.children：非標(biāo)準(zhǔn)型，它返回指定元素的子元素集合撤防。只返回HTML節(jié)點虽风。
-
elem.childNodes：標(biāo)準(zhǔn)型，返回指定元素的子元素集合，包括HTML屬性辜膝，所有屬性无牵，文本〕Ф叮可以通過nodeType來判斷是那種類型的節(jié)點,當(dāng)nodeType==1時時元素節(jié)點茎毁，2是屬性節(jié)點，3是文本節(jié)點忱辅。
<html> <head> <meta charset="utf-8"> </head> <body> <div id = "part"> <p class="part1">段落二<a href=" http://www.baidu.com ">我是鏈接</a></p> <p class="part2">段落三</p> </div> </body> <script> var parts = document.getElementById("part") parts.children // [p.part1, p.part2] parts.childNodes // [text, p.part1, text, p.part2, text] </script> </html>
3七蜘，查詢元素有幾種常見的方法？
document節(jié)點獲取
document.getElementById(' ')：
返回匹配指定ID屬性的元素節(jié)點.如果沒有發(fā)現(xiàn)匹配的節(jié)點墙懂，則返回null橡卤。
document.getElementsByClassName(' ')：
返回一個類似數(shù)組的對象（HTMLCollection類型的對象），包括了所有class名字符合指定條件的元素（搜索范圍包括本身）损搬，元素的變化實時反映在返回結(jié)果中.這個方法不僅可以在document對象上調(diào)用碧库，也可以在任何元素節(jié)點上調(diào)用;
document.getElementsByTagName(' ')：
返回所有指定標(biāo)簽的元素（搜索范圍包括本身）.返回值是一個HTMLCollection對象，也就是說巧勤，搜索結(jié)果是一個動態(tài)集合嵌灰，任何元素的變化都會實時反映在返回的集合中.這個方法不僅可以在document對象上調(diào)用，也可以在任何元素節(jié)點上調(diào)用;
document.querySelector('')：
返回匹配指定的CSS選擇器的元素節(jié)點.如果有多個節(jié)點滿足匹配條件颅悉，則返回第一個匹配的節(jié)點.如果沒有發(fā)現(xiàn)匹配的節(jié)點沽瞭，則返回null;
document.querySelectorAll()：
返回匹配指定的CSS選擇器的所有節(jié)點，返回的是NodeList類型的對象.NodeList對象不是動態(tài)集合签舞，所以元素節(jié)點的變化無法實時反映在返回結(jié)果中;
document.getElementsByName()：
方法用于選擇擁有name屬性的HTML元素秕脓，比如form柒瓣、img儒搭、frame、embed和object芙贫，返回一個NodeList格式的對象搂鲫，不會實時反映元素的變化。
document.elementFromPoint(x, y)：
elementFromPoint方法的參數(shù)x和y磺平，分別是相對于當(dāng)前窗口左上角的橫坐標(biāo)和縱坐標(biāo)魂仍，單位是CSS像素。elementFromPoint方法返回位于這個位置的DOM元素拣挪，如果該元素不可返回（比如文本框的滾動條）擦酌，則返回它的父元素（比如文本框）。如果坐標(biāo)值無意義（比如負值）菠劝，則返回nul
父元素節(jié)點獲壬薏啊：
parentNode
parentElement
兄弟節(jié)點獲取：
nextSibling
previousSibling
通過子節(jié)點獲取：
childNodes
firstChild
lastChild
4笼平，如何創(chuàng)建一個元素园骆？如何給元素設(shè)置屬性？
創(chuàng)建元素：
document.createElement(''):
createElement方法用來生成HTML元素節(jié)點寓调。
document.createTextNode(''):
createTextNode方法用來生成文本節(jié)點锌唾，參數(shù)為所要生成的文本節(jié)點的內(nèi)容。
document.DocumentFragment():
createDocumentFragment方法生成一個DocumentFragment對象夺英。DocumentFragment對象是一個存在于內(nèi)存的DOM片段晌涕，但是不
屬于當(dāng)前文檔，常常用來生成較復(fù)雜的DOM結(jié)構(gòu)痛悯，然后插入當(dāng)前文檔渐排。這樣做的好處在于，因為DocumentFragment不屬于當(dāng)前文檔灸蟆，
對它的任何改動驯耻，都不會引發(fā)網(wǎng)頁的重新渲染，比直接修改當(dāng)前文檔的DOM有更好的性能表現(xiàn)炒考。
屬性操作：
getAttribute():getAttribute()用于獲取元素的attribute值
createAttribute():createAttribute()方法生成一個新的屬性對象節(jié)點可缚，并返回它setAttribute():setAttribute()方法用于設(shè)置元素屬性
removeAttribute():removeAttribute()用于刪除元素屬性
5，元素的添加斋枢、刪除帘靡？
appendChild（）：在元素末尾添加元素；
insertBefore（）：在某個元素前插入元素瓤帚；
replaceChild（）：替換某個元素（要插入的元素描姚，要替換的元素）；
removeChild（）：刪除元素戈次；
舉例：
<body>
<div id="part">
<p class="part1">段落一<a href="#">我是鏈接</a></p>
</div>
<script>
var p = document.createElement('p');
document.body.appendChild(p); //在body最后添加了<p></p>;
添加div轩勘，給div添加class，添加內(nèi)容為hello：
<div class=wrap></div>
var node = document.createElement('div');
node.setAttribute('class','d');
node.innerHTML = "hello";
wrap.appendChild(node);
6怯邪，DOM0 事件和DOM2級在事件監(jiān)聽使用方式上有什么區(qū)別绊寻？
-
DOM0
DOM0在事件監(jiān)聽使用方式上，采用HTML內(nèi)鏈方式悬秉，即通過onclick 寫在HTML標(biāo)簽里的事件<a href="#" onclick="console.log('clicked');">點我</a> 或者： <div id="ct"> <a class="button" href="#">點我</a> </div> <script> document.querySelector(".button").onclick = function(e){ console.log('click me...'); console.log(this.innerText); console.log(e); }
這種寫法的缺點是不利于日后維護澄步，代碼只能使用一次，不可以重復(fù)使用和泌。
-
DOM2
DOM2事件有兩種方法：addEventListener()和removeEventListener()村缸。他們都返回三個參數(shù)，分別是：事件類型武氓、事件處理方法梯皿、布爾值（默認為false搪柑，false是冒泡階段處理，true是調(diào)用階段處理）索烹。<div id="ct"> <a class="button" href="#">點我</a> </div> <script> document.querySelector("#ct").addEventListener('click', function(){ console.log(this); console.log('in ct...'); },false);
7工碾，attachEvent與addEventListener的區(qū)別？
適用的瀏覽器不同：
addEventListener適用于現(xiàn)代瀏覽器（非低版本IE瀏覽器）百姓；
attachEvent是最低版本IE瀏覽器的私有方法渊额；參數(shù)和觸發(fā)階段不同：
addEventListener有三個參數(shù)，分別是事件類型垒拢，事件處理方法旬迹，布爾值，其中布爾值可以定義處理方式在捕獲/冒泡階段觸發(fā)求类；
true表明該事件監(jiān)聽器綁定在捕獲階段（和目標(biāo)階段）奔垦，false則表明綁定在冒泡階段（和目標(biāo)階段）且false是被默認的選項。第一個參數(shù)的形式不同：
addEventListener的第一個參數(shù)是click;
attachEvent的第一個參數(shù)是onclick;this不同：
addEventListener中的this是觸發(fā)事件的元素尸疆；
attachEvent的this指代的是window椿猎；在同一個事件上綁定多個事件處理程序時的執(zhí)行順序不同：
addEventListener會按照添加順序并按照布爾值執(zhí)行；
attachEvent的執(zhí)行是無序的寿弱；
8犯眠，解釋IE事件冒泡和DOM2事件傳播機制？
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="ct">
<a class="button" href="#">點我</a>
</div>
</body>
<script>
document.querySelector(".button").onclick = function(e){
console.log('click me...');
console.log(this.innerText);
console.log(e);
}
document.querySelector("#ct").addEventListener('click', function(){
console.log(this);
console.log('in ct...');
});
</script>
</html>
-
IE事件冒泡：
IE事件冒泡是事件由第一個被觸發(fā)的元素接收症革，然后逐級向上傳播筐咧。
DOM2的事件傳播機制：
DOM2事件傳播，事件由最外層元素接收噪矛，然后逐層向內(nèi)傳播量蕊，這個過程為捕獲階段，當(dāng)達到目標(biāo)元素時艇挨，處于目標(biāo)階段残炮，然后事件由目標(biāo)元素向最外層開始傳遞，這個過程稱之為冒泡階段雷袋。
捕獲階段：
9吉殃，如何阻止事件冒泡辞居？ 如何阻止默認事件楷怒？
常規(guī)瀏覽器：
-
阻止事件冒泡：stopPropagation( )
<body> <a id="btn" >點我</a> <script> var btn = document.querySelector("#btn"); btn.addEventListener('click',function(e){ console.log('at btn...',e); e.stopPropagation(); //阻止事件冒泡函數(shù) }) document.body.addEventListener("click",function(e){ console.log('at body...',e); }) </script>
當(dāng)執(zhí)行到a鏈接時，事件就會被阻止在a鏈接處瓦灶，不會傳到body上鸠删。
-
阻止默認事件：preventDefault( )
<body> <a id="btn" >點我</a> <script> var btn = document.querySelector("#btn"); btn.addEventListener('click',function(e){ console.log('at btn...',e); e.preventDefault(); //阻止默認事件函數(shù) }) document.body.addEventListener("click",function(e){ console.log('at body...',e); }) </script>
當(dāng)點擊a鏈接時，由于a鏈接默認會跳轉(zhuǎn)贼陶，e.preventDefault()阻止了a鏈接的跳轉(zhuǎn)刃泡。
IE瀏覽器：
-
阻止事件冒泡：
<body> <a id="btn" >點我</a> <script> var btn = document.querySelector('#btn'); btn.attachEvent('onclick',function(e){ console.log('at btn...',e); e.cancelBubble = true; //默認為false巧娱，設(shè)置為true后可以取消事件冒泡 }) </script> </body> -
阻止默認事件：
<body> <a id="btn" >點我</a> <script> var btn = document.querySelector('#btn'); btn.attachEvent('onclick',function(e){ console.log('at btn...',e); e.returnValue = false; //默認為true，設(shè)置為false后可以取消事件默認行為 }) </script> </body>
