dom對象的innerText和innerHTML有什么區(qū)別？
innerText會將所有輸出的東西以文本的形式展示在頁面上春缕，inderHTML則會返回元素的HTML結(jié)構(gòu)，根據(jù)內(nèi)容會自動創(chuàng)建DOM诀浪。
elem.children和elem.childNodes的區(qū)別磕昼？
elem.children是獲取文本節(jié)點以外的DOM節(jié)點對象，
elem.childNodes是獲取所有的DOM節(jié)點钱雷，包括空的骂铁、文本節(jié)點。
查詢元素有幾種常見的方法罩抗？
- getElementsById():查找指定ID屬性的元素
- getElementsByClassName():查找指定class屬性的元素
- getElementsByTagName():查找指定標簽的元素
- getElementsByName():查找具有name屬性的元素
- querySeletor():相當于css選擇器拉庵，查找具有匹配標簽的第一個節(jié)點
- querySeletorAll():相當于css選擇器，查找具有匹配標簽的所有節(jié)點
如何創(chuàng)建一個元素套蒂？如何給元素設置屬性钞支？
- createElement()創(chuàng)建一個HTML元素，參數(shù)為tagname操刀，不帶<>括號烁挟。
- createTextNode()創(chuàng)建一個文本節(jié)點，參數(shù)為文本內(nèi)容骨坑。
- setAttribute()用于設置元素屬性撼嗓，
元素的添加、刪除？
- appendChild():在某個元素末尾添加元素
- insertBefore():在某個元素之前添加元素
- removeChild():刪除某個元素
DOM0 事件和DOM2級在事件監(jiān)聽使用方式上有什么區(qū)別且警？
- DOM0級事件 是將一個函數(shù)賦值綁定在一個事件處理程序上粉捻，只能同時處理一個事件。
- DOM2級 定義了兩個方法用于處理指定和刪除事件處理程序的操作斑芜，并且可以為事件添加多個事件處理程序肩刃。
attachEvent與addEventListener的區(qū)別？
- 參數(shù)個數(shù)不同押搪，addEventListener有三個參數(shù)树酪，attchEvent只有兩個，attachEvent添加的時間處理程序只能發(fā)生在冒泡階段大州，addEventListener第三個參數(shù)可以決定添加的事件處理程序是在捕獲階段還是冒泡階段處理
- 第一個參數(shù)意義不同续语， addEventListener的第一個參數(shù)是事件類型（比如click,load)，而addachEvent第一個參數(shù)指明的是事件處理函數(shù)名稱（onclick,onload）
- 事件處理程序的作用域不同厦画，addEventListener的作用域是元素本身疮茄，this指的是觸發(fā)元素，而attachEvent事件處理程序會在全局變量內(nèi)運行根暑，this是window
- 為一個事件添加多個事件處理程序時力试，執(zhí)行順序不同，addEventListener添加會按照添加順序執(zhí)行排嫌，而addachEvent添加多個事件處理程序時順序無規(guī)律（添加的 方法少的時候大多是按照添加順序的反順序執(zhí)行的畸裳，但是添加的多了就無規(guī)律了），所以添加多個的時候淳地，若依賴執(zhí)行函數(shù)順序怖糊，需要自己處理，不能指望瀏覽器颇象。
解釋IE事件冒泡和DOM2事件傳播機制伍伤？
- IE事件冒泡指的是事件會從最內(nèi)層的元素開始發(fā)生，一層一層的向上傳播遣钳，直到HTML根節(jié)點扰魂。
- DOM2事件傳播機制：
- 事件捕獲階段：事件從根節(jié)點向下一層一層尋找事件的目標節(jié)點。
- 目標階段：到達目標節(jié)點蕴茴，執(zhí)行目標事件劝评。
- 事件冒泡階段：事件從目標節(jié)點一層一層回溯到根節(jié)點。
如何阻止事件冒泡倦淀？ 如何阻止默認事件付翁？
- 使用stopPropagation()函數(shù)阻止事件冒泡。
- 使用preventDefault()函數(shù)取消事件的默認行為晃听。
代碼題
- 有如下代碼百侧，要求當點擊每一個元素li時控制臺展示該元素的文本內(nèi)容砰识。不考慮兼容
<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>前端6班</li>
</ul>
<script>
var ct = document.querySelector('.ct'),
li= ct.querySelectorAll('li');
for(var i= 0; i< li.length; i++){
li[i].onclick = function(){
console.log(this.innerText);
}
}
</script>
- 本博客版權歸羞澀的澀和饑人谷所有，轉(zhuǎn)載請注明出處
