問答題
1、dom對(duì)象的innerText和innerHTML有什么區(qū)別筛圆？
innerText特性用來修改起始標(biāo)簽和結(jié)束標(biāo)簽之間的文本的。在多層次的時(shí)候會(huì)按照元素由淺到深的順序拼接其內(nèi)容椿浓。
innerHTML太援，將返回所有元素和文本的HTML代碼闽晦。
2、elem.children和elem.childNodes的區(qū)別提岔？
elem.childNodes 獲取作為指定對(duì)象直接后代的 HTML 元素和 TextNode 對(duì)象的集合仙蛉。
elem.children 獲取作為對(duì)象直接后代的 DHTML 對(duì)象的集合。
elem.childNodes是符合W3C標(biāo)準(zhǔn)的碱蒙，比較通用荠瘪。elem.children只是IE支持，不是標(biāo)準(zhǔn)赛惩，F(xiàn)irefox就不支持哀墓。
關(guān)于nodeType
在線編輯
3、查詢?cè)赜袔追N常見的方法喷兼？
1.getElementById()
2.getElementsByClassName()
3.getElementsByTagName()
4.getElementsByName() 查詢帶name屬性的標(biāo)簽元素
5.querySelector() 查詢帶有css選擇器或者標(biāo)簽的元素篮绰，返回第一個(gè)匹配元素
6.querySelectorAll() 查詢帶有css選擇器或者標(biāo)簽的元素，返回所有匹配元素
7.elementFromPoint(x,y) 查詢頁(yè)面指定位置的元素（參與單位為像素季惯，位置相對(duì)于當(dāng)前窗口左上角）阶牍，如果不可返回，則返回其父元素星瘾，如果坐標(biāo)值無意義走孽，則返回null。
4琳状、如何創(chuàng)建一個(gè)元素磕瓷？如何給元素設(shè)置屬性？
方法一：
var newDiv = document.createElement("div");//創(chuàng)建一個(gè)游離的div元素節(jié)點(diǎn)
newDiv.id = 'mydiv';//為div元素添加mydiv的ID念逞；
console.log(newDiv);//<div id="mydiv"></div>
方法二：
<body>
<div>
<p id="mytext">我是段落困食。</p>
</div>
<script>
var text = document.getElementById("mytext");
text.setAttribute("class","text2");
console.log(text);//<p id="mytext" class="text2">我是段落。</p>
</script>
</body>
5翎承、元素的添加硕盹、刪除尽纽？
添加元素appendChild(),在元素末尾添加元素
insertBefore(),在某個(gè)元素之前插入元素
<body>
<div>
<p id="mytext">我是段落忌卤。</p>
</div>
<script>
var text = document.getElementById("mytext");
var newContent = document.createTextNode("新增內(nèi)容。");
text.appendChild(newContent);
</script>
</body>
<div>
<p id="mytext">我是段落赦拘。</p>
</div>
<script>
var text = document.getElementById("mytext");
var insertContent = document.createTextNode("插入內(nèi)容甸各。");
text.insertBefore(insertContent,text.firstChild);
</script>
</body>
刪除元素：
parentNode.removeChild(childNode);
6垛贤、attachEvent與addEventListener的區(qū)別？
1.適應(yīng)的瀏覽器版本不同
attachEvent方法適用于IE
addEventListener方法適用于FF
2.針對(duì)的事件不同
attachEvent中的事件帶on趣倾，即事件處理程序方法
addEventListener中的事件不帶on聘惦，即事件處理程序名稱
3.參數(shù)的個(gè)數(shù)不同
attached = target.attachEvent(eventNameWithOn, callback)
非W3C標(biāo)準(zhǔn)瀏覽器，僅適用IE儒恋。attachEvent方法兩個(gè)參數(shù)：第一個(gè)參數(shù)為事件方法（含on善绎，如"onclick"）黔漂，第二個(gè)參數(shù)為接收事件處理的函數(shù)。
target.addEventListener(type,listener,[useCapture]);
W3C標(biāo)準(zhǔn)瀏覽器禀酱，有三個(gè)參數(shù)：第一個(gè)參數(shù)表示事件名稱（不含 on瘟仿，如 "click"）；第二個(gè)參數(shù)表示要接收事件處理的函數(shù)比勉；第三個(gè)參數(shù)是一個(gè)bool值，如果是true表示在捕獲階段調(diào)用事件處理程序驹止，如果是false浩聋，則是在事件冒泡階段處理。
4.事件處理程序的作用域
addEventListener()：作用域是元素本身臊恋，this指的是觸發(fā)元素衣洁。
attachEvent()方法：事件處理程序會(huì)在全局作用域內(nèi)運(yùn)行，this 等于 window抖仅。
學(xué)習(xí)文章：js事件綁定及深入
5.移除事件綁定
刪除DOM0 級(jí)事件處理程序坊夫，只需把元素的屬性賦為null即可。
detachEvent()用于刪除attachEvent()添加的時(shí)間處理程序撤卢。
用 addEventListener() 添加的事件處理程序只能使用 removeEventListener() 來移除环凿，移除時(shí)傳入的參數(shù)與添加時(shí)的參數(shù)相同。
所以放吩，用 attachEvent()和addEventListener() 添加的匿名函數(shù)將無法移除智听。
6.事件處理程序的執(zhí)行順序：
addEventListener按照添加順序執(zhí)行，而attachEvent順序無規(guī)律(添加的方法少的時(shí)候大多是按添加順序的反順序執(zhí)行的渡紫，但是添加的多了就無規(guī)律)到推。
7、解釋IE事件冒泡和DOM2事件傳播機(jī)制惕澎？
事件流所描述的就是從頁(yè)面中接受事件的順序莉测。
IE事件冒泡即事件開始時(shí)，由最具體的元素接收（也就是事件發(fā)生所在的節(jié)點(diǎn)）唧喉，然后逐級(jí)傳播到較為不具體的節(jié)點(diǎn)捣卤。
事件捕獲的概念，與事件冒泡正好相反八孝。它認(rèn)為當(dāng)某個(gè)事件發(fā)生時(shí)腌零，父元素應(yīng)該更早接收到事件，具體元素則最后接收到事件唆阿。
DOM2級(jí)事件規(guī)定事件流包括三個(gè)階段益涧，事件捕獲階段，處于目標(biāo)階段驯鳖，事件冒泡階段闲询，首先發(fā)生的是事件捕獲久免，為截取事件提供機(jī)會(huì)，然后是實(shí)際目標(biāo)接收事件扭弧，最后是冒泡階段阎姥。
關(guān)于事件流
8、如何阻止事件冒泡鸽捻？ 如何阻止默認(rèn)事件呼巴？
事件冒泡過程，是可以被阻止的御蒲。防止事件冒泡而帶來不必要的錯(cuò)誤和困擾衣赶。
w3c瀏覽器 監(jiān)聽事件(event)中添加stopPropagation(),
IE瀏覽器事件添加cancelBubble=true。
w3c瀏覽器監(jiān)聽事件(event)中添加preventDefault(),
IE瀏覽器事件添加returnValue=false厚满。
代碼題
1.有如下代碼府瞄，要求當(dāng)點(diǎn)擊每一個(gè)元素li時(shí)控制臺(tái)展示該元素的文本內(nèi)容。不考慮兼容碘箍。
<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>前端6班</li>
</ul>
<script>
var li = document.getElementsByClassName('ct')[0].getElementsByTagName('li');
for(var i = 0;i<li.length;i++){
li[i].addEventListener('click',function(){
console.log(this.innerText);
})
}
</script>
2遵馆、補(bǔ)全代碼，要求：
1.當(dāng)點(diǎn)擊按鈕開頭添加時(shí)在<li>這里是</li>元素前添加一個(gè)新元素丰榴，內(nèi)容為用戶輸入的非空字符串货邓；
2.當(dāng)點(diǎn)擊結(jié)尾添加時(shí)在<li>前端6班</li>后添加用戶輸入的非空字符串.
當(dāng)點(diǎn)擊每一個(gè)元素li時(shí)控制臺(tái)展示該元素的文本內(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],
ipt = document.getElementsByClassName('ipt-add-content')[0],
startbtn = document.getElementById('btn-add-start'),
endbtn = document.getElementById('btn-add-end');
ct.addEventListener('click',function(e){
if(e.target.tagName.toLowerCase() === 'li'){
console.log(e.target.innerText);
}
})
startbtn.addEventListener('click',function(){
var li = document.createElement('li');
li.innerText = ipt.value;
ct.insertBefore(li,ct.firstChild);
})
endbtn.addEventListener('click',function(){
var li = document.createElement('li');
li.innerText = ipt.value;
ct.appendChild(li);
})
</script>
3.補(bǔ)全代碼四濒，要求：當(dāng)鼠標(biāo)放置在li元素上逻恐，會(huì)在img-preview里展示當(dāng)前l(fā)i元素的data-img對(duì)應(yīng)的圖片。
<ul class="ct">
<li data-img="1.png">鼠標(biāo)放置查看圖片1</li>
<li data-img="2.png">鼠標(biāo)放置查看圖片2</li>
<li data-img="3.png">鼠標(biāo)放置查看圖片3</li>
</ul>
<div class="img-preview">
</div>
<script>
var ct = document.querySelector('.ct'),
imgBox = ct.querySelectorAll('li'),
imgPre = document.querySelector('.img-preview');
for(var i = 0;i<imgBox.length;i++){
imgBox[i].addEventListener('mouseenter',function(){
var dataImg = this.getAttribute('data-img');
imgPre.innerHTML ="<img src='"+ dataImg+"'>";
})
}
</script>
