JS中Dom與事件的示例分析

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

dom對象的innerText和innerHTML有什么區別？

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

elem.children和elem.childNodes的區別？

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

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

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

如何創建一個元素？如何給元素設置屬性？

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

元素的添加、刪除？

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

DOM0 事件和DOM2級在事件監聽使用方式上有什么區別？

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

attachEvent與addEventListener的區別？

1.addEventListener和attachEvent的兼容性問題
addEventListener是符合W3C規范的事件綁定方法，FireFox、Chrome、Safari都是用它來綁定事件。
attachEvent是IE私有的，不符合W3C規范，而且在IE下，只能使用它來綁定事件，addEventListener是無效的。
所以，要想綁定事件，必須處理兼容性問題。
2.addEventListener和attachEvent的語法規則
addEventListener共有3個參數：element.addEventListener(type,listener,useCapture)
attachEvent共有2個參數：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事件冒泡:事件發生在觸發元素上，從觸發元素開始，事件向父元素一級一級傳遞，直到html元素。
DOM2事件:事件傳播分3個階段，捕獲階段，處于事件目標階段，冒泡階段。事件監聽程序只能選擇在捕獲階段或者冒泡階段其中的一個階段執行。
捕獲階段:事件發生時，先從根節點開始傳遞，一級一級向下找，知道目標元素。
冒泡階段:從觸發元素開始，事件向父元素一級一級傳遞，直到html元素

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

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

問答

有如下代碼，要求當點擊每一個元素li時控制臺展示該元素的文本內容。不考慮兼容

 <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>元素前添加一個新元素，內容為用戶輸入的非空字符串；當點擊結尾添加時在<li>前端6班</li>后添加用戶輸入的非空字符串.
2.當點擊每一個元素li時控制臺展示該元素的文本內容。

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

代碼：

<ul class="ct">
<li>這里是</li>
<li>666</li>
<li>555</li>
</ul>
<input class="ipt-add-content" placeholder="添加內容"/>
<button id="btn-add-start">開頭添加</button>
<button id="btn-add-end">結尾添加</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里展示當前li元素的data-img對應的圖片。

 <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與事件的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!