首頁 > web前端 > html教學 > JS的Dom與事件小結

JS的Dom與事件小結

php中世界最好的语言
發布: 2018-03-08 15:08:24
原創
1623 人瀏覽過

這次帶給大家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中文網其它相關文章!

    相關閱讀:

    如何使用python來判斷圖片相似度

    用來下載圖片的javascript腳本

    以上是JS的Dom與事件小結的詳細內容。更多資訊請關注PHP中文網其他相關文章!

    相關標籤:
    來源:php.cn
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板