1起意、dom對象的innerText和innerHTML有什么區(qū)別鹰服？
-
innerText是輸出/更改純文本； -
innerHTML不僅可以輸出/更改純文本還可以輸出/更改DOM節(jié)點樹揽咕； -
textContent基本用法與innerText一樣悲酷，區(qū)別在于它能夠輸出隱藏文本。
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="test">
<p style="display: none">你看不見我</p>
<p>你看得見我<p>
</div>
</body>
</html>
通過輸出結果也可以看出來亲善，使用
innerHTML="test"賦值時设易，將破壞原來的DOM節(jié)點樹，而innerText="test"則不會蛹头。
2顿肺、elem.children和elem.childNodes的區(qū)別戏溺？
-
elem.children僅僅輸出輸出包含子節(jié)點的類數(shù)組； -
elem.childNodes輸出包含在這個父節(jié)點中的任何元素（內(nèi)容屠尊，空格旷祸，換行，子節(jié)點等等）的類數(shù)組讼昆；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id = "parent">
123
<a id = "test" href = "/">測試</a>
<p>測試二</p>
</div>
</body>
</html>
3托享、查詢元素有幾種常見的方法？
-
document.getElementById()通過ID查找浸赫，因為ID只能用一次闰围，故能夠?qū)崿F(xiàn)精確查找到該DOM節(jié)點。返回值為單個元素掺炭。 -
document.getElementsByClassName()通過class查找辫诅，與ID不同的是凭戴，class能夠匹配多個DOM節(jié)點涧狮，故返回的是一個類數(shù)組（和數(shù)組很像，但是缺少數(shù)組的一些方法）么夫。 -
document.getElementsByTagName()同class一樣者冤，tag作為標簽能夠匹配多個節(jié)點，故返回的也是類數(shù)組档痪。
以上三者內(nèi)部參數(shù)都是已字符串名傳入（Element是單數(shù)涉枫，返回單個元素；Elements是復數(shù)腐螟，返回數(shù)組愿汰。嗯，可以這樣記憶乐纸，更防止寫錯）
新方法：
document.querySelector()document.querySelectorAll()
這倆均能查找任何標簽衬廷，class,id，寫法與CSS選擇器一樣汽绢；區(qū)別在于前者返回單個元素吗跋，當遇到重名時，返回第一個元素宁昭。而后者返回包含所有元素的數(shù)組跌宛；
下面是例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="test">
<p class="red blue">你看不見我</p>
<p class="red">你看得見我<p>
</div>
</body>
</html>
4、如何創(chuàng)建一個元素积仗？如何給元素設置屬性疆拘？
使用document.createElement()創(chuàng)建;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="test">
<p>你看不見我</p>
<p>你看得見我</p>
</div>
</body>
</html>
此時若想要給新創(chuàng)立的
p標簽，添加內(nèi)容寂曹，則可以：
或者使用element.setAttribute(name, value):
看到這題時哎迄，正好看到了每日一題中的該場景：究竟通過element.和element.setAttribute()設置屬性有何差異丹锹？
看一下這個例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<a id = "test" href = "/">測試</a>
<script>
var o = document.getElementById("test");
o.id = "test1";
console.log(o.getAttribute("id"));
console.log(o.href);
console.log(o.getAttribute("href"));
o.sex = "male";
console.log(o.getAttribute("sex"));
o.setAttribute("sex","female");
console.log(o.sex);
console.log(o.getAttribute("sex"))
</script>
</body>
</html>
- 第一個
console.log我們很容易理解，通過element.id把第一個id改為test1芬失，然后console.log(o.getAttribute("id"))同顯示為test1; - 第二個和第三個
console.log顯示了兩種方法對屬性的value的處理方式的差異楣黍，element.href將href的值轉換為真實的地址；而element.getAttribute("href")僅僅只是把值轉換為字符串形式棱烂； - 最后所有的
console.log都在闡明一件事情：對于自定義屬性租漂，兩者是不互通的，無法通過改變一方而去影響另外一方颊糜。
5哩治、元素的添加、刪除衬鱼？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="js">JavaScript</p>
<div id="list">
<p id="java">Java</p>
<p id="python">Python</p>
<p id="scheme">Scheme</p>
</div>
</body>
</html>
如果想把js添加至list的末端业筏，那么我們可以用parent.appendChild()這種方法：
但是如果想要把JS添加至java和python中間的話，就得使用parent.insertBefore()這種方式,它傳遞兩個參數(shù)鸟赫，前者為想要添加的DOM節(jié)點蒜胖，后者代表想要insertBefore的DOM節(jié)點：
值得注意的是，此時list中已經(jīng)包含了JS的DOM節(jié)點抛蚤，如果我想要繼續(xù)添加JS節(jié)點的話台谢，就會在刪除原位置的基礎上再進行更改：
刪除很簡單，直接用parent.remove()即可：
但有的時候我們不知道或者很難確立父節(jié)點怎么辦呢岁经？這時可以用.parentElement由子節(jié)點向上查找父節(jié)點：
在執(zhí)行刪除操作后朋沮，一定要切記，DOM樹的結構已經(jīng)發(fā)生了改變缀壤，parent.children[i]所對應的值也發(fā)生了變化樊拓，所以某些利用循環(huán)遍歷刪除的方法需要特別注意；
6塘慕、DOM0 事件和DOM2級在事件監(jiān)聽使用方式上有什么區(qū)別筋夏？
以click事件為例：
- DOM0的寫法
ele.onclick = function(){
//to do
}
- DOM2的寫法
ele.addEventListener("click",function(){
// to do
})
兩者差異在于DOM2可以擁有無數(shù)個click事件的方法，當click觸發(fā)時苍糠，同時所有的方法都能使用叁丧；而給DOM0添加新的事件方法時，顯然老方法將被新方法所覆蓋岳瞭。
7拥娄、attachEvent與addEventListener的區(qū)別？
-
attachEvent是老IE瀏覽器上綁定事件的方法 -
addEventListener是現(xiàn)代大多數(shù)逐漸主流瀏覽器（Chrome,firefox,safari）綁定事件的方法
區(qū)別在于：
1.參數(shù)差異：addEventListener(type,event,bollean)傳遞三個參數(shù)參數(shù)瞳筏，而attachEvent('on'+type,envent)只傳遞兩個參數(shù);addEventListener(type,event,bollean)前兩個參數(shù)的意思與attachEvent('on'+type,envent)的意思一樣稚瘾，只不過attachEvent('on'+type,envent)事件名稱前需要多加一個on；addEventListener(type,event,bollean)第三個參數(shù)傳遞的是布爾數(shù)姚炕，所代表的是冒泡型（false）還是捕獲型（true）摊欠，默認值為true丢烘；而attachEvent('on'+type,envent)只有一種方法，即冒泡型些椒。
2.處理順序差異：若為同一事件添加多個處理函數(shù)時播瞳，addEventListener()是按照書寫順序由上往下依次執(zhí)行，而attachEvent()沒有規(guī)定順序免糕，全部隨機排列赢乓；
3.作用域差異:addEventListener()的作用域是元素本身，this是指的觸發(fā)元素石窑，而attachEvent()事件處理程序會在全局變量內(nèi)運行牌芋，this是window。
我們在使用事件監(jiān)聽時松逊，為了自身便利躺屁，往往要封裝一個統(tǒng)一性的函數(shù)（看看Jquery的寫法），以消除瀏覽器的兼容性問題：
function addEveent(node,type,handler) {
if( !node ) return false; //若沒有參數(shù)傳遞经宏，關掉犀暑；
if(node.addEventListener){ //一般瀏覽器用這種方式來增添事件處理
node.addEventListener(type,handler,false);
return true;
}
if(node.attachEvent){ //給老IE專門設定的事件處理辦法
node["e" + type + handler] = handler; //為node對象綁定屬性，記錄傳入的處理函數(shù)（里面的名字可以亂取烛恤，這樣取僅僅是為了辨識度）
node[type + handler] = function () { //為node對象綁定屬性母怜，記錄一個函數(shù)，該函數(shù)為原處理函數(shù)在全局作用域下的事件
node["e" + type + handler](window.event);
};
node.attachEvent("on" + type, node[type + handler]);
return true;
}
}
function removeEvent(node, type, handler) {
if (!node) return false;
if (node.removeEventListener) {
node.removeEventListener(type, handler, false);
return true;
}
else if (node.detachEvent) {
node.detachEvent('on' + type, node[type + handler]);
node[type + handler] = null;
}
return false;
}
8缚柏、解釋IE事件冒泡和DOM2事件傳播機制？
歷史原因：IE和網(wǎng)景對事件傳播方式采有兩種截然不同的方法：IE采取了事件冒泡型碟贾，而網(wǎng)景則采用了事件捕獲型币喧；隨著歷史的發(fā)展，DOM2事件傳播機制誕生了：它包含了事件捕獲型和事件冒泡型袱耽，開發(fā)者可以根據(jù)需要手動的選擇采用何種類型傳播事件∩辈停現(xiàn)代瀏覽器都能使用DOM2事件傳播機制。
- 事件冒泡型：事件由觸發(fā)元素所在的具體節(jié)點開始朱巨，逐級向上傳播史翘，直至html根節(jié)點；
- 事件捕獲型：事件由html根節(jié)點開始冀续，層級下查琼讽，直至找到觸發(fā)元素所在的具體節(jié)點；
- DOM2： 先由html根節(jié)點通過事件捕獲至具體觸發(fā)元素所在的節(jié)點洪唐，再由該節(jié)點通過事件冒泡至html根節(jié)點钻蹬；由
addEventListener()的第三個參數(shù)true/false（捕獲/冒泡 default=false），來選擇具體由何種方式觸發(fā)凭需。
9问欠、如何阻止事件冒泡肝匆？ 如何阻止默認事件？
阻止事件冒泡：
- 大多數(shù)瀏覽器：
event.stopPropagation(); - IE老版本瀏覽器：
event.cancleBuble = true; //該屬性默認為false
阻止默認事件：
- 大多數(shù)瀏覽器：
event.preventDefault(); - IE老版本瀏覽器：
event.returnvalue = false; //該屬性默認為true
