keywords: DOM、事件代理。
問答
-
dom對象的innerText和innerHTML有什么區(qū)別专执？
innerText屬性會返回元素節(jié)點下的文本節(jié)點，并拼接成文本內(nèi)容郁油。例如：
<div id="testdiv">
<p>This is <em>my</em>content.</p>
</div>
<script>
window.onload = function () {
var testdiv = document.getElementById('testdiv')
console.log(testdiv.innerText)
}
</script>
//This is mycontent.
innerHTML屬性會得到元素節(jié)點下的html內(nèi)容本股，包括子元素節(jié)點及其屬性節(jié)點、文本節(jié)點桐腌。例如：
<div id="testdiv">
<p>This is <em>my</em>content.</p>
</div>
<script>
window.onload = function () {
var testdiv = document.getElementById('testdiv')
console.log(testdiv.innerHTML)
}
</script>
//<p>This is <em>my</em>content.</p>
innerText和innerHTML都支持讀取和寫入內(nèi)容拄显。
-
elem.children和elem.childNodes的區(qū)別？
childNodes屬性可以用來獲得任何一個元素的所有直接子元素案站，它是一個包含這個元素全部子元素的數(shù)組：
element.childNodes
childNodes返回的內(nèi)容包括文本節(jié)點和元素節(jié)點躬审。其中，返回的#text就是文本節(jié)點蟆盐，內(nèi)容是空格承边、換行符或制表符等。
與childNodes不同的是舱禽，children屬性返回的內(nèi)容僅包括直接子元素的元素節(jié)點炒刁。
-
查詢元素有幾種常見的方法？
5中獲取特定元素的方法：
1誊稚、getElementById：返回一個對象翔始，該對象對應(yīng)著文檔里的一個特定的元素節(jié)點
2、getElementByclassName和getElementByTagName：返回一個對象數(shù)組里伯，它們分別對應(yīng)著文檔里的一組特定的元素節(jié)點
3城瞎、querySelectorAll：返回當前文檔中匹配一個特定選擇器的所有的元素 .返回的對象類型是 [NodeList]（類數(shù)組對象）
4、querySelector：根據(jù)匹配的選擇器疾瓮，返回一個對象脖镀，該對象對應(yīng)著文檔里的一個特定的元素節(jié)點
-
如何創(chuàng)建一個元素？如何給元素設(shè)置屬性狼电？
創(chuàng)建元素：
createElement()用來創(chuàng)建一個元素節(jié)點蜒灰，參數(shù)為所要創(chuàng)建的元素弦蹂。
var img = document.createElement('img')
img.id = 'myimg'
console.log(img)
//<img id='myimg'>
creatElement()創(chuàng)建的元素游離在內(nèi)存中，需要使用appendChild()追加到元素的底部强窖。
查詢屬性：
getAttribute是一個函數(shù)凸椿，參數(shù)是打算查詢的屬性的名字,返回屬性的內(nèi)容：
obj.getAttribute(attribute)
getAttribute方法不屬于document對象，不能通過document對象調(diào)用翅溺，而只能通過元素節(jié)點對象調(diào)用脑漫。例如，可以與getElementByTagName方法何用咙崎，獲取每個<p>元素的title屬性：
var paras = document.getElementByTagName('p')
for (var i = 0 ; i < paras.length ; i ++ ) {
alert(paras[i].getAttribute('title'))
}
設(shè)置屬性：
setAttribute可以用于對屬性節(jié)點設(shè)置屬性优幸。
obj.setAttribute(attribute,value)
例如：
var shopping = document.getElementById('purchases')
console.log(shopping.getAttribute('title'))
shopping.setAttribute('title', 'a list of goods')
console.log(shopping.getAttribute('title'))
-
元素的添加、刪除褪猛？
元素的添加：
appendChild：在元素的末尾添加一個子元素節(jié)點
var newDiv = document.createElement('div')
var newContent = document.createTextNode('hello')
newDiv.appendChild(newContent)
insertBefore：在某個元素之前插入元素
var newDiv = document.createElement('div')
var newContent = document.createTextNode('hello')
newDiv.insertbefore(newContent , newDiv.firstChild)
//把newContent放在newDiv的里面网杆，插入在newDiv的第一個子元素的前面。
元素的刪除：
removeChild：刪除某個元素握爷，參數(shù)為一個待刪除的元素
parentNode.removeChild(childNode)
-
DOM0 事件和DOM2級在事件監(jiān)聽使用方式上有什么區(qū)別跛璧？
DOM0：每個元素都有自己的事件處理程序?qū)傩裕@些屬性名稱通常為小寫新啼，如onclick等追城，將這些屬性的值設(shè)置為一個函數(shù)，就可以指定事件處理程序燥撞，如下
<input id="btnClick" type="button" value="Click Here" />
<script type="text/javascript">
var btnClick = document.getElementById('btnClick');
btnClick.onclick = function showMessage() {
alert(this.id);
};
</script>
事件處理程序被認為是元素的方法座柱，事件處理程序在元素的作用域下運行，this就是當前元素物舒，所以點擊button結(jié)果是：btnClick.
如果要刪除事件處理程序色洞，只需把元素的onclick屬性賦為null即可。
DOM2：OM2級事件定義了兩個方法用于處理指定和刪除事件處理程序的操作：
1冠胯、addEventListener
2火诸、 removeEventListener
所有的DOM節(jié)點都包含這兩個方法，并且它們都接受三個參數(shù)：
1荠察、事件類型
2置蜀、事件處理方法
3、布爾參數(shù)悉盆，如果是true表示在捕獲階段調(diào)用事件處理程序盯荤，如果是false，則是在事件冒泡階段處理焕盟。
例如：
<input type="button" value="Click here" id="btnClick">
<script>
var btnClick = document.getElementById('btnClick')
btnClick.addEventListener('click' , function( ) {
alert(this.id)
} , false)
</script>
與DOM0不同的是秋秤，DOM2可以為上述代碼的click事件添加多個處理程序。
另外，如果要移除事件處理程序灼卢，只能通過removeEventListener,移除時的參數(shù)與添加時相同绍哎。（匿名函數(shù)無法移除）
-
attachEvent與addEventListener的區(qū)別？
1芥玉、兼容性：IE不兼容addEventListener蛇摸，但支持attachEvent；
2灿巧、參數(shù)：addEventListener接收3個參數(shù)（類型、函數(shù)揽涮、布爾值）抠藕，attachEvent接收2個（類型、函數(shù)蒋困，只支持事件冒泡）盾似；
3、類型名稱：比如addEventListener接收的類型為click雪标，而attachEvent接收的則是onclick零院；
4、移除函數(shù)：addEventListener的移除方法是removeEventListener村刨，而attachEvent的移除方法是detachEvent告抄；
5、作用域：addEventListener的作用域是元素本身嵌牺，this指的是觸發(fā)元素打洼，而attachEvent的作用域是全局，this指的是window逆粹；
6募疮、事件處理程序的執(zhí)行順序：addEventListener按照添加順序執(zhí)行，而attachEvent順序無規(guī)律(添加的方法少的時候大多是按添加順序的反順序執(zhí)行的僻弹，但是添加的多了就無規(guī)律)阿浓。
-
解釋IE事件冒泡和DOM2事件傳播機制？
IE事件冒泡：事件開始時由最具體的元素接收蹋绽，然后逐級向上傳播到較為不具體的元素芭毙。
DOM2事件傳播：分事件捕獲階段，處于目標階段蟋字，事件冒泡階段稿蹲。首先發(fā)生的是事件捕獲，為截取事件提供機會鹊奖，然后是實際目標接收事件苛聘，最后是冒泡階段。
-
如何阻止事件冒泡？ 如何阻止默認事件设哗？
stopPropagation()方法用于立即停止事件在DOM層次中的傳播唱捣，阻止事件進一步冒泡或捕獲，一般用于阻止事件傳播到body网梢。(不能阻止同一document節(jié)點上的其他事件句柄被調(diào)用)
<input type="button" value="Click here" id="btnClick">
<script>
var btnClick = document.getElementById('btnClick')
btnClick.addEventListener('click' , function(event ) {
console.log(event)
alert('click')
event.stopPropagation()
} , false)
document.body.addEventListener('click' , function(event ) {
alert('click')
} , false)
</script>
要阻止事件的默認行為震缭，可以使用preventDefault()方法，前提是cancelable值為true战虏，比如我們可以阻止鏈接導航這一默認行為
document.getElementsByTagName('a').onclick = function (event) {
event.preventDefault();
}
代碼
-
有如下代碼拣宰，要求當點擊每一個元素li時控制臺展示該元素的文本內(nèi)容。不考慮兼容
<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>前端6班</li>
</ul>
<script>
var ct = document.getElementsByClassName('ct')[0]
ct.addEventListener( 'click' , function(e) {
console.log(e.target.innerText)
, false})
</script>
-
補全代碼烦感，要求：
1巡社、當點擊按鈕開頭添加時在
<li>這里是</li>元素前添加一個新元素，內(nèi)容為用戶輸入的非空字符串手趣；
2晌该、當點擊結(jié)尾添加時在<li>前端6班</li>后添加用戶輸入的非空字符串.
3、 當點擊每一個元素li時控制臺展示該元素的文本內(nèi)容绿渣。
<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>前端6班</li>
</ul>
<input class="ipt-add-content" placeholder="添加內(nèi)容"/>
<button id="btn-add-start">開頭添加</button>
<button id="btn-add-end">結(jié)尾添加</button>
<script>
var ct = document.getElementsByClassName('ct')[0]
var content = document.getElementsByClassName('ipt-add-content')[0]
var btnStart = document.getElementById('btn-add-start')
var btnEnd = document.getElementById('btn-add-end')
btnStart.addEventListener('click' , handler)
btnEnd.addEventListener('click' ,handler)
function handler (e) {
var newE = document.createElement('li')
var newContent = document.createTextNode(content.value)
newE.appendChild(newContent)
if (e.target.id === 'btn-add-start') {
ct.insertBefore(newE , ct.firstChild)
} else ct.appendChild(newE)
}
ct.addEventListener('click',function (e) {
console.log(e.target.innerText)
} , false)
</script>
-
補全代碼朝群，要求：當鼠標放置在li元素上，會在
img-preview里展示當前li元素的data-img對應(yīng)的圖片中符。
-
實現(xiàn)如下圖Tab切換的功能
-
實現(xiàn)下圖的模態(tài)框功能
