DOM沽瞭、事件

1. dom對(duì)象的`innerText`和`innerHTML`有什么區(qū)別？

innerText用于獲取元素內(nèi)的文本內(nèi)容剩瓶；
innerHTML用于獲取元素內(nèi)的HTML結(jié)構(gòu)驹溃。

2. `elem.children`和`elem.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í)事件是使用元素的addEventListener和removeEventListener方法對(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. `attachEvent`與`addEventListener`的區(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>

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;
}

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)注明來源奔垦。

最后編輯于：2017.12.04 01:20:59

?著作權(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
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼卫键，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼傀履！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起莉炉，我...
開封第一講書人閱讀 40,116評(píng)論 0贊 277
萬榮殺人案實(shí)錄
序言：老撾萬榮一對(duì)情侶失蹤钓账，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后絮宁，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體梆暮，經(jīng)...
沈念sama閱讀 46,651評(píng)論 1贊 320
?護(hù)林員之死
正文獨(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
?日本核電站爆炸內(nèi)幕
正文年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

DOM颅悉、事件

DOM沽瞭、事件

1. dom對(duì)象的`innerText`和`innerHTML`有什么區(qū)別？

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

3. 查詢?cè)赜袔追N常見的方法魂仍？

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

5. 元素的添加登失、刪除烙无？

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

7. `attachEvent`與`addEventListener`的區(qū)別重窟？

8. 解釋IE事件冒泡和DOM2事件傳播機(jī)制悬秉？

9. 如何阻止事件冒泡武氓？如何阻止默認(rèn)事件梯皿？

代碼題

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

2. 補(bǔ)全代碼百姓，要求：

3. 補(bǔ)全代碼旬迹，要求：當(dāng)鼠標(biāo)放置在`li`元素上，會(huì)在````img-preview`里展示當(dāng)前`li`元素的`data-img```對(duì)應(yīng)的圖片.

4. 實(shí)現(xiàn)如下圖Tab切換的功能

5. 實(shí)現(xiàn)下圖的模態(tài)框功能

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

DOM沽瞭、事件

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

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

3. 查詢?cè)赜袔追N常見的方法魂仍？

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

5. 元素的添加登失、刪除烙无？

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

7. attachEvent與addEventListener的區(qū)別重窟？

8. 解釋IE事件冒泡和DOM2事件傳播機(jī)制悬秉？

9. 如何阻止事件冒泡武氓？ 如何阻止默認(rèn)事件梯皿？

代碼題

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

2. 補(bǔ)全代碼百姓，要求：

3. 補(bǔ)全代碼旬迹，要求：當(dāng)鼠標(biāo)放置在li元素上，會(huì)在````img-preview里展示當(dāng)前li元素的data-img```對(duì)應(yīng)的圖片.

4. 實(shí)現(xiàn)如下圖Tab切換的功能

5. 實(shí)現(xiàn)下圖的模態(tài)框功能

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

1. dom對(duì)象的`innerText`和`innerHTML`有什么區(qū)別？

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

7. `attachEvent`與`addEventListener`的區(qū)別重窟？

9. 如何阻止事件冒泡武氓？如何阻止默認(rèn)事件梯皿？

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

3. 補(bǔ)全代碼旬迹，要求：當(dāng)鼠標(biāo)放置在`li`元素上，會(huì)在````img-preview`里展示當(dāng)前`li`元素的`data-img```對(duì)應(yīng)的圖片.