DOM沽瞭、事件

1. dom對(duì)象的innerTextinnerHTML有什么區(qū)別?
  • innerText用于獲取元素內(nèi)的文本內(nèi)容剩瓶;
  • innerHTML用于獲取元素內(nèi)的HTML結(jié)構(gòu)驹溃。
2. elem.childrenelem.childNodes的區(qū)別?
  • elem.children屬性返回一個(gè)動(dòng)態(tài)的HTMLCollection集合儒搭,由當(dāng)前節(jié)點(diǎn)所有的Element子節(jié)點(diǎn)組成吠架;
  • elem.childNodes屬性返回一個(gè)NodeList對(duì)象(類數(shù)組對(duì)象),包括但不限于Element節(jié)點(diǎn)搂鲫,還包括Text節(jié)點(diǎn)(換行傍药,空格)和
    注釋節(jié)點(diǎn)。
3. 查詢?cè)赜袔追N常見的方法魂仍?
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>task22</title>
    <style type="text/css">

    </style>
  </head>
  <body>
    <div id="div1" class="wrap">
      <a href="#" name="link1">jirengu</a>
    </div>
    <div id="div2" class="wrap">
      <a href="#" name="link2">hello <span>world</span></a>
    </div>

    <script type="text/javascript">
      var byId = document.getElementById('div1');                 // 1
      var byCls = document.getElementsByClassName('wrap');        // 2
      var byTgName = document.getElementByTagName('span');        // 3
      var byName = document.getElementByName('link1');            // 4
      var getEl = document.querySelector('#div1');                // 5
      var getEls = document.querySelectorAll('.wrap');            // 6

    </script>
  </body>
</html>
4. 如何創(chuàng)建一個(gè)元素拐辽?如何給元素設(shè)置屬性?
  • 可以通過createElement()方法創(chuàng)建新的HTML元素節(jié)點(diǎn)擦酌;通過setAttribute()方法設(shè)置元素屬性俱诸。
var newDiv = document.createElement('div');
newDiv.setArrribute('class','wrap');
5. 元素的添加登失、刪除烙无?
  • 使用appendChild方法在元素內(nèi)的最后位置添加新元素節(jié)點(diǎn)傻粘;通過removeChild方法刪除元素篡帕。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>task22</title>
    <style type="text/css">
      #purchases .sale {
        color:red;
      }
    </style>
  </head>
  <body>
    <h1>What to buy</h1>
    <p>Don't forget to buy this stuff.</p>
    <ul id="purchases">
      <li>A tin of beans</li>
      <li class="sale">Cheese</li>
      <li class="sale important">Milk</li>
    </ul>
    <script type="text/javascript">
      var newLi = document.createElement('li');             // 創(chuàng)建新的 li 元素節(jié)點(diǎn)
      var oldLi = document.querySelector('.important');     // 獲取需要?jiǎng)h除的元素節(jié)點(diǎn)
      var newContent = document.createTextNode('Apple')     // 創(chuàng)建新的內(nèi)容節(jié)點(diǎn)
      var ul = document.getElementById('purchases');        // 獲取需要添加位置的父元素節(jié)點(diǎn)
      ul.removeChild(oldLi);                                // 從父節(jié)點(diǎn)上刪除子節(jié)點(diǎn)
      newLi.appendChild(newContent);                        // 將內(nèi)容節(jié)點(diǎn)添加到新的 li 節(jié)點(diǎn)上
      newLi.setAttribute('class','sale');                   // 給新的 li 節(jié)點(diǎn)添加 class 屬性
      ul.appendChild(newLi);                                // 將 newLi 添加到 HTML 內(nèi)
    </script>
  </body>
</html>
Paste_Image.png
6. DOM0 事件和DOM2級(jí)在事件監(jiān)聽使用方式上有什么區(qū)別?
  • DOM0事件是將時(shí)間作為元素的一個(gè)屬性罢绽,當(dāng)需要對(duì)事件進(jìn)行監(jiān)聽時(shí)师逸,只要將需要執(zhí)行的函數(shù)賦值給這個(gè)屬性即可津滞,需要?jiǎng)h除該事件監(jiān)聽是只需將該屬性的值改為null即可寓调;該方法操作直觀簡(jiǎn)便锌唾,兼容性最好,但一個(gè)事件只能綁定一個(gè)函數(shù)。
  // HTML
  var btn = document.querySelector('#btn');
  // JS
  btn.onclick = function() {
    console.log('DOM0');
  }
  • DOM2級(jí)事件是使用元素的addEventListenerremoveEventListener方法對(duì)事件進(jìn)行監(jiān)聽晌涕,事件類型和處理函數(shù)做為上述方法的參數(shù)滋捶,其中addEventListener方法只能通過removeEventListener取消。該方法可以為一個(gè)事件綁定多個(gè)函數(shù)余黎。
  // HTML
  var btn = document.querySelector('#btn');
  // JS
  btn.addEventListener('click', function(){
    console.log('DOM2');
  })
7. attachEventaddEventListener的區(qū)別重窟?
  • addEventListener對(duì)IE8 及之前的版本不兼容,只能用attachEvent對(duì)事件進(jìn)行監(jiān)聽惧财,同時(shí)亲族,監(jiān)聽事件的取消也只能用detachEvent實(shí)現(xiàn)而不能使用removeEventListener
Paste_Image.png
  • attachEvent添加的事件處理程序只能發(fā)生在事件冒泡過程中可缚,而addEventListener的第三個(gè)參數(shù)可以決定事件處理程序是在捕獲階段還是在冒泡階段處理,一般瀏覽器默認(rèn)發(fā)生在冒泡階段(即第三個(gè)參數(shù)默認(rèn)為false)斋枢;
  • addEventListener方法第一個(gè)參數(shù)是事件類型(如click帘靡、load),而attachEvent的第一個(gè)參數(shù)是事件名稱(如onclick瓤帚、onload)描姚;
  • 二者事件處理程序的作用域不同。addEventListener事件的作用域是元素本身戈次,而attachEvent的事件處理程序會(huì)在全局作用域內(nèi)運(yùn)行轩勘;
  • 為一個(gè)事件添加多個(gè)事件處理程序時(shí),執(zhí)行順序不同怯邪。addEventListener會(huì)按照處理程序添加的順序執(zhí)行绊寻,而attachEvent執(zhí)行多個(gè)事件處理程序的順序沒有規(guī)律。
8. 解釋IE事件冒泡和DOM2事件傳播機(jī)制悬秉?
  • IE事件冒泡機(jī)制中事件最開始是由最具體的元素接收澄步,然后向其祖先元素進(jìn)行傳播,其祖先元素可以在此過程中接收事件并引發(fā)事件處理程序和泌;
  • DOM2事件傳播在根節(jié)點(diǎn)到事件發(fā)生的具體元素過程中提供了截取事件的機(jī)會(huì)村缸,然后則是冒泡機(jī)制。
9. 如何阻止事件冒泡武氓? 如何阻止默認(rèn)事件梯皿?
  • 通過stopPropagation()方法可以阻止事件冒泡;
  • 通過preventDefault()可以阻止默認(rèn)事件县恕。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>task22</title>
    <style type="text/css">
      .wrap {
        height:100px;
        width:100px;
        background-color:red;
        margin:50px;
      }
      .main {
        height:70px;
        width:70px;
        background-color:yellow;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <div class="main">
        <a class="link" >饑人谷</a>
      </div>
    </div>
    <script type="text/javascript">
      var wrap = document.querySelector('.wrap');
      var main = document.querySelector('.main');
      var link = document.querySelector('.link');
      wrap.addEventListener('click', function(){
        console.log('wrap');
      })
      main.addEventListener('click', function(){
        console.log('main');
      })
      link.addEventListener('click', function(e){
        e.preventDefault();
        console.log('link');
        e.stopPropagation();
      })
    </script>
  </body>
</html>

單擊鏈接东羹,實(shí)現(xiàn)如下效果:


Paste_Image.png

代碼題

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

實(shí)現(xiàn)效果

  <ul class="ct">
    <li>這里是</li>
    <li>饑人谷</li>
    <li>前端9班</li>
  </ul>
  <script>
    function $(str) {
      return document.querySelector(str);
    }
    function $$(str) {
      return document.querySelectorAll(str);
    }
    var ul = $('.ct');
    ul.addEventListener('click', function(e){
      console.log(e.target.innerText);
    })
  </script>
2. 補(bǔ)全代碼百姓,要求:
  • 當(dāng)點(diǎn)擊按鈕開頭添加時(shí)在<li>這里是</li>元素前添加一個(gè)新元素,內(nèi)容為用戶輸入的非空字符串况木;當(dāng)點(diǎn)擊結(jié)尾添加時(shí)在<li>前端6班</li>后添加用戶輸入的非空字符串.
  • 當(dāng)點(diǎn)擊每一個(gè)元素li時(shí)控制臺(tái)展示該元素的文本內(nèi)容垒拢。
    實(shí)現(xiàn)效果
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>task22-2</title>
  </head>
  <body>
    <ul class="ct">
        <li>這里是</li>
        <li>饑人谷</li>
        <li>前端6班</li>
    </ul>
    <input class="ipt-add-content" placeholder="添加內(nèi)容"/>
    <button id="btn-add-start">開頭添加</button>
    <button id="btn-add-end">結(jié)尾添加</button>
    <script>
      function $(str){
        return document.querySelector(str);
      }
      function $$(str){
        return document.querySelectorAll(str);
      }
      var ul = $('.ct');
      var ipt = $('.ipt-add-content');
      var btnAddStart = $('#btn-add-start');
      var btnAddEnd = $('#btn-add-end');
      // 當(dāng)文本框內(nèi)容發(fā)生改變時(shí)獲取文本框value值并添加至新建的li標(biāo)簽內(nèi)
      ipt.addEventListener('change', function(){
        newLi = document.createElement('li');
        newLi.innerText = ipt.value
      })
      // 定義兩個(gè)按鈕的單擊事件
      btnAddStart.addEventListener('click', function() {
        ul.insertBefore(newLi,ul.firstChild);
        ipt.value = '';
      })
      btnAddEnd.addEventListener('click', function() {
        ul.appendChild(newLi);
        ipt.value = '';
      })
      ul.addEventListener('click', function(e){
        if(e.target.tagName.toLowerCase() === 'li') {
          console.log(e.target.innerText);
        }
      })
    </script>
  </body>
</html>
3. 補(bǔ)全代碼旬迹,要求:當(dāng)鼠標(biāo)放置在li元素上,會(huì)在````img-preview里展示當(dāng)前li元素的data-img```對(duì)應(yīng)的圖片.

實(shí)現(xiàn)效果

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>task22-3</title>
  </head>
  <body>
    <ul class="ct">
        <li data-img="images/task22-3-1.jpg">鼠標(biāo)放置查看圖片1</li>
        <li data-img="images/task22-3-2.jpg">鼠標(biāo)放置查看圖片2</li>
        <li data-img="images/task22-3-3.jpg">鼠標(biāo)放置查看圖片3</li>
        <li data-img="images/task22-3-4.jpg">鼠標(biāo)放置查看圖片4</li>
    </ul>
    <div class="img-preview"></div>
    <script>
      var ul = document.querySelector('.ct');
      var div = document.querySelector('.img-preview');
      var newImg = document.createElement('img');
      ul.addEventListener('mouseover', function(e){
        if(e.target.tagName.toLowerCase() === 'li'){
          var src = e.target.getAttribute('data-img');
          newImg.src = src;
          div.appendChild(newImg);
        }
      })
    </script>
  </body>
</html>
4. 實(shí)現(xiàn)如下圖Tab切換的功能

圖片地址
實(shí)現(xiàn)效果
代碼:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>task22-4</title>
    <style type="text/css">
      #tab {
        border-collapse: collapse;    /* 合并邊框 */
        width: 500px;
        border: 1px solid #888;
        border-spacing: 0;
      }
      #tab td {
        border: 1px solid #888;
        padding: 0;
      }
      .tabs td {
        text-align: center;
        line-height: 30px;
        cursor: pointer;
      }
      .tabs .active {
        background-color: #ccc;
      }
      #tab .main {
        height: 100px;
      }
      #tab .main td li {
        list-style: none;
        padding: 10px;
        display: none;
      }
      #tab .main .active {
        display: block;
      }
    </style>
  </head>
  <body>
    <table id="tab">
      <tr class="tabs">
        <td>tab1</td>
        <td>tab2</td>
        <td>tab3</td>
      </tr>
      <tr class="main">
        <td colspan="3">
          <ul>
            <li class="active">內(nèi)容一</li>
            <li>內(nèi)容二</li>
            <li>內(nèi)容三</li>
          </ul>
        </td>
      </tr>
    </table>
    <script type="text/javascript">
      var tabs = $('.tabs')
      var tabArr = $$('.tabs>td');
      var mainArr = $$('.main li');
      tabs.addEventListener('click', function(e){             // 在tabs上加時(shí)間監(jiān)聽
        var clickNode = e.target;
        if (clickNode.tagName.toLowerCase() === 'td') {       // tabs的點(diǎn)擊效果
          for (var i=0; i<tabArr.length; i++){
            tabArr[i].classList.remove('active');
          }
          clickNode.classList.add('active');
        }
        var index = [].indexOf.call(tabArr,clickNode);        // 利用index將tabs和mainList聯(lián)系起來
        for (var i=0; i<mainArr.length; i++){
          mainArr[i].classList.remove('active');
        }
        mainArr[index].classList.add('active');
      })

      function $(str) {
        return document.querySelector(str);
      }
      function $$(str) {
        return document.querySelectorAll(str);
      }
    </script>
  </body>
</html>
5. 實(shí)現(xiàn)下圖的模態(tài)框功能

圖片地址
實(shí)現(xiàn)效果
代碼:

  • HTML
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>task22-5</title>
    <link rel="stylesheet" href="task22-5.css">
  </head>
  <body>
    <div class="btn-wrap">
      <button type="button" id="btn-boss">點(diǎn)我</button>
    </div>
    <div class="modal">
      <div class="dialog-box">
        <div class="header">
          <h1>我是標(biāo)題</h1>
          <a class="close icon-close" href="#"></a>
        </div>
        <div class="contents">
          <p>我是內(nèi)容1</p>
          <p>我是內(nèi)容2</p>
        </div>
        <div class="footer">
          <a class="btn confirm" href="#">確定</a>
          <a class="btn cancel" href="#">取消</a>
        </div>
      </div>

    </div>
    <script type="text/javascript" src="task22-5.js"></script>
  </body>
</html>
  • CSS
div,p,h1,h2,h3,h4,h5,h6,a,button{
  margin: 0;
  padding: 0;
  font-size: 16px
}
@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1471481907'); /* IE9*/
  src: url('iconfont.eot?t=1471481907#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('iconfont.woff?t=1471481907') format('woff'), /* chrome, firefox */
  url('iconfont.ttf?t=1471481907') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg?t=1471481907#iconfont') format('svg'); /* iOS 4.1- */
}
.icon-close {
  font-family:"iconfont" ;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
.icon-close:before { content: "\e62d"; }
a {
  text-decoration: none;
  color: #333;
}
.modal {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0,0,0,0.3)
}
.dialog-box {
  width: 400px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
.dialog-box .header {
  border-bottom: 1px solid #aaa;
}
.dialog-box .header h1 {
  line-height: 40px;
  display: inline-block;
  margin-left: 15px;
}
.dialog-box .header .close {
  display: table-cell;
  float: right;
  line-height: 40px;
  margin-right: 15px;
}
.dialog-box .contents {
  padding:15px;
  border-bottom: 1px solid #ccc;
}
.dialog-box .contents p {
  line-height: 30px;
}
.dialog-box .footer .btn {
  line-height: 40px;
  float: right;
  margin-right: 15px;
}
  • JS
function $(str) {
    return document.querySelector(str);
}
function $$(str) {
    return document.querySelectorAll(str);
}
var btnBoss = $('#btn-boss');
var modal = $('.modal');
var dialogBox = $('.dialog-box');
function hasClass(ele, cls) {
    var reg = new RegExp('\\b' + cls + '\\b','ig');
    return reg.test(ele.className)
}
btnBoss.addEventListener('click', function(){
    modal.style.display = 'block';
})
dialogBox.addEventListener('click', function(e){
    e.stopPropagation();
    if (hasClass(e.target, 'close') || hasClass(e.target, 'cancel')) {
        modal.style.display = 'none';
    }
})
modal.addEventListener('click', function(e){
    modal.style.display = 'none';
})

本教程版權(quán)歸本人和饑人谷所有求类,轉(zhuǎn)載請(qǐng)注明來源奔垦。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市尸疆,隨后出現(xiàn)的幾起案子椿猎,更是在濱河造成了極大的恐慌,老刑警劉巖寿弱,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件犯眠,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡症革,警方通過查閱死者的電腦和手機(jī)筐咧,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來噪矛,“玉大人量蕊,你說我怎么就攤上這事⊥Оぃ” “怎么了残炮?”我有些...
    開封第一講書人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)缩滨。 經(jīng)常有香客問我势就,道長(zhǎng),這世上最難降的妖魔是什么脉漏? 我笑而不...
    開封第一講書人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任蛋勺,我火速辦了婚禮,結(jié)果婚禮上鸠删,老公的妹妹穿的比我還像新娘抱完。我一直安慰自己,他們只是感情好刃泡,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開白布巧娱。 她就那樣靜靜地躺著,像睡著了一般烘贴。 火紅的嫁衣襯著肌膚如雪禁添。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,713評(píng)論 1 312
  • 那天桨踪,我揣著相機(jī)與錄音老翘,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛铺峭,可吹牛的內(nèi)容都是我干的墓怀。 我是一名探鬼主播,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼卫键,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼傀履!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起莉炉,我...
    開封第一講書人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤钓账,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后絮宁,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體梆暮,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年绍昂,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了惕蹄。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡治专,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出遭顶,到底是詐尸還是另有隱情张峰,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布棒旗,位于F島的核電站喘批,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏铣揉。R本人自食惡果不足惜饶深,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望逛拱。 院中可真熱鬧敌厘,春花似錦、人聲如沸朽合。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽曹步。三九已至宪彩,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間讲婚,已是汗流浹背尿孔。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人活合。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓雏婶,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親芜辕。 傳聞我的和親對(duì)象是個(gè)殘疾皇子尚骄,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容