JS的Dom與事件小結(jié)

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

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

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

Node(節(jié)點(diǎn))是DOM層次結(jié)構(gòu)中的任何類型的對(duì)象的通用名稱，Node有很多類型，如元素節(jié)點(diǎn)，屬性節(jié)點(diǎn)，文本節(jié)點(diǎn)，注釋節(jié)點(diǎn)等。Element繼承了Node類，也就是說(shuō)Element是Node多種類型中的一種，即當(dāng)NodeType為1時(shí)Node即為ElementNode，另外Element擴(kuò)展了Node，Element擁有id、class、children等屬性。children是Element的屬性，childNodes是Node的屬性。

查詢?cè)�素有幾種常見(jiàn)的方法？

常見(jiàn)的獲取元素的方法有3種，分別是通過(guò)元素ID、通過(guò)標(biāo)簽名字和通過(guò)類名字來(lái)獲取。
1.getElementById
DOM提供了一個(gè)名為getElementById的方法，這個(gè)方法將返回一個(gè)與之對(duì)應(yīng)id屬性的節(jié)點(diǎn)對(duì)象。
2.getElementsByTagName
該方法返回一個(gè)對(duì)象數(shù)組（準(zhǔn)確的說(shuō)是HTMLCollection集合，它不是真正意義上的數(shù)組），每個(gè)對(duì)象分別對(duì)應(yīng)著文檔里有著給定標(biāo)簽的一個(gè)元素。類似于getElementById,同樣，該方法只提供一個(gè)參數(shù)，它的參數(shù)是指定標(biāo)簽的名字。
3.getElementsByClassName
除了通過(guò)指定標(biāo)簽獲取元素外，DOM還提供了getElementsByClassName方法來(lái)獲取指定class名的元素。

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

1.createElement(name)創(chuàng)建元素節(jié)點(diǎn)
createElement()是Document對(duì)象中的方法，該方法會(huì)根據(jù)指定的元素名稱name，返回一個(gè)Element對(duì)象。
2.設(shè)置創(chuàng)建元素節(jié)點(diǎn)的屬性
創(chuàng)建元素后，我們可能需要設(shè)置元素屬性，如：給元素設(shè)置CSS樣式、添加點(diǎn)擊事件等。設(shè)置元素屬性可以使用Element對(duì)象的setAttribute方法，也可以使用屬性名設(shè)置。
3.將元素節(jié)點(diǎn)插入到DOM文檔的指定位置
元素創(chuàng)建后，需要將元素節(jié)點(diǎn)插入到DOM文檔的指定位置，添加元素使用Element對(duì)象的appendChild()方法或insertBefore()方法。appendChild()
方法的作用是向元素添加新的子節(jié)點(diǎn)，被添加的子節(jié)點(diǎn)將作為其最后一個(gè)子節(jié)點(diǎn)。insertBefore()方法的作用是在已有的節(jié)點(diǎn)之前插入新節(jié)點(diǎn)，被添加的節(jié)點(diǎn)會(huì)做為同級(jí)節(jié)點(diǎn)。

元素的添加、刪除？

元素的添加：使用createElement來(lái)添加元素
元素的刪除：如需刪除 HTML 元素，您必須首先獲得該元素的父元素，然后用removeChild來(lái)刪除對(duì)應(yīng)元素。

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

DOM0事件：DOM0事件是指直接將事件綁定在節(jié)點(diǎn)上，一個(gè)節(jié)點(diǎn)只能綁定一個(gè)事件,不然后面的灰覆蓋前面的。
var oBtn = document.querySelctor('#btn');
oBtn.onclick=function(){
console.log('a')
};
DOM2事件：DOM2級(jí)事件可以對(duì)一個(gè)元素綁定多個(gè)事件，后面的事件不會(huì)覆蓋前面事件；可以通過(guò)參數(shù)true、false來(lái)設(shè)置事件在冒泡階段或者捕獲階段觸發(fā)事件。使用removeEventListener來(lái)刪除事件。
oBtn.addEventListener("click",function(){
});
oBtn.removeEventListener("click",fn,false);

attachEvent與addEventListener的區(qū)別？

1.addEventListener和attachEvent的兼容性問(wèn)題
addEventListener是符合W3C規(guī)范的事件綁定方法，F(xiàn)ireFox、Chrome、Safari都是用它來(lái)綁定事件。
attachEvent是IE私有的，不符合W3C規(guī)范，而且在IE下，只能使用它來(lái)綁定事件，addEventListener是無(wú)效的。
所以，要想綁定事件，必須處理兼容性問(wèn)題。
2.addEventListener和attachEvent的語(yǔ)法規(guī)則
addEventListener共有3個(gè)參數(shù)：element.addEventListener(type,listener,useCapture)
attachEvent共有2個(gè)參數(shù)：element.attachEvent(type,listener);
3.代碼兼容處理
function regEvent(ele, event_name, fun)
{
if (window.attachEvent)
ele.attachEvent(event_name, fun); //IE瀏覽器
else
{
event_name = event_name.replace(/^on/, “”); //如果on開(kāi)頭，刪除on，如onclick->click
ele.addEventListener(event_name, fun, false); //非IE瀏覽器
}
}

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

IE事件冒泡:事件發(fā)生在觸發(fā)元素上，從觸發(fā)元素開(kāi)始，事件向父元素一級(jí)一級(jí)傳遞，直到html元素。
DOM2事件:事件傳播分3個(gè)階段，捕獲階段，處于事件目標(biāo)階段，冒泡階段。事件監(jiān)聽(tīng)程序只能選擇在捕獲階段或者冒泡階段其中的一個(gè)階段執(zhí)行。
捕獲階段:事件發(fā)生時(shí)，先從根節(jié)點(diǎn)開(kāi)始傳遞，一級(jí)一級(jí)向下找，知道目標(biāo)元素。
冒泡階段:從觸發(fā)元素開(kāi)始，事件向父元素一級(jí)一級(jí)傳遞，直到html元素

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

阻止事件冒泡：w3c 的方法是 e.stopPropagation()，IE 則是使用 e.cancelBubble = true。
阻止默認(rèn)事件：w3c 的方法是 e.preventDefault()，IE 則是使用 e.returnValue = false。

問(wèn)答

有如下代碼，要求當(dāng)點(diǎn)擊每一個(gè)元素li時(shí)控制臺(tái)展示該元素的文本內(nèi)容。不考慮兼容

 <ul class="ct">
      <li>這里是</li>
      <li>饑人谷</li>
      <li>前端6班</li>
  </ul>
  <script>
  //todo ...
  </script>

代碼：

<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>前端6班</li>
</ul>
<script>
//方法一
/*var item = document.getElementsByClassName("ct")[0].getElementsByTagName('li')
for(var i=0;i<item.length;i++){
item[i].addEventListener('click', function(){
console.log(this.innerText);
})
} */
//方法二
var item = document.getElementsByTagName('li')
for(var i=0;i<item.length;i++){
item[i].addEventListener('click', function(){
console.log(this.innerText);
})
}
</script>

補(bǔ)全代碼，要求：

1.當(dāng)點(diǎn)擊按鈕開(kāi)頭添加時(shí)在<i>這里是</li>元素前添加一個(gè)新元素，內(nèi)容為用戶輸入的非空字符串；當(dāng)點(diǎn)擊結(jié)尾添加時(shí)在<li>前端6班</li>后添加用戶輸入的非空字符串.
2.當(dāng)點(diǎn)擊每一個(gè)元素li時(shí)控制臺(tái)展示該元素的文本內(nèi)容。

<ul class="ct">
<li>這里是</li>
<li>555</li>
<li>666</li>
</ul>
<input class="ipt-add-content" placeholder="添加內(nèi)容"/>
<button id="btn-add-start">開(kāi)頭添加</button>
<button id="btn-add-end">結(jié)尾添加</button>
<script>
//todo ...
</script>

代碼：

<ul class="ct">
<li>這里是</li>
<li>666</li>
<li>555</li>
</ul>
<input class="ipt-add-content" placeholder="添加內(nèi)容"/>
<button id="btn-add-start">開(kāi)頭添加</button>
<button id="btn-add-end">結(jié)尾添加</button>

<script>var ct = document.querySelector('.ct')var start = document.getElementById('btn-add-start');var end = document.getElementById('btn-add-end');var input = document.querySelector(".ipt-add-content");
     end.addEventListener('click',function(){            var list = document.createElement('li');        list.innerText = input.value        ct.appendChild(list);      })      start.addEventListener('click',function(){            var list = document.createElement('li');        list.innerText = input.value        ct.insertBefore(list,ct.firstChild);      })      ct.addEventListener('click', function(e){          if(e.target.tagName.toLowerCase() === 'li'){           console.log(e.target.innerText);          }      });     </script>

補(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>
  //todo ...
  </script>

代碼：

<ul class="ct"><li data-img="http://img5.imgtn.bdimg.com/it/u=3425851328,2681317699&fm=21&gp=0.jpg">鼠標(biāo)放置查看圖片1</li><li data-img="http://pic24.nipic.com/20121003/10754047_140022530392_2.jpg">鼠標(biāo)放置查看圖片2</li><li data-img="http://img2.3lian.com/img2007/4/22/303952037bk.jpg">鼠標(biāo)放置查看圖片3</li></ul><div class="img-preview"></div><script>var ct = document.querySelector('.ct')var list = document.getElementsByTagName('li')var preview = document.querySelector('.img-preview')for(var i=0;i<list.length;i++){list[i].addEventListener('mouseover',function(){if(document.querySelector('img')){preview.removeChild(document.querySelector('img'))console.log(1)}var item = document.createElement('img')var img = this.getAttribute('data-img')preview.appendChild(item)item.src=img;
    })      }    </script>

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)閱讀：

如何使用python來(lái)判斷圖片相似度

用來(lái)下載圖片的javascript腳本

以上就是JS的Dom與事件小結(jié)的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！