問答

• dom對象的innerText和innerHTML有什么區(qū)別嘱腥？
  

  innerText只獲取元素內(nèi)的文本
  
  innerHTML獲取元素內(nèi)的HTML結(jié)構(gòu)

• elem.children和elem.childNodes的區(qū)別耕渴？
  

  childNodes 屬性，標(biāo)準(zhǔn)的齿兔，它返回指定元素的子元素集合橱脸，包括HTML節(jié)點，所有屬性分苇，文本添诉。
  
  children 屬性，非標(biāo)準(zhǔn)的组砚，它返回指定元素的子元素集合吻商。

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

  1. getElementById('str')：匹配指定ID屬性的元素節(jié)點,返回對象糟红，如果沒有發(fā)現(xiàn)匹配的節(jié)點艾帐，則返回null。
  2. getElementsByClassName('str')：通過匹配class屬性返回一個類數(shù)組的對象盆偿，包括了所有class名字符合指定條件的元素柒爸，元素的變化實時反映在返回結(jié)果中，可在任意元素調(diào)用事扭。
  3. getElementByTagName('str')：通過標(biāo)簽（tagname）返回一個類數(shù)組的對象捎稚，包括了所有符合制定條件的元素，可在任意元素調(diào)用
  4. getElementsByName('str')：通過元素的name屬性返回一個類數(shù)組的對象，包括了所有符合制定條件的元素今野，可在任意元素調(diào)用
  5. querySelector('str')：返回匹配指定的CSS選擇器的元素節(jié)點葡公。如果有多個節(jié)點滿足匹配條件，則返回第一個匹配的節(jié)點条霜。如果沒有發(fā)現(xiàn)匹配的節(jié)點催什，則返回null。
  6. querySelectorAll('str')：返回匹配指定的CSS選擇器的所有節(jié)點宰睡，返回的是NodeList類型的對象蒲凶，NodeList對象不是動態(tài)集合，所以元素節(jié)點的變化無法實時反映在返回結(jié)果中拆内。

• 如何創(chuàng)建一個元素旋圆？如何給元素設(shè)置屬性？
  

  document.createElement('標(biāo)簽')：標(biāo)簽麸恍，創(chuàng)建元素的標(biāo)簽類型 setAttribute('屬性'灵巧，'屬性值')：屬性，設(shè)置的屬性名或南。屬性值孩等，設(shè)置的屬性值

• 元素的添加、刪除采够？

  • 元素的添加
    
    appendChild('node')：node,必需的,您希望添加的節(jié)點對象肄方。
    
    insertBefore('node'，'Node object')：
    
    node,必需的,您希望添加的節(jié)點對象蹬癌。 Node object,可選权她，在其之前插入新節(jié)點的子節(jié)點。如果未規(guī)定逝薪，則 insertBefore 方法會在結(jié)尾插入 newnode隅要。

  • 元素的刪除
    
    removeChild('node')：node，必需董济。您希望刪除的節(jié)點對象

• DOM0 事件和DOM2級在事件監(jiān)聽使用方式上有什么區(qū)別步清？

  • DOM0就是直接通過onclick寫在html里面的事件,不允許給一個元素注冊多個函數(shù)，兼容性好

  • DOM2級事件是通過JavaScript中的addEventListener和removeEventListener綁定在元素上虏肾，有以下三個參數(shù)：

    1. 事件類型：click廓啊，mouseover，mouseenter等
    2. 事件處理方式：可用匿名函數(shù)和非匿名函數(shù)處理
    3. useCapture（是否冒泡）：在dom2中事件的冒泡是默認(rèn)false的封豪，可用布爾值修改

• attachEvent與addEventListener的區(qū)別谴轮？

  1. 適用瀏覽器不同：
     
     attachEvent適用于IE瀏覽器，使用的非W3C標(biāo)準(zhǔn)
     
     addEventListener適用于除IE瀏覽器外的主流瀏覽器吹埠，使用的W3C標(biāo)準(zhǔn)
  2. 針對的事件不同
     
     attachEvent針對的事件帶有on第步，addEventListener針對的事件不帶有on
  3. 參數(shù)的個數(shù)不同
     
     attachEvent方法具有倆個參數(shù)疮装，第一個為事件名稱，第二個為接收事件處理的函數(shù)粘都；addEventListener方法具有三個參數(shù)廓推，第一個表示事件名稱，第二個為接收事件處理的函數(shù)翩隧，第三個參數(shù)是一個布爾值受啥，默認(rèn)狀態(tài)下為false。
  4. 執(zhí)行事件的優(yōu)先級不同
     
     IE瀏覽器事件不支持捕獲階段鸽心，attachEvent因此無法在捕獲階段執(zhí)行 addEventListener可以通過更改布爾值來修改執(zhí)行階段
  5. this的不同
     
     attachEvent中this為window.this,addEventListener中this為當(dāng)前對象

• 解釋IE事件冒泡和DOM2事件傳播機制？
  

  IE事件事件開始時由最具體的元素接收居暖，然后逐級向上傳播到較為不具體的元素顽频，IE只含事件冒泡和事件處理，不支持事件捕獲
  
  DOM2事件傳播在根節(jié)點到事件發(fā)生的具體元素過程中提供了截取事件的機會太闺，然后則是冒泡機制糯景。

• 如何阻止事件冒泡？ 如何阻止默認(rèn)事件省骂？
  
  通過stopPropagation()方法可以阻止事件冒泡蟀淮；
  
  通過preventDefault()可以阻止默認(rèn)事件。

  代碼

• 有如下代碼钞澳，要求當(dāng)點擊每一個元素li時控制臺展示該元素的文本內(nèi)容怠惶。不考慮兼容

  <ul class="ct">
      <li>這里是</li>
      <li>饑人谷</li>
      <li>前端6班</li>
  </ul>
  <script>
      document.querySelector('.ct').addEventListener(
          'click',
          function(e) {
              if (e.target.tagName.toLowerCase() === 'li') {
                  console.log(e.target.innerText);
              }
          })
  </script>
  

• 補全代碼，要求：

  1. 當(dāng)點擊按鈕開頭添加時在<li>這里是</li>元素前添加一個新元素轧粟，內(nèi)容為用戶輸入的非空字符串策治；當(dāng)點擊結(jié)尾添加時在<li>前端6班</li>后添加用戶輸入的非空字符串.
  2. 當(dāng)點擊每一個元素li時控制臺展示該元素的文本內(nèi)容。

  <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>
      var ct = document.querySelector('.ct')
      var ipt = document.querySelector('.ipt-add-content');
      var start = document.querySelector('#btn-add-start');
      var end = document.querySelector('#btn-add-end');
      ct.addEventListener('click', function(e) {
          if (e.target.tagName.toLowerCase() === 'li') {
              console.log(e.target.innerText);
          }
      })
      start.addEventListener('click', function(e) {
          var li = document.createElement('li');
          li.innerText = ipt.value;
          ct.insertBefore(li, ct.firstChild);
      })
      end.addEventListener('click', function(e) {
          var li = document.createElement('li');
          li.innerText = ipt.value;
          ct.appendChild(li, ct.lastChild)
      });
  </script>
  

• 補全代碼兰吟，要求：當(dāng)鼠標(biāo)放置在li元素上通惫，會在img-preview里展示當(dāng)前l(fā)i元素的data-img對應(yīng)的圖片。

  <ul class="ct">
      <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg">鼠標(biāo)放置查看圖片1</li>
      <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg">鼠標(biāo)放置查看圖片2</li>
      <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg">鼠標(biāo)放置查看圖片3</li>
  </ul>
  <div class="img-preview"></div>
  <script>
      var ct = document.getElementsByClassName('ct')[0];
      var imgBox = document.querySelector('.img-preview');
      var img = document.createElement('img')
      ct.addEventListener('mouseenter', function(a) {
          var data = a.target.getAttribute('data-img')
          img.setAttribute('src', data)
          imgBox.appendChild(img)
      })
  </script>
  

• 代碼4

• 代碼5