1.dom對(duì)象的innerText和innerHTML的區(qū)別
- innerText 會(huì)輸出相對(duì)應(yīng)的文本內(nèi)容
- innerHTML屬性返回該元素包含的HTML代碼。該屬性可讀寫(xiě)，常用來(lái)設(shè)置某個(gè)節(jié)點(diǎn)的內(nèi)容。
<body>
<p class="p1">
我是p1我是p1我是p1
</P>
<p class="p2">
我是p2我是p2我是p2
</P>
</body>
2.Element.children和Element.childNodes的區(qū)別
- childNodes屬性返回一個(gè)NodeList集合，成員包括當(dāng)前節(jié)點(diǎn)的所有子節(jié)點(diǎn)。
- Element.children屬性返回一個(gè)HTMLCollection對(duì)象，包括當(dāng)前元素節(jié)點(diǎn)的所有子元素。它是一個(gè)類(lèi)似數(shù)組的動(dòng)態(tài)對(duì)象
兩者區(qū)別：除了HTML元素節(jié)點(diǎn)，該屬性返回的還包括Text節(jié)點(diǎn)和Comment節(jié)點(diǎn)
3.查詢(xún)?cè)赜袔追N常見(jiàn)的方法？
-
document/element.querySelector( )
接受一個(gè)CSS選擇器作為參數(shù)，返回匹配該選擇器的元素節(jié)點(diǎn)。如果有多個(gè)節(jié)點(diǎn)滿(mǎn)足匹配條件，則返回第一個(gè)匹配的節(jié)點(diǎn)。如果沒(méi)有發(fā)現(xiàn)匹配的節(jié)點(diǎn)，則返回null。
-
document/element.querySelectorAll( )
與querySelector用法類(lèi)似，區(qū)別是返回一個(gè)NodeList對(duì)象，包含所有匹配給定選擇器的節(jié)點(diǎn)。
-
document/Element.getElementsByClassName( )
方法返回一個(gè)類(lèi)似數(shù)組的對(duì)象（HTMLCollection實(shí)例對(duì)象），包括了所有class名字符合指定條件的元素，元素的變化實(shí)時(shí)反映在返回結(jié)果中。
-
document.getElementsById( )
返回匹配指定id屬性的元素節(jié)點(diǎn)。如果沒(méi)有發(fā)現(xiàn)匹配的節(jié)點(diǎn)，則返回null。
這個(gè)方法只能在document對(duì)象上使用，不能在其他元素節(jié)點(diǎn)上使用。
- document/element.getElementByTagName( )
返回所有指定HTML標(biāo)簽的元素，返回值是一個(gè)類(lèi)似數(shù)組的HTMLCollection
對(duì)象，可以實(shí)時(shí)反映HTML文檔的變化。如果沒(méi)有任何匹配的元素，就返回一個(gè)空集。
4.如何創(chuàng)建一個(gè)元素？如何給元素設(shè)置屬性？
- 通過(guò)creatElement( ) 可以創(chuàng)建元素
- 另外通過(guò)setAttribute(xx.qq)可以為元素設(shè)置屬性
-
同時(shí)也可以使用賦值的方法，例如div.id=div1;
5.元素的添加、刪除？
- 創(chuàng)建元素后，需要將文本添加到DOM樹(shù)中可通過(guò)如下方法實(shí)現(xiàn)
- document.body.appendChild( );
- document.body.insertBefore( );
- document.body.replaceChild( );
-刪除已有元素
- document.body.removeChild( );
- Element.removeAttribute( )刪除元素屬性
6.DOM0 事件和DOM2級(jí)在事件監(jiān)聽(tīng)使用方式上有什么區(qū)別？
- DOM0
document.el.onclick="function( ){}"
在事件流冒泡階段觸發(fā)。
- DOM2（
getEventListener( )、removeEventListener( )）
document.el.getEventListener(type/"click" , function( ){ } , true/false)
刪除可用 removeEventListener( type , function( ){ } )
運(yùn)行流程先對(duì)事件進(jìn)行捕獲，然后在進(jìn)行冒泡，第三個(gè)屬性false/true。fasle為默認(rèn)屬性，代指事件在冒泡過(guò)程中觸發(fā)。true則代指在捕獲過(guò)程中觸發(fā)。
- IE (
attachEvent( ),detachEvent( ))
document.el.attchEvent("onclick", function( ){ })
在事件流冒泡階段觸發(fā)。
7.attachEvent與addEventListener的區(qū)別？
- addEventListener是W3C標(biāo)準(zhǔn)，而attachEvent()不是W3C標(biāo)準(zhǔn)，并只支持IE8瀏覽器以下的
- addEventListener里面有三個(gè)參數(shù)（類(lèi)型、函數(shù)、布爾值）而attachEvent只有兩個(gè)（類(lèi)型、函數(shù)），只支持事件冒泡。
- addEventListener接收的類(lèi)型為click而attachEvent接收的是onclick。
- addEventListener的移除函數(shù)方法是removeEventListener，而attachEvent移除函數(shù)的方法是detachEvent。
- addEventListener的作用域是元素本身，this指的是觸發(fā)元素，attachEvent的作用域是全局this指的是window。
- addEventListener按照添加順序執(zhí)行，attachEvent沒(méi)有順序執(zhí)行。
8.解釋IE事件冒泡和DOM2事件傳播機(jī)制？
- IE
事件開(kāi)始時(shí)由具體的元素，文檔中嵌套層次最深的節(jié)點(diǎn)接收，然后逐個(gè)向上傳播 - DOM2
運(yùn)行流程先對(duì)事件進(jìn)行捕獲，然后在進(jìn)行冒泡，第三個(gè)屬性false/true。fasle為默認(rèn)屬性，代指事件在冒泡過(guò)程中觸發(fā)。true則代指在捕獲過(guò)程中觸發(fā)。
9.如何阻止事件冒泡？ 如何阻止默認(rèn)事件？
- preventDefault( )
阻止默認(rèn)事件 - stopPropagation( )
取消事件進(jìn)一步捕獲和冒泡
以上都需要對(duì)象屬相cancelable 為true時(shí)可以使用
