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