Dom 、事件

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

• innerText只提取文本（替换文本），innerHTML会提取内部所有的标签和文本（替换标签）

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

• elem.children获取文本节点以外的标签（不包含文本仅标签），elem.childNodes获取所有的子节点

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

• 通过id查找：document.getElementById();
  得到对应id的元素
• 通过类名查找：document.getElementsByClassName();
  得到包含此类的所有元素的数组
• 通过标签名查找：docunment.getElementsByTagName();
  得到该标签的数组
• 通过新方法查找：document.querySeletor();
  得到匹配到的第一个元素
• 通过新方法查找：document.querySeletorAll();
  得到所有匹配元素的数组

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

• document.createElement(); 创建元素
• document.createTextNode(); 创建一个新的文本节点
• Node.appendChild(child); 方法将一个节点添加到指定父节点的子节点列表末尾
• element.setAttribute(name, value); name设置属性，value设置对应的值

  
    
    
  
  
    点我
    
  

5.元素的添加、删除

• el.appendChild(name); 将子元素（节点）放在父元素的尾部
• el.insertBefore(name, brother); 方法在参考节点之前插入一个节点作为一个指定父节点的子节点(将元素放在兄弟元素前面)
• el.removeChild(name); 移除元素

  
    
    
  
  
    
1
    
3
    
2
    
  

总结：
1. el 获取到了3个p，用insertBefore时，要传具体是哪个p
2. 剩下的全是拼写错误

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

• DOM0事件和DOM2级事件都是通过给元素节点注册特定的事件处理程序（即事件监听器）来对事件进行处理
• DOM0事件只能给事件注册一种处理方式，DOM2事件可以注册多个处理方式
• DOM2事件可以选择在捕获阶段还是冒泡阶段进行监听器触发，DOM0视浏览器设置而定
• IE9之前不支持DOM2即事件，而DOM0则跨浏览器且无兼容问题

  
  
  
  


  Click Me
  

7. attachEvent与addEventListener的区别？

• attachEvent：是IE的事件监听器，类似DOM2级事件，但是从IE11后不在支持。
  接受两个参数：第一个是事件类型，格式为'on + type'；第二个为事件处理的程序（function），默认为冒泡事件
• addEventListener：是W3C标准的事件监听器，IE9之前不支持。
  接受三个参数：第一个为事件类型，格式为'type'，例如'click'；第二个为事件处理程序（function）；第三个参数默认为flase，即冒泡事件，设置为true为捕获阶段事件

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

• 事件冒泡简单的说就是，在冒泡路径上所有绑定了相同事件类型的元素上都会触发这些类型的事件。
• IE的事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素(从内到外)
• Netscape的事件捕获：不太具体的节点更早接受事件，而最具体的元素最后接受事件，和事件冒泡相反(从外到内)
• DOM事件流：DOM2级事件规定事件流包括三个阶段。首先发生的是事件捕获，为截取事件提供机会；然后是实际目标接收事件；最后是冒泡阶段
• DOM2事件传播机制属于DOM事件流，并且DOM2事件的事件处理程序支持第三个参数设置具体传播机制，即捕获或冒泡

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

• 阻止事件冒泡：
  DOM2级：event.stopPropagation();
  IE中：event.cancelBubble = true;
• 阻止默认事件：
  DOM2级：event.preventDefault(); 例如a链接跳转
  IE中：event.returnValue = false;

代码：

给元素绑定事件

    
    
    
    


    
    

        
列表1
        
列表2
        
列表3
    
    

补全代码，要求：当点击按钮开头添加时在

列表1

元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在

列表3

后添加用户输入的非空字符串；当点击每一个元素li元素时控制台展示该元素的文本内容。

    
    
    
    
    


    

        
列表1
        
列表2
        
列表3
    
    
    开头添加
    结尾添加
    

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

    
    
    
    


    

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

Tab切换功能

    
    
    
    
    


    

        

            
tab1
            
tab2
            
tab3
        
        
内容1
        
内容2
        
内容3
    
    

模态框

    
    
    
    
    


    

        Click
    

    

        


        

            

                
标题
                x
            
            

                
内容
                
内容
            
            

                确定
                取消