DOM、事件

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

• innerText用于获取元素内的文本内容；
• innerHTML用于获取元素内的HTML结构。

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

• elem.children属性返回一个动态的HTMLCollection集合，由当前节点所有的Element子节点组成；
• elem.childNodes属性返回一个NodeList对象（类数组对象），包括但不限于Element节点，还包括Text节点（换行，空格）和
  注释节点。

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

  
    
    
    
  
  
    

      jirengu
    
    

      hello world
    

    
  

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

• 可以通过createElement()方法创建新的HTML元素节点；通过setAttribute()方法设置元素属性。

var newDiv = document.createElement('div');
newDiv.setArrribute('class','wrap');

5. 元素的添加、删除？

• 使用appendChild方法在元素内的最后位置添加新元素节点；通过removeChild方法删除元素。

  
    
    
    
  
  
    
What to buy
    
Don't forget to buy this stuff.
    

      
A tin of beans
      
Cheese
      
Milk
    
    
  

Paste_Image.png

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

• DOM0事件是将时间作为元素的一个属性，当需要对事件进行监听时，只要将需要执行的函数赋值给这个属性即可，需要删除该事件监听是只需将该属性的值改为null即可；该方法操作直观简便，兼容性最好，但一个事件只能绑定一个函数。

  // HTML
  var btn = document.querySelector('#btn');
  // JS
  btn.onclick = function() {
    console.log('DOM0');
  }

• DOM2级事件是使用元素的addEventListener和removeEventListener方法对事件进行监听，事件类型和处理函数做为上述方法的参数，其中addEventListener方法只能通过removeEventListener取消。该方法可以为一个事件绑定多个函数。

  // HTML
  var btn = document.querySelector('#btn');
  // JS
  btn.addEventListener('click', function(){
    console.log('DOM2');
  })

7. attachEvent与addEventListener的区别？

• addEventListener对IE8 及之前的版本不兼容，只能用attachEvent对事件进行监听，同时，监听事件的取消也只能用detachEvent实现而不能使用removeEventListener。

Paste_Image.png

• attachEvent添加的事件处理程序只能发生在事件冒泡过程中，而addEventListener的第三个参数可以决定事件处理程序是在捕获阶段还是在冒泡阶段处理，一般浏览器默认发生在冒泡阶段（即第三个参数默认为false）；
• addEventListener方法第一个参数是事件类型（如click、load），而attachEvent的第一个参数是事件名称（如onclick、onload）；
• 二者事件处理程序的作用域不同。addEventListener事件的作用域是元素本身，而attachEvent的事件处理程序会在全局作用域内运行；
• 为一个事件添加多个事件处理程序时，执行顺序不同。addEventListener会按照处理程序添加的顺序执行，而attachEvent执行多个事件处理程序的顺序没有规律。

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

• IE事件冒泡机制中事件最开始是由最具体的元素接收，然后向其祖先元素进行传播，其祖先元素可以在此过程中接收事件并引发事件处理程序；
• DOM2事件传播在根节点到事件发生的具体元素过程中提供了截取事件的机会，然后则是冒泡机制。

9. 如何阻止事件冒泡？ 如何阻止默认事件？

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

  
    
    
    
  
  
    

      

        饥人谷
      
    
    
  

单击链接，实现如下效果：

Paste_Image.png

代码题

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

实现效果

  

    
这里是
    
饥人谷
    
前端9班
  
  

2. 补全代码，要求：

• 当点击按钮开头添加时在
• 这里是
元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在
• 前端6班
后添加用户输入的非空字符串.
• 当点击每一个元素li时控制台展示该元素的文本内容。
  实现效果

  
    
    
  
  
    

        
这里是
        
饥人谷
        
前端6班
    
    
    开头添加
    结尾添加
    
  

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

实现效果

  
    
    
  
  
    

        
鼠标放置查看图片1
        
鼠标放置查看图片2
        
鼠标放置查看图片3
        
鼠标放置查看图片4
    
    

    
  

4. 实现如下图Tab切换的功能

图片地址
实现效果
代码：

  
    
    
    
  
  
    

      

        
tab1
        
tab2
        
tab3
      
      

        

          

            
内容一
            
内容二
            
内容三
          
        
      
    
    
  

5. 实现下图的模态框功能

图片地址
实现效果
代码：

• HTML

  
    
    
    
  
  
    

      点我
    
    

      

        

          
我是标题
          
        
        

          
我是内容1
          
我是内容2
        
        

          确定
          取消
        
      

    
    
  

• CSS

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

• JS

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

---

本教程版权归本人和饥人谷所有，转载请注明来源。