JS中Dom與事件的示例分析

這篇文章主要介紹了JS中Dom與事件的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

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

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

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

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

查詢元素有幾種常見的方法？

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

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

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

元素的添加、刪除？

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

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

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

attachEvent與addEventListener的區(qū)別？

1.addEventListener和attachEvent的兼容性問題
addEventListener是符合W3C規(guī)范的事件綁定方法，F(xiàn)ireFox、Chrome、Safari都是用它來綁定事件。
attachEvent是IE私有的，不符合W3C規(guī)范，而且在IE下，只能使用它來綁定事件，addEventListener是無效的。
所以，要想綁定事件，必須處理兼容性問題。
2.addEventListener和attachEvent的語法規(guī)則
addEventListener共有3個參數(shù)：element.addEventListener(type,listener,useCapture)
attachEvent共有2個參數(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開頭，刪除on，如onclick->click
ele.addEventListener(event_name, fun, false);  //非IE瀏覽器
}
}

解釋IE事件冒泡和DOM2事件傳播機制？

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

如何阻止事件冒泡？ 如何阻止默認事件？

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

問答

有如下代碼，要求當點擊每一個元素li時控制臺展示該元素的文本內(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>

補全代碼，要求：

1.當點擊按鈕開頭添加時在<i>這里是</li>元素前添加一個新元素，內(nèi)容為用戶輸入的非空字符串；當點擊結(jié)尾添加時在<li>前端6班</li>后添加用戶輸入的非空字符串.
2.當點擊每一個元素li時控制臺展示該元素的文本內(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">開頭添加</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">開頭添加</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>

補全代碼，要求：當鼠標放置在li元素上，會在img-preview里展示當前l(fā)i元素的data-img對應(yīng)的圖片。

 <ul class="ct">
      <li data-img="1.png">鼠標放置查看圖片1</li>
      <li data-img="2.png">鼠標放置查看圖片2</li>
      <li data-img="3.png">鼠標放置查看圖片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">鼠標放置查看圖片1</li><li data-img="https://cache.yisu.com/upload/information/20200318/90/9730.jpg">鼠標放置查看圖片2</li><li data-img="https://cache.yisu.com/upload/information/20200318/90/9732.jpg">鼠標放置查看圖片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>

感謝你能夠認真閱讀完這篇文章，希望小編分享的“JS中Dom與事件的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學習!