• dom對(duì)象的innerText和innerHTML有什么區(qū)別？

• innerHTML指的是從對(duì)象的起始位置到終止位置的全部?jī)?nèi)容,包括Html標(biāo)簽。

• innerText 指的是從起始位置到終止位置的內(nèi)容,但它去除Html標(biāo)簽。
  

  innerHTML、innerText的區(qū)別

• elem.children和elem.childNodes的區(qū)別？

• elem.childNodes屬性為標(biāo)準(zhǔn)屬性，是只讀的類數(shù)組對(duì)象(NodeList對(duì)象)，表示該節(jié)點(diǎn)下的所有子節(jié)點(diǎn),該屬性返回的還包括Text節(jié)點(diǎn)(換行、空格)和Comment(注釋)節(jié)點(diǎn)。

• elem.children屬性為非標(biāo)準(zhǔn)屬性，返回一個(gè)類似數(shù)組的動(dòng)態(tài)對(duì)象（實(shí)時(shí)反映變化），包括當(dāng)前元素節(jié)點(diǎn)的所有子元素。

  
  
  elem.children、elem.childNodes的區(qū)別

• 查詢?cè)赜袔追N常見的方法？

• 通過(guò)ID選取元素：getElementById方法返回匹配指定ID屬性的元素節(jié)點(diǎn)。

var id = document.getElementById('id');

• 通過(guò)CSS類選取元素: getElementsByClassName方法返回的是一個(gè)類數(shù)組對(duì)象，是NodeList對(duì)象，包含所有匹配的后代節(jié)點(diǎn)。

var class1 = document.getElementsByClassName('class')[0];
var class2 = document.getElementsByClassName('class')[1];
var class3 = document.getElementsByClassName('classA classB');

• 通過(guò)標(biāo)簽名選取元素：getElementsByTagName()方法用來(lái)選取指定標(biāo)簽名的HTML元素,返回的也是一個(gè)類數(shù)組NodeList對(duì)象。

var tag = document.getElementsByClassName('p');[0]

• 通過(guò)名字name選取元素：getElementsByName()方法根據(jù)name屬性的值選取HTML元素，返回的是類數(shù)組NodeList對(duì)象。

var name = document.getElementsByName('name');[0]

• 通過(guò)CSS選擇器選取元素：
  1 querySelector()方法：接受一個(gè)CSS選擇符，返回第一個(gè)元素，如果沒(méi)有找到匹配元素返回null。
  2 querySelectorAll()方法：接受方法月querySelector()一樣，返回的是一個(gè)NodeList類數(shù)組。

var el1 = document.querySelector(".class");//選中class類的第一個(gè)元素
var el2 = document.querySelectorAll('#id > span');//選中id元素的子元素中所有的span元素
var el3 = document.querySelectorAll("div.id1, div.id2");//選中id為id1或id2的元素

• 如何創(chuàng)建一個(gè)元素？如何給元素設(shè)置屬性？
• 生成HTML元素節(jié)點(diǎn)：createElement方法用來(lái)生成HTML元素節(jié)點(diǎn)。

var newDiv = document.createElement("div");//生成一個(gè)div元素

• 生成文本節(jié)點(diǎn)：createTextNode方法用來(lái)生成文本節(jié)點(diǎn)，參數(shù)為所要生成的文本節(jié)點(diǎn)的內(nèi)容。

var newContent = document.createTextNode("content");//生成content文本

• 生成內(nèi)存DOM片段：createDocumentFragment方法生成一個(gè)存在于內(nèi)存的DOM片段的DocumentFragment對(duì)象。DocumentFragment不屬于當(dāng)前文檔，對(duì)它的任何改動(dòng)，都不會(huì)引發(fā)網(wǎng)頁(yè)的重新渲染。

var docFragment = document.createDocumentFragment();

• 克隆元素：cloneNode()方法用于克隆元素，方法有一個(gè)布爾值參數(shù)，傳入true的時(shí)候會(huì)深復(fù)制，也就是會(huì)復(fù)制元素及其子元素（IE還會(huì)復(fù)制其事件），false的時(shí)候只復(fù)制元素本身,默認(rèn)為false。

node.cloneNode(deep);

cloneNode()

• 將外部文檔的一個(gè)節(jié)點(diǎn)拷貝一份,然后可以把這個(gè)拷貝的節(jié)點(diǎn)插入到當(dāng)前文檔中.

document.importNode(node, deep);

document.importNode(node,deep)

• createElement()：創(chuàng)建HTML元素
• getAttribute()：用于獲取元素的attribute值

• setAttribute()：用于設(shè)置元素的attribute值

  
  
  創(chuàng)建元素并設(shè)置屬性

• 元素的添加、刪除？

• appendChild()在元素末尾添加元素

  
  
  appendChild()

• insertBefore()在某個(gè)元素前面插入元素 ,插入的位置可以用parent.childNodes[n]精確選擇

  
  
  insertBefore()
  
  
  parent.childNodes[n]

• removeChild()刪除元素

  
  
  removeChild()

• DOM0 事件和DOM2級(jí)在事件監(jiān)聽使用方式上有什么區(qū)別？

• DOM0級(jí)方法指定的時(shí)間處理程序被認(rèn)為是元素的方法。事件的處理程序是在元素的作用域中運(yùn)行。其中this引用的是當(dāng)前元素。使用btn.onclick = null就可以刪除事件處理程序。

var oBtn = document.getElementById('btn');
oBtn.onclick = function(event){
        console.log(this);
        console.log(this.id);
        console.log(event);
    };

結(jié)果

• DOM2級(jí)事件定義了兩個(gè)方法，用于處理指定和刪除時(shí)間處理的程序操作: addEventListener()和removeEventListener()。DOM包含的這兩種方法有三個(gè)參數(shù)：處理的事件名稱、處理事件函數(shù)、布爾值。第三個(gè)參數(shù)默認(rèn)為false，當(dāng)為true時(shí)表示在捕獲階段調(diào)用事件處理程序；為false時(shí)表示在冒泡階段調(diào)用事件處理程序。

    oBtn.addEventListener('click', function(event){
        console.log(this);
        console.log(this.id);
        console.log(event);
    });
    oBtn.addEventListener('click', function(){
        console.log("第二個(gè)");
    });

結(jié)果

• 上面的代碼給按鈕添加了事件處理程序，該事件因?yàn)闆](méi)用設(shè)置第三個(gè)參數(shù)默認(rèn)為false所以是在冒泡階段調(diào)用。與DOM0級(jí)方法一樣，這里的事件處理程序也是在其依附的元素的作用域中運(yùn)行。使用DOM2及方法添加事件處理程序可以添加多個(gè)事件處理程序，依次執(zhí)行。通過(guò)addEventListener()添加的事件只能使用removeEventListener()移除。
• 如果在removeEventListener()中的第二個(gè)參數(shù)使用自執(zhí)行函數(shù)，是沒(méi)有效果的，因?yàn)榈诙€(gè)參數(shù)雖然使用的是addEventListener()第二個(gè)參數(shù)看上去一樣，但完全不是同一個(gè)東西。所以當(dāng)要使用移除時(shí)要把第二個(gè)參數(shù)的函數(shù)賦值為變量指針上再傳入。

btn.removeEventListener('click', function(){}, false)//無(wú)效
var handler = function(){};
btn.removeEventListener('click', handler, false)//有效

• attachEvent與addEventListener的區(qū)別？
• attachEvent：
  1 屬于DOM0級(jí)事件處理程序，只適用于IE9以前的瀏覽器版本
  2 attachEvent()方法有兩個(gè)參數(shù), 第一個(gè)參數(shù)為事件，第二個(gè)參數(shù)為處理程序
  3 事件參數(shù)前需要加on,寫成attachEvent('on' + type, handler)
  4 attachEvent()方法只有冒泡處理事件
  5 attachEvent()方法的刪除需要給事件相應(yīng)的屬性值設(shè)置為null
  6 attachEvent()方法作用域?yàn)槿謱傩詔his指向是window，返回this.id為undefined,handler.apply(node)可以用這段代碼改變作用域處理
  7 attachEvent()方法添加多個(gè)事件時(shí)會(huì)出現(xiàn)混亂。
• addEventListener:
  1 屬于DOM2級(jí)事件處理程序，適用于新版本瀏覽器
  2 addEventListener()方法有三個(gè)參數(shù)，第一個(gè)參數(shù)為事件，第二個(gè)參數(shù)為處理程序，第三個(gè)參數(shù)為布爾值默認(rèn)為false，為false時(shí)表示在冒泡階段調(diào)用，true表示在捕獲階段調(diào)用。
  3 事件參數(shù)寫為addEventListener(type, handler, boolean)
  4 addEventListener()方法可以通過(guò)設(shè)置第三個(gè)參數(shù)值操作事件處理程序在捕獲、冒泡階段調(diào)用。
  5 addEventListener()方法添加的事件處理程序只能使用removeEventListener()來(lái)移除
  6 addEventListener()方法的作用域是調(diào)用的處理程序使用的事件目標(biāo)，this值指向的當(dāng)前事件
  7 addEventListener()方法添加的事件處理程序可以為多個(gè)，它們會(huì)按照順序觸發(fā)。
• 解釋IE事件冒泡和DOM2事件傳播機(jī)制？
• DOM事件流（event flow ）存在三個(gè)階段：事件捕獲階段、處于目標(biāo)階段、事件冒泡階段。
• IE時(shí)間只有冒泡傳播機(jī)制：從接收的子元素，由內(nèi)到外進(jìn)行事件傳播，直到根節(jié)點(diǎn)。如.btn>div>body>html
• DOM2事件傳播機(jī)制：包含所有DOM時(shí)間流階段，事件捕獲階段→處于目標(biāo)階段→事件冒泡階段，如當(dāng)鼠標(biāo)點(diǎn)擊或者觸發(fā)dom事件時(shí)，瀏覽器會(huì)從根節(jié)點(diǎn)開始由外到內(nèi)進(jìn)行事件傳播，即點(diǎn)擊了子元素，如果父元素通過(guò)事件捕獲方式注冊(cè)了對(duì)應(yīng)的事件的話，會(huì)先觸發(fā)父元素綁定的事件。

    document.getElementById('btn').addEventListener('click', function(event){
        console.log('冒泡btn');
    });
    document.body.addEventListener('click', function(event){
        console.log('冒泡body');
    });

冒泡結(jié)果

    document.getElementById('btn').addEventListener('click', function(event){
        console.log('捕獲btn');
    });
    document.body.addEventListener('click', function(event){
        console.log('捕獲body');
    }, true);

捕獲結(jié)果

• 如何阻止事件冒泡？ 如何阻止默認(rèn)事件？
• 針對(duì)非IE瀏覽器，在監(jiān)聽事件中添加stopPropagation()用于阻止事件冒泡;preventDefault()用于阻止默認(rèn)事件
• 針對(duì)IE瀏覽器，在監(jiān)聽事件中令屬性cancelBubble=true即可阻止事件冒泡，令屬性returnValue=false可阻止默認(rèn)行為

function getEvent(e) {
    return e || window.event;
}
function getTarget(e) {
    return e.target || e.scrElement;
}
function preventDefault(e) {
    if (e.preventDefault)
        e.preventDefault();
    else
        e.returnValue = false;
}
function stopPropagation(e) {
    if (e.stopPropagation)
        e.stopPropagation();
    else
        e.cancelBubble = true;
}

    document.getElementById('btn').addEventListener('click', function(event){
        event.stopPropagation();
        console.log('阻止事件冒泡btn');
    });
    document.body.addEventListener('click', function(event){
        console.log('body');
    });

阻止時(shí)間冒泡的輸出結(jié)果結(jié)果

    document.getElementById('btn').addEventListener('click', function(event){
        event.preventDefault();
        console.log('btn');
    });//取消默認(rèn)事件

實(shí)現(xiàn)模態(tài)框
代碼5

本博客版權(quán)歸 本人和饑人谷所有，轉(zhuǎn)載需說(shuō)明來(lái)源