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

• innerText是一個(gè)可寫(xiě)屬性，返回元素內(nèi)包含的文本內(nèi)容，在多層次的時(shí)候會(huì)按照元素由淺到深的順序拼接其內(nèi)容

• innerHTML屬性作用和innerText類(lèi)似，但是不是返回元素的文本內(nèi)容，而是返回元素的HTML結(jié)構(gòu)，在寫(xiě)入的時(shí)候也會(huì)自動(dòng)構(gòu)建DOM

  <div id="ct">
    <p>文本信息</p>
  </div>
  <script type="text/javascript">
    var ct=document.getElementById("ct");
    var text=ct.innerText;//"文本信息"
    var html=ct.innerHTML;//"<p>文本信息  </p>"
  </script>
  

• 由例子我們可以明顯看出，innerText最會(huì)獲取標(biāo)簽里的文本信息，但是innerHTML則會(huì)獲取整個(gè)標(biāo)簽和內(nèi)部的文本信息

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

• childNodes 屬性，標(biāo)準(zhǔn)的，它返回指定元素的子元素集合，包括HTML節(jié)點(diǎn)，所有屬性，文本。可以通過(guò)nodeType來(lái)判斷是哪種類(lèi)型的節(jié)點(diǎn)，只有當(dāng)nodeType==1時(shí)才是元素節(jié)點(diǎn)，2是屬性節(jié)點(diǎn)，3是文本節(jié)點(diǎn)。IE6/7/8/Safari/Chorme/Opera都支持，IE9/Firefox不支持

• children 屬性，非標(biāo)準(zhǔn)的，它返回指定元素的子元素集合。經(jīng)測(cè)試，它只返回HTML節(jié)點(diǎn)，甚至不返回文本節(jié)點(diǎn)。且在所有瀏覽器下表現(xiàn)驚人的一致。和childNodes 一樣，在Firefox下不支持()取集合元素。因此如果想獲取指定元素的第一個(gè)HTML節(jié)點(diǎn)，可以使用children[0]來(lái)替代。需注意children在IE中包含注釋節(jié)點(diǎn)。

  <div id="ct">
    <p>文本信息</p>
    <p>hello world</p>
    <p>
        hello one
        <ul>
            <li>one</li>
            <li>two</li>
        </ul>
    </p>
  

  </div>
  <script type="text/javascript">
  var ct=document.getElementById("ct");
  ct.childern;//[p, p, p, ul, p]長(zhǎng)度為5
  ct.childNodes;//[text, p, text, p, text, p, ul, text, p, text]長(zhǎng)度10，
  </script>

3.查詢(xún)?cè)赜袔追N常見(jiàn)的方法？

• getElementById方法返回匹配指定ID屬性的元素節(jié)點(diǎn)。如果沒(méi)有發(fā)現(xiàn)匹配的節(jié)點(diǎn)，則返回null。這也是獲取一個(gè)元素最快的方法

• getElementsByClassName方法返回一個(gè)類(lèi)似數(shù)組的對(duì)象（HTMLCollection類(lèi)型的對(duì)象），包括了所有class名字符合指定條件的元素（搜索范圍包括本身），元素的變化實(shí)時(shí)反映在返回結(jié)果中。這個(gè)方法不僅可以在document對(duì)象上調(diào)用，也可以在任何元素節(jié)點(diǎn)上調(diào)用

• getElementsByTagName方法返回所有指定標(biāo)簽的元素（搜索范圍包括本身）。返回值是一個(gè)HTMLCollection對(duì)象，搜索結(jié)果是一個(gè)動(dòng)態(tài)集合，任何元素的變化都會(huì)實(shí)時(shí)反映在返回的集合中。這個(gè)方法不僅可以在document對(duì)象上調(diào)用，也可以在任何元素節(jié)點(diǎn)上調(diào)用。

• getElementsByName方法用于選擇擁有name屬性的HTML元素，比如form、img、frame、embed和object，返回一個(gè)NodeList格式的對(duì)象，不會(huì)實(shí)時(shí)反映元素的變化。不兼容IE瀏覽器

• querySelector方法返回匹配指定的CSS選擇器的元素節(jié)點(diǎn)。如果有多個(gè)節(jié)點(diǎn)滿(mǎn)足匹配條件，則返回第一個(gè)匹配的節(jié)點(diǎn)。如果沒(méi)有發(fā)現(xiàn)匹配的節(jié)點(diǎn)，則返回null

• querySelectorAll方法返回匹配指定的CSS選擇器的所有節(jié)點(diǎn)，返回的是NodeList類(lèi)型的對(duì)象。NodeList對(duì)象不是動(dòng)態(tài)集合，所以元素節(jié)點(diǎn)的變化無(wú)法實(shí)時(shí)反映在返回結(jié)果中。

• elementFromPoint方法返回位于頁(yè)面指定位置的元素。elementFromPoint方法的參數(shù)x和y，分別是相對(duì)于當(dāng)前窗口左上角的橫坐標(biāo)和縱坐標(biāo)，單位是CSS像素。elementFromPoint方法返回位于這個(gè)位置的DOM元素，如果該元素不可返回（比如文本框的滾動(dòng)條），則返回它的父元素（比如文本框）。如果坐標(biāo)值無(wú)意義（比如負(fù)值），則返回null

    <div id="ct">
    <p class="text">文本信息</p>
    <p class="text">hello world</p>
    <p class="text">
        hello one
        <ul>
            <li>
            one
            <img src="" name="one">
            </li>
            <li>two</li>
        </ul>
    </p>
  

  </div>
  <script type="text/javascript">
  var ct=document.getElementById("ct");//獲取id為ct的元素
  var text=document.getElementsByClassName("text")//獲取class為text的元素
  var all=document.getElementsByTagName("ul")//數(shù)組長(zhǎng)度1的[ul]；
  var one=document.getElementsByName("one")//數(shù)組[img]
  //以下是ES-5的新方式，>=IE11才支持，
  var li=document.querySelector("li")//<li>one<img src="" name="one"></li>
  var lis=document.querySelectorAll("li")//數(shù)組[li, li]
  var ele=document.elementFromPoint(-200,-200);
  //注意單位不用帶px和引號(hào)，并且單位為負(fù)值，所以不存在返回值為null.
  </script>

4.如何創(chuàng)建一個(gè)元素？如何給元素設(shè)置屬性？

• createElement方法用來(lái)生成HTML元素節(jié)點(diǎn)。
  var newDiv = document.createElement("div"); createElement方法的參數(shù)為元素的標(biāo)簽名，即元素節(jié)點(diǎn)的tagName屬性。如果傳入大寫(xiě)的標(biāo)簽名，會(huì)被轉(zhuǎn)為小寫(xiě)。如果參數(shù)帶有尖括號(hào)（即<和>）或者是null，會(huì)報(bào)錯(cuò)。

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

• 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)
  var docFragment = document.createDocumentFragment()

• setAttribute()方法用于設(shè)置元素屬性

  <div id="ct"></div>
  <script type="text/javascript">
    var node=document.getElementById("ct");
    node.setAttribute("myAttrib","new-value");
    //等價(jià)于
    var node = document.getElementById("ct");
    var a = document.createAttribute("myAttrib");
        a.value = "new-value";
    node.setAttributeNode(a);
  </script>
  

5.元素的添加、刪除？

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

• insertBefore(),在某個(gè)元素之前插入元素

• 刪除元素使用removeChild()方法即可或replaceChild( )替換節(jié)點(diǎn)

  <div id="box">
    <p id="p1">hello</p>
    <p>hello world</p>
  

  </div>
  <script type="text/javascript">
  var box=document.getElementById("box");
  var newDiv=document.createElement("div");
  var newP=document.createElement("p");
  box.appendChild(newDiv);//在第2個(gè)p標(biāo)簽后添加一個(gè)div
  box.insertBefore(newP,newDiv);//在newDiv前插入newP，注意必須有兩個(gè)參數(shù)
  //removeChild首先需要找到被刪元素的父元素，通過(guò)父元素將其需要?jiǎng)h除的子元素刪除
  var p1=document.getElementById("p1")
  p1.parentNode.removeChild(p1);/將div里id為p1的段落刪
  </script>

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

• DOM0 級(jí)事件處理程序不能添加多個(gè)事件處理程序，前面的會(huì)被后面的覆蓋，有兩種使用方式：
  1.內(nèi)聯(lián)方式
  <input type=button value="click" onclick="click()">
<input type=button value="click" onclick="alert("hello world")">
  2.JavaScript指定事件處理程序
  通過(guò)JavaScript指定事件處理程序就是把一個(gè)方法賦值給一個(gè)元素的事件處理程序?qū)傩?這樣還有一個(gè)好處，我們可以刪除事件處理程序，只需把元素的onclick屬性賦為null即可

  <input type="button" value="click me" id="btn"></input>
  <script type="text/javascript">
    var btn=document.getElementById("btn");
    btn.onclick=function show(){
        alert("hello everyone")
    }
    btn.onclick=function showmessage(){
        alert("hello two")
    };//后面onclick會(huì)覆蓋前面的onclick事件
    btn.onclick=null;//onclick 事件被刪除
  </script>
  

• DOM2級(jí)事件定義了兩個(gè)方法用來(lái)添加和移除事件處理程序：addEventListener()和removeEventListener()。addEventListener():可以為元素添加多個(gè)事件處理程序，而且可以是同一事件類(lèi)型，不同效果疊加，觸發(fā)時(shí)會(huì)按照添加順序依次調(diào)用先后執(zhí)行。removeEventListener():用于移除由 addEventListener() 方法添加的事件句柄，不能移除匿名添加的函數(shù)。

• 所有的DOM節(jié)點(diǎn)都包含這兩個(gè)方法，并且它們都接受三個(gè)參數(shù)：
  1.事件類(lèi)型
  2.事件處理方法
  3.布爾參數(shù)，如果是true表示在捕獲階段調(diào)用事件處理程序，如果是false，則是在事件冒泡階段處理

  var btn=document.getElementById("btn");
         btn.addEventListener("click",function(){
            alert("hello one")
          },true)
         var handler=function (){
            alert(this.id)
         };
         btn.addEventListener("click",handler,false);
         btn.removeEventListener("click",handler,false)
  

7.attachEvent與addEventListener的區(qū)別？

• 參數(shù)個(gè)數(shù)不相同，這個(gè)最直觀(guān)，addEventListener有三個(gè)參數(shù)，attachEvent只有兩個(gè)，attachEvent添加的事件處理程序只能發(fā)生在冒泡階段，addEventListener第三個(gè)參數(shù)可以決定添加的事件處理程序是在捕獲階段還是冒泡階段處理（我們一般為了瀏覽器兼容性都設(shè)置為冒泡階段）
• 第一個(gè)參數(shù)意義不同，addEventListener第一個(gè)參數(shù)是事件類(lèi)型（比如click，load），而attachEvent第一個(gè)參數(shù)指明的是事件處理函數(shù)名稱(chēng)（onclick，onload）
• 事件處理程序的作用域不相同，addEventListener的作用域是元素本身，this是指的觸發(fā)元素，而attachEvent事件處理程序會(huì)在全局變量?jī)?nèi)運(yùn)行，this是window，所以剛才例子才會(huì)返回undefined，而不是元素id
• 為一個(gè)事件添加多個(gè)事件處理程序時(shí)，執(zhí)行順序不同，addEventListener添加會(huì)按照添加順序執(zhí)行，而attachEvent添加多個(gè)事件處理程序時(shí)順序無(wú)規(guī)律(添加的方法少的時(shí)候大多是按添加順序的反順序執(zhí)行的，但是添加的多了就無(wú)規(guī)律了)，所以添加多個(gè)的時(shí)候，不依賴(lài)執(zhí)行順序的還好，若是依賴(lài)于函數(shù)執(zhí)行順序，最好自己處理，不要指望瀏覽器

8.解釋IE事件冒泡和DOM2事件傳播機(jī)制？

• IE的事件冒泡：事件開(kāi)始時(shí)由最具體的元素接收，然后逐級(jí)向上傳播到較為不具體的元素
• DOM2級(jí)事件規(guī)定事件流包括三個(gè)階段，事件捕獲階段，處于目標(biāo)階段，事件冒泡階段，首先發(fā)生的是事件捕獲，為截取事件提供機(jī)會(huì)，然后是實(shí)際目標(biāo)接收事件，最后是冒泡階段
• Opera、Firefox、Chrome、Safari都支持DOM事件流，IE不支持事件流，只支持事件冒泡

9.如何阻止事件冒泡？ 如何阻止默認(rèn)事件？

• 阻止事件冒泡

  function stop(e){
        if(e.stopPropagation){
            e.stopPropagation()//其他瀏覽器
        }else{
            e.cancelBubble=true;//IE
        }
    }
  

• 阻止事件的默認(rèn)行為

  function preDafault(e){
        if(e.preventDefault){
            e.preventDefault();//其他瀏覽器，前提是cancelable值為true
        }else{
            e.returnValue=false;//IE
        }
    }
  

實(shí)例：
var handler=function (){
alert(this.id)
}
var preventDefault= function (e){
e.preventDefault()
}
var stopPropagation=function(e){
e.stopPropagation();
}
var outer=document.getElementById("outer");
var inner=document.getElementById("inner");
outer.addEventListener("click",handler);
inner.addEventListener("click",stopPropagation);
//#inner設(shè)置阻止事件冒泡，所以#outer不會(huì)alert"outer"
inner.addEventListener("click",preventDefault);
//#inner設(shè)置阻止默認(rèn)事件,所以a鏈接不會(huì)跳轉(zhuǎn)
inner.addEventListener("click",handler);
//alert "inner"

版權(quán)為饑人谷和作者所有，轉(zhuǎn)載須說(shuō)明來(lái)源