JavaScript的基本语法已经了解了，直接看Dom的相关例子来学习对document的操作。 Dom的原生使用不是太多，一般情况下使用JQuery更加简单，不过Dom的基本方法还是需要了解一下的。

例1 请输入关键字栏目

知识点：

• javascript是默认的脚本语言，因此type='text/javascript可有可无；

• 这里绑定了2个事件，onfocus聚焦，onblur 脱离焦点，他们各自调用一个函数来实现对应的逻辑功能

• 获取标签的方式有两大类：1)直接获取，比如getElementById, getElementsByTagName, getElementsByClassName; 2) 间接获取，比如通过parentElement，children去搜索父亲节点，兄弟节点等等

• 文件内容的操作： 对于文件内容，我们可以通过innerText或者innterHTML去获取和赋值，他们的区别在于前者仅仅获取文本，后者是全部内容（比如A标签等等）

• 对于input的内容，我们可以通过value获取和赋值

• 这个例子针对的是旧版浏览器，如果是新版的浏览器，我们可以直接使用<input type='text' placeholder=''请输入关键字">

    
         
     
          
          
              
      
               function Focus(){            //console.log('Focus');            //获取标签，清空            var  tag = document.getElementById('i1');            if(tag.value == "请输入关键字"){                tag.value = "";            }        }        function Blur(){            //console.log('blur');            var  tag = document.getElementById('i1');            var val = tag.value;            if(val.trim().length == 0){                tag.value = "请输入关键字";            }        }    
      
     
    

效果如下 如果光标不在里面，就显示请输入关键字，否则变为空白

例2 模拟对话框

知识点：

1. shade层是在最下面，modal层是上面，因此后者的z-index数值比较大；

2. 居中表示的方法，top，left各50%之后再移动一半的尺寸；

3. tag.classlist可以对一个标签的class进行添加或者删除，因此中间那个窗口其实一直在，只不过隐藏起来而已；在dom中，我们可以通过className, classList.add, classList.remove来选择样式；也可以通过 obj.style.fontsize, obj.style.color这种方式来细微条件，还有可以通过getAttribute, setAttribute, removeAttribute来操作属性

4. windows.onkeydown触发一个按键的事件，他的值keycode可以在console.log里面进行查看

    
         
     
          
          
          
      
               
               
       
            
        
                 
         
          取消        
          
         
        
       
      
     
    

按住ESC按键触发的事件，通过console.log查看他所对应的keycode是27

运行效果，点击按钮居中打开一个新窗口，点击取消之后继续隐藏中间的窗口

例3 全选，取消和反选（Dom版本）

这里用dom实现这3个功能，比较冗余；稍后会有JQuery 的版本，比较精炼

    
         
     
          
          
      
               
       
hhh
        
           
           
           
       
                                            序号                用户名                密码                            
        
                                     
                         2                22                                        
                         2                22                                         
                         2                22                                        
                         2                22                                
         
        
       
      
     
    

例4：动态的创建标签

知识点：

创建标签有2个方式

第一种直接创建一个html字符串然后插入；第二种利用document.createElement来创建一个对象，然后通过对象的属性来赋值

例5， 把例2-例4整合一下

    
     
      
       
        
       
      
     
    
    
      chose IP Port 
     
      10.2.1.120
      
       10.2.1.220
       
        
         
          
           
            IP
            
           
          
           
            port
            
           
          
           
          
         
         
        
       
      
     
    

例7 点赞+1

• 基本思路，动态地创建一个+1的span标签，定时器每隔50毫秒改变他的位置，大小和透明度，当透明度小于0.2的时候，停止定时器；

• setinterval(func(),50)表示每隔50毫秒执行函数func，这里使用了匿名函数的方式， clearinterval（interval）表示取消interval定时器；类似的方法还有setTimeout ，他和setInterval的区别是他只执行一次

• appendchild(tag)添加一个标签；removechild（tag）移除一个标签

    
         
     
          
          
          
      
               
       
        赞1        
        
                 
         
          赞2        
          
                   
           
            赞3        
            
                     
             
              赞4        
              
             
            
           
          
         
        
       
      
     
    

例8. 删除信息5秒后自动消失

例9. 返回顶部

.back 定义一个固定在右下角的标签，当滚轮位置大于100的时候，不隐藏，否则隐藏；当点击这个标签的时候 滚轮位置置为0，即回到顶部

    
         
     
          
          
      
      
           
       
            
        
         返回顶部    
         
        
       
      
     
    

例7 提交form（submit事件）

form可以通过submit按钮来提交，也可以通过javascript手写一个，他的思路可以用在其他事件上，我们查找到这个标签对象，然后调用这个对象的方法，因此除了submit()，我们还可以使用onclick(),onmouseover()等等

    
         
     
          
          
      
               
               
               
       
        提交        
        
       
      
     
    

点击‘提交’的按钮或者a标签，效果是一样的

例8 弹出确认框，点击OK返回值是true；点击Cancel返回值是false

例9 提交数据不能为空判断

注意JavaScript的函数是在提交这个事件之前执行。这里存在一个事件链条的关系，只有前一个事件返回值为true，下一个事件才会自动进行。