JS的Dom與事件小結-html教學-PHP中文網

首頁

web前端

html教學

JS的Dom與事件小結

php中世界最好的语言

Mar 08, 2018 pm 03:08 PM

javascript事件

這次帶給大家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(&#39;li&#39;)
for(var i=0;i<item.length;i++){
item[i].addEventListener(&#39;click&#39;, function(){
console.log(this.innerText);
})
} */
//方法二
var item = document.getElementsByTagName(&#39;li&#39;)
for(var i=0;i<item.length;i++){
item[i].addEventListener(&#39;click&#39;, function(){
console.log(this.innerText);
})
}
</script>

補全程式碼，要求：

1.當點擊按鈕開頭新增時在這裡是< ;/li>元素前面新增一個新元素，內容為使用者輸入的非空字串；點擊結尾加入時在

前端6班

後面新增使用者輸入的非空字串.
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(&#39;.ct&#39;)var start = document.getElementById(&#39;btn-add-start&#39;);var end = document.getElementById(&#39;btn-add-end&#39;);var input = document.querySelector(".ipt-add-content");
     end.addEventListener(&#39;click&#39;,function(){            var list = document.createElement(&#39;li&#39;);        list.innerText = input.value        ct.appendChild(list);      })      start.addEventListener(&#39;click&#39;,function(){            var list = document.createElement(&#39;li&#39;);        list.innerText = input.value        ct.insertBefore(list,ct.firstChild);      })      ct.addEventListener(&#39;click&#39;, function(e){          if(e.target.tagName.toLowerCase() === &#39;li&#39;){           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="http://pic24.nipic.com/20121003/10754047_140022530392_2.jpg">鼠标放置查看图片2</li><li data-img="http://img2.3lian.com/img2007/4/22/303952037bk.jpg">鼠标放置查看图片3</li></ul><div class="img-preview"></div><script>var ct = document.querySelector(&#39;.ct&#39;)var list = document.getElementsByTagName(&#39;li&#39;)var preview = document.querySelector(&#39;.img-preview&#39;)for(var i=0;i<list.length;i++){list[i].addEventListener(&#39;mouseover&#39;,function(){if(document.querySelector(&#39;img&#39;)){preview.removeChild(document.querySelector(&#39;img&#39;))console.log(1)}var item = document.createElement(&#39;img&#39;)var img = this.getAttribute(&#39;data-img&#39;)preview.appendChild(item)item.src=img;
    })      }    </script>

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！