JS－－Dom 事件

1. dom对象的 innerText 和 innerHTML 有什么区别？

例子

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

• test.innerHTML:
  　也就是从对象的起始位置到终止位置的全部内容,包括Html标签。
  　上例中的test.innerHTML的值也就是“<span style="color:red">test1</span> test2”。

• test.innerText:
  　从起始位置到终止位置的内容, 但它去除Html标签
  　上例中的test.innerText的值也就是“test1 test2”, 其中span标签去除了。

完整示例：

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

<a href="javascript:alert(test.innerHTML)">innerHTML内容</a>
<a href="javascript:alert(test.innerText)">inerHTML内容</a>

特别说明：innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器（在谷歌下调试的所以innerText是没问题的，不知道火狐），因此，尽可能地去使用innerHTML，而少用innerText。

补充：

• innerHTML 设置或获取位于对象起始和结束标签内的 HTML
  
• outerHTML 设置或获取对象及其内容的 HTML 形式
  
• innerText 设置或获取位于对象起始和结束标签内的文本
  
• outerText 设置(包括标签)或获取(不包括标签)对象的文本
  
  

2. elem.children 和 elem.childNodes 的区别？

• childNodes 属性

• children 属性

3. 查询元素有几种常见的方法？

有7种常见方式查询DOM：

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

4. 如何创建一个元素？如何给元素设置属性？

• createElement()用来生成HTML元素节点
  var newDiv = document.createElement("div");
  createElement()方法的参数为元素的标签名，即元素节点的tagName属性。如果传入大写的标签名，会被转为小写。如果参数带有尖括号（即<和>）或者是null，会报错。

• createAttribute()方法生成一个新的属性对象节点，并返回它。
  attribute = document.createAttribute(name);
  createAttribute方法的参数name，是属性的名称。

5. 元素的添加、删除？

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

6. DOM0 事件和DOM2级在事件监听使用方式上有什么区别？

• dom0级事件

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

  <a href="#" id="hash" onclick="fn();fn1();">// 像这样把onclick写在标签内，都是dom0级事件，
  // fn和fn1依次执行;
  <button type="button">返回上面进行开通</button>
  </a>
  ----------------------------------------------------------------------------------------
  var btn=$('#hash').get(0);
  btn.onclick=function(){// 获取元素，绑定onclick事件也是dom0级
  alert('111');
  };
  btn.onclick=function(){
  alert('222');// 第二个会覆盖第一个onclick，也会覆盖行内的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的绑定方式，
  // 不会覆盖，会依次执行jq的绑定方法和原生的绑定方法，这就是与dom0级的区别处

DOM0的事件具有极好的跨浏览器优势, 会以最快的速度绑定, 如果你通过DOM2绑定要等到JS运行, DOM0不用, 因为DOM0是写在元素上面的。

7. attachEvent与addEventListener的区别？

代码

1. 有如下代码，要求当点击每一个元素 li 时控制台展示该元素的文本内容。不考虑兼容

   <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. 当点击按钮开头添加时在<li>这里是</li>元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在<li>前端6班</li>后添加用户输入的非空字符串。

2. 当点击每一个元素 li 时控制台展示该元素的文本内容。

<ul class="ct"> 
    <li>这里是</li> 
    <li>饥人谷</li> 
    <li>前端6班</li>
</ul><input class="ipt-add-content" placeholder="添加内容"/>
<button id="btn-add-start">开头添加</button>
<button id="btn-add-end">结尾添加</button>
<script>
//todo ...
</script>