問答
1.dom對象的innerText和innerHTML有什么區(qū)別？
- innerText:獲取到當前節(jié)點的文本內容不代標簽
- innerHTML:返回元素的html結構，帶標簽
2.elem.children和elem.childNodes的區(qū)別？
- elem.children:獲取html的子節(jié)點,返回一個HTMLCollection集合
- elem.childNodes:獲取所有子節(jié)點,返回一個NodeList集合,除了HTML元素節(jié)點，該屬性返回的還包括Text節(jié)點和Comment節(jié)點。
3.查詢元素有幾種常見的方法？
- getElementById 返回匹配指定ID屬性的元素節(jié)點如果沒有發(fā)現(xiàn)匹配的節(jié)點，則返回null。這也是獲取一個元素最快的方法;
- getElementsByClassName 返回一個類似數組的對象（HTMLCollection類型的對象），包括了所有class名字符合指定條件的元素（搜索范圍包括本身），元素的變化實時反映在返回結果中。這個方法不僅可以在document對象上調用，也可以在任何元素節(jié)點上調用。注意，返回的是數組
- getElementByTagName 方法返回所有指定標簽的元素（搜索范圍包括本身）。返回值是一個HTMLCollection對象，也就是說，搜索結果是一個動態(tài)集合，任何元素的變化都會實時反映在返回的集合中。這個方法不僅可以在document對象上調用，也可以在任何元素節(jié)點上調用。(如
<a> <p>) 它返回的也是一個數組. - querySelector返回匹配指定的CSS選擇器的元素節(jié)點。如果有多個節(jié)點滿足匹配條件，則返回第一個匹配的節(jié)點。如果沒有發(fā)現(xiàn)匹配的節(jié)點，則返回null。實時反映元素的變化。 (這個id,class都能查找匹配）
- querySelectorAll()方法返回匹配指定的CSS選擇器的所有節(jié)點，返回的是NodeList類型的對象。NodeList對象不是動態(tài)集合，所以元素節(jié)點的變化無法實時反映在返回結果中。
4.如何創(chuàng)建一個元素？如何給元素設置屬性？
- 用document.createElement('元素名')來生成html元素節(jié)點
var newDiv=document.createElement("div");
- 用setAttribute()給元素設置屬性，里面?zhèn)魅雰蓚€值，第一個值為元素的屬性，第二個值為定義的值。
var node = document.getElementById("wrap");
node.setAttribute("class","head");
5.元素的添加、刪除？
- (1) 在元素末尾添加元素:appendChild();
<ul id="list">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
<script>
var node=document.createElement("li");//創(chuàng)建一個元素節(jié)點
text=document.createTextNode("列表4");//創(chuàng)建一個新文本
node.appendChild(text);//將創(chuàng)建的新文本添加到元素節(jié)點的底部
list=document.getElementById("list");//獲取到列表
list.appendChild(node);//將新節(jié)點添加為列表的最后一個子節(jié)點
</script>
- (2)在某個元素之前插入元素：insertBefore(新節(jié)點, 參照子節(jié)點)
將新節(jié)點插入當前結點的某個子節(jié)點前面
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Welcome");
newDiv.insertBefore(newContent, newDiv.firstChild);
- 在父元素上調用用來刪除子元素:removeChild();刪除當前結點的某個子節(jié)點
6.DOM0 事件和DOM2級在事件監(jiān)聽使用方式上有什么區(qū)別？
- DOM0
DOM0事件就是通過onclick寫在HTML標簽里的事件
<a href="#" onclick="console.log('clicked');">點我</a>
這種寫法的缺點是不利于日后維護，代碼只能使用一次，沒有復用性。
- DOM2
DOM2事件有兩種方法一個是addEventListener()和removeEventListener() 它們都返回三個參數分別是事件類型、事件處理方法和布爾值默認為false，false是冒泡階段處理，如果是ture就是在調用階段處理。
<input id='btn' type="button" name="name" value="點我啊" />
<script>
var btn = document.querySelector("#btn")
btn.addEventListener("click",function(){
console.log("北京歡迎你")
},false)
</script>
7.attachEvent與addEventListener的區(qū)別？
- 適用的瀏覽器不同：
addEventListener適用于現(xiàn)代瀏覽器
attachEvent是低版本IE瀏覽器的私有方法 - 參數和觸發(fā)階段不同:
addEventListener有三個參數，最后一個參數可以定義處理程序在捕獲/冒泡階段觸發(fā)
attachEvent只有兩個傳遞參數，只能在冒泡階段觸發(fā) - 第一個參數的形式不同：
addEventListener的第一個參數是click
而attachEvent的第一個參數是onclick - this不同:
addEventListener中的this是觸發(fā)事件的元素
attachEvent的this指代的是window - 在同一個事件上綁定多個事件處理程序時的執(zhí)行順序不同 addEventListener會按添加順序并按照第三個參數執(zhí)行
而 attachEvent 的執(zhí)行是無序的
8.解釋IE事件冒泡和DOM2事件傳播機制？
- IE事件冒泡是事件由第一個被觸發(fā)的元素接收，然后逐級向上傳播.
- DOM2事件傳播，事件由最外層元素接收，然后逐層向內傳播，這個過程為捕獲階段，當達到目標元素時，處于目標階段，然后事件由目標元素向最外層開始傳遞，這個過程稱之為冒泡階段.
9.如何阻止事件冒泡？ 如何阻止默認事件？
- e.stopPropagation();阻止事件冒泡,ie中則用cancelBubble()
- e.preventDefault();阻止默認事件,ie中需要把returnValue設為 false
