1.dom對(duì)象的innerText和innerHTML有什么區(qū)別？
- innerText：獲取到當(dāng)前節(jié)點(diǎn)的文本內(nèi)容不包括標(biāo)簽
- innerHTML：返回元素的html結(jié)構(gòu)，包括標(biāo)簽
- outerHTML:返回元素的html結(jié)構(gòu)，包括標(biāo)簽, 返回內(nèi)容還包括本身.
<body>
<div id="div1" class="item"><p>我是一個(gè)DIV</p></div>
<script>
var Div = document.getElementById('div1');
console.log('innerText:'+ Div.innerText);//innerText:我是一個(gè)DIV
console.log('innerHTMl:'+ Div.innerHTML);//innerHTMl:<p>我是一個(gè)DIV</p>
console.log('outerHTML:'+ Div.outerHTML);//outerHTML:<div id="div1" class="item"><p>我是一個(gè)DIV</p></div>
</script>
2. elem.children和elem.childNodes的區(qū)別？
- elem.children:非標(biāo)準(zhǔn)的，它返回指定元素的子元素集合。經(jīng)測(cè)試，它只返回HTML節(jié)點(diǎn)，甚至不返回文本節(jié)點(diǎn)。
- elem:childNoder:標(biāo)準(zhǔn)的，返回指定元素的子元素集合，包括HTML屬性，所有屬性，文本?？梢酝ㄟ^(guò)nodeType來(lái)判斷是哪種類型的節(jié)點(diǎn)，只有當(dāng)nodeType==1時(shí)才是元素節(jié)點(diǎn)，2是屬性節(jié)點(diǎn)，3是文本節(jié)點(diǎn)。
<body>
<ul id="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
var Ul = document.getElementById('ul1');
console.log(Ul.children);//[li, li, li, li]
console.log(Ul.childNodes);//[text, li, text, li, text, li, text, li, text]
</script>
3. 查詢?cè)赜袔追N常見的方法？
- 通過(guò)document節(jié)點(diǎn)獲取：
document.getElementById(' '):返回匹配指定ID屬性的元素節(jié)點(diǎn).如果沒(méi)有發(fā)現(xiàn)匹配的節(jié)點(diǎn)，則返回null.
document.getElementsByClassName(' ') :返回一個(gè)類似數(shù)組的對(duì)象（HTMLCollection類型的對(duì)象），包括了所有class名字符合指定條件的元素（搜索范圍包括本身），元素的變化實(shí)時(shí)反映在返回結(jié)果中.這個(gè)方法不僅可以在document對(duì)象上調(diào)用，也可以在任何元素節(jié)點(diǎn)上調(diào)用;document.getElementsByTagName(' '):返回所有指定標(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)用;
document.querySelector(''):返回匹配指定的CSS選擇器的元素節(jié)點(diǎn).如果有多個(gè)節(jié)點(diǎn)滿足匹配條件，則返回第一個(gè)匹配的節(jié)點(diǎn).如果沒(méi)有發(fā)現(xiàn)匹配的節(jié)點(diǎn)，則返回null;
document.querySelectorAll():返回匹配指定的CSS選擇器的所有節(jié)點(diǎn)，返回的是NodeList類型的對(duì)象.NodeList對(duì)象不是動(dòng)態(tài)集合，所以元素節(jié)點(diǎn)的變化無(wú)法實(shí)時(shí)反映在返回結(jié)果中;
document.getElementsByName():方法用于選擇擁有name屬性的HTML元素，比如form、img、frame、embed和object，返回一個(gè)NodeList格式的對(duì)象，不會(huì)實(shí)時(shí)反映元素的變化。
document.elementFromPoint(x, y):elementFromPoint方法的參數(shù)x和y，分別是相對(duì)于當(dāng)前窗口左上角的橫坐標(biāo)和縱坐標(biāo)，單位是CSS像素。
elementFromPoint方法返回位于這個(gè)位置的DOM元素，如果該元素不可返回（比如文本框的滾動(dòng)條），則返回它的父元素（比如文本框）。如果坐標(biāo)值無(wú)意義（比如負(fù)值），則返回null。
- 通過(guò)父節(jié)點(diǎn)獲?。?/li>
parentNode
parentElement
- 通過(guò)兄弟節(jié)點(diǎn)獲取：
nextSibling
previousSilbing
- 通過(guò)子節(jié)點(diǎn)獲取
childNodes
firstChild
lastChild
<body>
<div id="div1" class="item"><p class="item"><img name="img">我是一個(gè)DIV</p></div>
<ul id="ul1">
<li class="list">1</li>
<li class="list">2</li>
<li class="list">3</li>
<li class="list">4</li>
</ul>
<script>
var Div1 = document.getElementById('div1');
var Div2 = document.getElementsByTagName('li');
var Div3 = document.querySelector('#div1');
var Div4 = document.querySelectorAll('.item')
var img = document.getElementsByName('img');
var Ul = document.querySelector('#ul1');
console.log(Div1);//<div id="div1" class="item"><p class="item"><img name="img">我是一個(gè)DIV</p></div>
console.log(Div2);//[li.list, li.list, li.list, li.list]
console.log(Div3);//<div id="div1" class="item"><p class="item"><img name="img">我是一個(gè)DIV</p></div>
console.log(Div4);//[div#div1.item, p.item]
console.log(img);//[img]
console.log(Div2[1].nextSibling);//#text
console.log(Div2[1].previousSibling);//#text
console.log(Ul.childNodes);//NodeList[9]0: text1: li.list2: text3: li.list4: text5: li.list6: text7: li.list8: textlength: 9__proto__: NodeList
19DOM事件.html:39 #text
console.log(Ul.firstChild);//#text
console.log(Ul.lastChild);//#text
console.log(Div2[0].parentNode);//<ul id="ul1"><li class="list">1</li><li class="list">2</li><li class="list">3</li><li class="list">4</li></ul>
console.log(Div2[0].parentElement);//ul id="ul1"><li class="list">1</li><li class="list">2</li><li class="list">3</li><li class="list">4</li></ul>
</script>
</body>
4. 如何創(chuàng)建一個(gè)元素？如何給元素設(shè)置屬性？
- 創(chuàng)建元素：
document.createElement(''):createElement方法用來(lái)生成HTML元素節(jié)點(diǎn)。
document.createTextNode(''):createTextNode方法用來(lái)生成文本節(jié)點(diǎn)，參數(shù)為所要生成的文本節(jié)點(diǎn)的內(nèi)容。
document.DocumentFragment():createDocumentFragment方法生成一個(gè)DocumentFragment對(duì)象。
DocumentFragment對(duì)象是一個(gè)存在于內(nèi)存的DOM片段，但是不屬于當(dāng)前文檔，常常用來(lái)生成較復(fù)雜的DOM結(jié)構(gòu)，然后插入當(dāng)前文檔。這樣做的好處在于，因?yàn)镈ocumentFragment不屬于當(dāng)前文檔，對(duì)它的任何改動(dòng)，都不會(huì)引發(fā)網(wǎng)頁(yè)的重新渲染，比直接修改當(dāng)前文檔的DOM有更好的性能表現(xiàn)。
- 屬性操作
getAttribute():getAttribute()用于獲取元素的attribute值
createAttribute():createAttribute()方法生成一個(gè)新的屬性對(duì)象節(jié)點(diǎn)，并返回它
setAttribute():setAttribute()方法用于設(shè)置元素屬性
removeAttribute():removeAttribute()用于刪除元素屬性
<div id="ct1" class="zyn">123</div>
<script>
var Div = document.getElementById('ct1');
var d= document.createAttribute('class');
d.value ="zyn1";
Div.setAttributeNode(d);//zyn1
console.log(Div.getAttribute('id'));//ct1
Div.setAttribute("id", "ct2");//id == ct2
Div.removeAttribute('id');//""
</script>
5.元素的添加、刪除？
- appendChild():在元素末尾添加元素；
- insertBefore(): 在某個(gè)元素前插入元素；
- replaceChild():接受來(lái)個(gè)參數(shù)（要插入的元素，要替換的元素）
- removeChild():刪除元素；
QQ截圖20161227151841.jpg
6. DOM0 事件和DOM2級(jí)在事件監(jiān)聽使用方式上有什么區(qū)別？
- DOM0事件監(jiān)聽：Dom0級(jí)事件處理程序是將一個(gè)函數(shù)賦值給一個(gè)事件處理程序?qū)傩?，而通過(guò)將事件處理程序設(shè)置為null刪除綁定在元素上的事件處理程序。這種方法無(wú)法給一個(gè)事件添加多個(gè)事件處理程序,后面的程序會(huì)覆蓋前面的程序。
<script>
//指定時(shí)間處理程序
var btn = document.querySelector("#btn");
btn.onclick = function()
{
alert(this.id)
};
//刪除事件處理程序
btn.onclick= null;
</script>
- DOM2事件監(jiān)聽：而Dom2級(jí)定addEventListener()removeEventListener()
用于處理指定和刪除事件處理程序。所有Dom節(jié)點(diǎn)都包含這兩個(gè)方法，并且它們都接受3個(gè)參數(shù)，要處理的事件名、作為事件處理程序的函數(shù)和一個(gè)布爾值。最后這個(gè)布爾值參數(shù)如果是true，表示在捕獲階段調(diào)用事件處理程序；如果是false，表示在冒泡階段調(diào)用事件處理程序。
<script>
var btn = document.querySelector("#btn");
var handle = function()
{
alert(this.id);
}
//指定事件處理程序
btn.addEventListener("click", handle,false);
//刪除事件處理程序
btn.removeEventListener("click",handle,false);
</script>
注意：removeEventListener()函數(shù)來(lái)移除事件處理程序時(shí)，移除時(shí)的參數(shù)必須與添加處理程序時(shí)使用的參數(shù)相同，這也意味著通過(guò)addEventListener()添加的匿名函數(shù)將無(wú)法移除.（只能用上面的方法寫）如：
<script>
var btnClick = document.getElementById('btnClick');
btnClick.addEventListener('click', function() {
alert(this.id);
}, false);
btnClick.addEventListener('click', function() {
alert('Hello!');
}, false);
//無(wú)法移除
btnClick.removeEventListener('click',function(){
},fasle)
</script>
區(qū)別：使用Dom2級(jí)方法添加事件處理程序的主要好處是可以添加多個(gè)事件處理程序，而Dom0級(jí)為一個(gè)事件添加多個(gè)事件處理程序時(shí)，后面的程序會(huì)覆蓋前面的。
7. attachEvent與addEventListener的區(qū)別？
在添加事件處理程序時(shí)addEventListener和attachEvent（ie）主要有幾個(gè)區(qū)別
1. 參數(shù)個(gè)數(shù)不相同，這個(gè)最直觀，addEventListener有三個(gè)參數(shù)，attachEvent只有兩個(gè)，attachEvent添加的事件處理程序只能發(fā)生在冒泡階段，addEventListener第三個(gè)參數(shù)可以決定添加的事件處理程序是在捕獲階段還是冒泡階段處理（我們一般為了瀏覽器兼容性都設(shè)置為冒泡階段）
2. 第一個(gè)參數(shù)意義不同，addEventListener第一個(gè)參數(shù)是事件類型（比如click，load），而attachEvent第一個(gè)參數(shù)指明的是事件處理函數(shù)名稱（onclick，onload）
3. 事件處理程序的作用域不相同，addEventListener的作用域是元素本身，this是指的觸發(fā)元素，而attachEvent事件處理程序會(huì)在全局變量?jī)?nèi)運(yùn)行，this是window，而不是元素id
4. 為一個(gè)事件添加多個(gè)事件處理程序時(shí)，執(zhí)行順序不同addEventListener添加會(huì)按照添加順序執(zhí)行，而attachEvent添加多個(gè)事件處理程序時(shí)順序無(wú)規(guī)律(添加的方法少的時(shí)候大多是按添加順序的反順序執(zhí)行的，但是添加的多了就無(wú)規(guī)律了)，所以添加多個(gè)的時(shí)候，不依賴執(zhí)行順序的還好，若是依賴于函數(shù)執(zhí)行順序，最好自己處理，不要指望瀏覽器
8. 解釋IE事件冒泡和DOM2事件傳播機(jī)制？
1.IE的事件流叫做事件冒泡（event bubbling），即事件開始時(shí)由最具體的元素接收，然后逐級(jí)向上傳播到較為不具體的節(jié)點(diǎn)（文檔）
2.Netscape的事件捕獲（event capturing）：不太具體的節(jié)點(diǎn)更早接收事件，而最具體的元素最后接收事件，和事件冒泡相反
3.DOM事件流：DOM2級(jí)事件規(guī)定事件流包括三個(gè)階段，事件捕獲階段，處于目標(biāo)階段，事件冒泡階段，最先發(fā)生的是事件捕獲，為截取事件提供機(jī)會(huì)，然后是實(shí)際目標(biāo)接收事件，最后是冒泡階段(如圖)
QQ截圖20161227160815.jpg
9. 如何阻止事件冒泡？ 如何阻止默認(rèn)事件？
- 阻止事件冒泡：
<script>
var stopPropagation= function(event){
if(event.stoppropagation()){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
}//兼容ie
</script>
- 阻止默認(rèn)事件：
<script>
var preventDefault= function(event){
if(event.preventDefault()){
event.preventDefault();
}else{
event.returnValue= false;
}
}//兼容ie
</script>
代碼練習(xí)
要求當(dāng)點(diǎn)擊每一個(gè)元素li時(shí)控制臺(tái)展示該元素的文本內(nèi)容。不考慮兼容
代碼1補(bǔ)全代碼，要求：當(dāng)點(diǎn)擊按鈕開頭添加時(shí)在li這里是</li>元素前添加一個(gè)新元素，內(nèi)容為用戶輸入的非空字符串；當(dāng)點(diǎn)擊結(jié)尾添加時(shí)在li前端6班/li后添加用戶輸入的非空字符串.當(dāng)點(diǎn)擊每一個(gè)元素li時(shí)控制臺(tái)展示該元素的文本內(nèi)容。
代碼2要求：當(dāng)鼠標(biāo)放置在li元素上，會(huì)在img-preview里展示當(dāng)前l(fā)i元素的data-img對(duì)應(yīng)的圖片。
代碼3實(shí)現(xiàn)Tab切換的功能
代碼4實(shí)現(xiàn)模態(tài)框功能
代碼5
