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

例子

<div id="test">
   <span style="color:red">test1</span> test2
</div>

• test.innerHTML:
  　也就是從對象的起始位置到終止位置的全部內(nèi)容,包括Html標(biāo)簽。
  　上例中的test.innerHTML的值也就是“<span style="color:red">test1</span> test2”。

• test.innerText:
  　從起始位置到終止位置的內(nèi)容, 但它去除Html標(biāo)簽
  　上例中的test.innerText的值也就是“test1 test2”, 其中span標(biāo)簽去除了。

完整示例：

<div id="test">
   <span style="color:red">test1</span> test2
</div>

<a href="javascript:alert(test.innerHTML)">innerHTML內(nèi)容</a>
<a href="javascript:alert(test.innerText)">inerHTML內(nèi)容</a>

特別說明：innerHTML是符合W3C標(biāo)準(zhǔn)的屬性，而innerText只適用于IE瀏覽器（在谷歌下調(diào)試的所以innerText是沒問題的，不知道火狐），因此，盡可能地去使用innerHTML，而少用innerText。

補充：

• innerHTML 設(shè)置或獲取位于對象起始和結(jié)束標(biāo)簽內(nèi)的 HTML
  
• outerHTML 設(shè)置或獲取對象及其內(nèi)容的 HTML 形式
  
• innerText 設(shè)置或獲取位于對象起始和結(jié)束標(biāo)簽內(nèi)的文本
  
• outerText 設(shè)置(包括標(biāo)簽)或獲取(不包括標(biāo)簽)對象的文本
  
  

腳本之家－－innerHTML與innertext的區(qū)別

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

• childNodes 屬性

• children 屬性

children和childNodes - snandy - 博客園
DOM 之 children & childNodes - big軍 的個人空間

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

有7種常見方式查詢DOM：

1. getElementById()
2. getElementsByClassName()（除了 IE<9）
3. querySelector（除了 IE<8 和 IE8 兼容模式）
4. querySelectorAll()
5. getElementsByName()
6. getElementsByTagName()（不建議單獨使用，可與其它嵌套使用更安全）
7. elementFromPoint()

饑人谷課件
在DOM中搜索元素 - S.K.Park - 博客園

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

• createElement()用來生成HTML元素節(jié)點
  var newDiv = document.createElement("div");
  createElement()方法的參數(shù)為元素的標(biāo)簽名，即元素節(jié)點的tagName屬性。如果傳入大寫的標(biāo)簽名，會被轉(zhuǎn)為小寫。如果參數(shù)帶有尖括號（即<和>）或者是null，會報錯。

• createAttribute()方法生成一個新的屬性對象節(jié)點，并返回它。
  attribute = document.createAttribute(name);
  createAttribute方法的參數(shù)name，是屬性的名稱。

5. 元素的添加、刪除？

• 刪除元素使用removeChild()方法即可
  parentNode.removeChild(childNode);

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

• dom0級事件

DOM0即直接通過 onclick寫在html里面的事件，如:<input onclick="alert(1)" />

  <a href="#" id="hash" onclick="fn();fn1();">// 像這樣把onclick寫在標(biāo)簽內(nèi)，都是dom0級事件，
  // fn和fn1依次執(zhí)行;
  <button type="button">返回上面進(jìn)行開通</button>
  </a>
  ----------------------------------------------------------------------------------------
  var btn=$('#hash').get(0);
  btn.onclick=function(){// 獲取元素，綁定onclick事件也是dom0級
  alert('111');
  };
  btn.onclick=function(){
  alert('222');// 第二個會覆蓋第一個onclick，也會覆蓋行內(nèi)的onclick，只會彈出222
  };

• dom2級事件

DOM2是通過addEventListener綁定的事件, 還有IE下的DOM2事件通過attachEvent綁定

  $('#hash').click(function(){ 
  alert('jq的dom2級點擊第一次') 
  }); 
  $('#hash').click(function(){ 
  alert('jq的dom2級點擊第二次') 
  }); 
  btn.addEventListener('click',function(){ 
  alert('原生dom2級第一次click') 
  },false); 
  btn.addEventListener('click',function(){ 
  alert('原生dom2級第二次click') 
  },false)
  // 以上的綁定都屬于dom2級事件綁定，前面兩種都是jq的綁定方式，后面都是原生js的綁定方式，
  // 不會覆蓋，會依次執(zhí)行jq的綁定方法和原生的綁定方法，這就是與dom0級的區(qū)別處

DOM0的事件具有極好的跨瀏覽器優(yōu)勢, 會以最快的速度綁定, 如果你通過DOM2綁定要等到JS運行, DOM0不用, 因為DOM0是寫在元素上面的。

dom0級事件和dom2級事件
DOM0,DOM2,DOM3事件,事件基礎(chǔ)知識入門
JavaScript事件-DOM0級事件和DOM2級事件處理

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

代碼

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

   <ul class="ct"> 
      <li>這里是</li> 
      <li>饑人谷</li> 
      <li>前端6班</li>
   </ul>
   <script>
   //todo ...
   </script>

代碼

   <script>
     document.getElementById('ct1').onclick = function(e){
       console.log(this.innerText);     
     }
     document.getElementById('ct2').onclick = function(e){
       console.log(this.innerText);     
     }
     document.getElementById('ct3').onclick = function(e){
       console.log(this.innerText);     
     }
   </script>

2. 補全代碼，要求：

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>
//todo ...
</script>