问答

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

  innerText只获取元素内的文本
  
  innerHTML获取元素内的HTML结构

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

  childNodes 属性，标准的，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本。
  
  children 属性，非标准的，它返回指定元素的子元素集合。

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

  1. getElementById('str')：匹配指定ID属性的元素节点,返回对象，如果没有发现匹配的节点，则返回null。
  2. getElementsByClassName('str')：通过匹配class属性返回一个类数组的对象，包括了所有class名字符合指定条件的元素，元素的变化实时反映在返回结果中，可在任意元素调用。
  3. getElementByTagName('str')：通过标签（tagname）返回一个类数组的对象，包括了所有符合制定条件的元素，可在任意元素调用
  4. getElementsByName('str')：通过元素的name属性返回一个类数组的对象，包括了所有符合制定条件的元素，可在任意元素调用
  5. querySelector('str')：返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。
  6. querySelectorAll('str')：返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象，NodeList对象不是动态集合，所以元素节点的变化无法实时反映在返回结果中。

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

  document.createElement('标签')：标签，创建元素的标签类型 setAttribute('属性'，'属性值')：属性，设置的属性名。属性值，设置的属性值

• 元素的添加、删除？

  • 元素的添加
    
    appendChild('node')：node,必需的,您希望添加的节点对象。
    
    insertBefore('node'，'Node object')：
    
    node,必需的,您希望添加的节点对象。 Node object,可选，在其之前插入新节点的子节点。如果未规定，则 insertBefore 方法会在结尾插入 newnode。

  • 元素的删除
    
    removeChild('node')：node，必需。您希望删除的节点对象

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

  • DOM0就是直接通过onclick写在html里面的事件,不允许给一个元素注册多个函数，兼容性好

  • DOM2级事件是通过JavaScript中的addEventListener和removeEventListener绑定在元素上，有以下三个参数：

    1. 事件类型：click，mouseover，mouseenter等
    2. 事件处理方式：可用匿名函数和非匿名函数处理
    3. useCapture（是否冒泡）：在dom2中事件的冒泡是默认false的，可用布尔值修改

• attachEvent与addEventListener的区别？

  1. 适用浏览器不同：
     
     attachEvent适用于IE浏览器，使用的非W3C标准
     
     addEventListener适用于除IE浏览器外的主流浏览器，使用的W3C标准
  2. 针对的事件不同
     
     attachEvent针对的事件带有on，addEventListener针对的事件不带有on
  3. 参数的个数不同
     
     attachEvent方法具有俩个参数，第一个为事件名称，第二个为接收事件处理的函数；addEventListener方法具有三个参数，第一个表示事件名称，第二个为接收事件处理的函数，第三个参数是一个布尔值，默认状态下为false。
  4. 执行事件的优先级不同
     
     IE浏览器事件不支持捕获阶段，attachEvent因此无法在捕获阶段执行 addEventListener可以通过更改布尔值来修改执行阶段
  5. this的不同
     
     attachEvent中this为window.this,addEventListener中this为当前对象

• 解释IE事件冒泡和DOM2事件传播机制？
  

  IE事件事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素，IE只含事件冒泡和事件处理，不支持事件捕获
  
  DOM2事件传播在根节点到事件发生的具体元素过程中提供了截取事件的机会，然后则是冒泡机制。

• 如何阻止事件冒泡？ 如何阻止默认事件？
  
  通过stopPropagation()方法可以阻止事件冒泡；
  
  通过preventDefault()可以阻止默认事件。

  代码

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

  <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. 当点击按钮开头添加时在<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>
      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>
  

• 补全代码，要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。

  <ul class="ct">
      <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg">鼠标放置查看图片1</li>
      <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg">鼠标放置查看图片2</li>
      <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg">鼠标放置查看图片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