一、DOM简介

        文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。

可以将每个HTML标签都做为一个对象，JavaScript通过调用DOM中的属性、方法就可以对网页中的文本框、层等元素进行编程控制。

选择器：

• document.getElementById('id')

• document.getElementsByName('name')

• document.getElementsByTagName('tagname')

实例演示一、修改单个标签中的文本内容。

    
     
hello aaaaaa
     
      var name1 = document.getElementById('n1');
      name1.innerText = 'tuchao';
     
    

实例演示二、通过标签name修改多个标签的内容

    
     
hello aaaaaa
     
     
       
      
heheheheeeeeee
      
      
        
       
bbabababbabab
       
        var name2 = document.getElementsByName('n2');
        name2[0].innerText = 'tuchao';name2[1].innerText = 'tuchao';
       
      
     
    

页面效果：

实例演示三、通过标签tag修改多个标签的内容

    
     
hello aaaaaa
     
     
       
      
heheheheeeeeee
      
      
        
       
bbabababbabab
       
        var name3 = document.getElementsByTagName('div');
        for (var item in name3){    name3[item].innerText = 'elephant'	}
       
      
     
    

页面效果：

常用函数：

• 创建标签

       document.createElement('a')

• 获取或者修改样式

        obj.className

• 获取或设置属性

        setattribute(key,val)    getattribute(key)

• 获取或修改样式中的属性

        obj.style.属性

• 提交表单

        document.geElementById('form_id').submit()

实例演示四、在标签中加入内容

    
     
hello aaaaaa
     
      var tag = document.createElement("a");
      tag.href = ' 
      tag.innerText = '点希望';var id1 = document.getElementById('n1');
      id1.appendChild(tag);
     
    

页面效果：

实例演示五、标签替换

    
     
hello aaaaaa
     
      var tag = "
      
       百度一下"var id1 = document.getElementById('n1');
       id1.innerHTML = tag;
      
     
    

页面效果会显示原id="n1"的div标签消失了，替换成了自定义的超链接标签。

实例演示六、修改标签的Class

    
         
     
          
          
      
           	.hide {display: none;}    	.n22 {color:red;}        
       
         
        
heheheheeeeeee
    
        
    
        
          
         
bbabababbabab
         
          var id2 = document.getElementsByName('n2');
          id2[0].className = 'hide'      
         
        
       
      
     
    

此时第一个div在页面中将不会显示了

实例演示七、修改标签的name值

    
      
     
      var id3 = document.getElementById('n3');
      console.log(id3.getAttribute('name'));
      id3.setAttribute('name','cow');console.log(id3.getAttribute('name'));
     
    

页面效果：

实例演示八、修改标签样式

    
      
     
      var id3 = document.getElementById('n3');
      var w = id3.style.width;console.log(w);
      id3.style.width = '200px'
     
    

页面效果：修改前

页面效果：修改后

常用事件：

实例演示九、创建按钮点击事件

    
         
         
       
       	
     
     
      function Foo (){	document.getElementById('F1').submit()}
     
    

常用方法：

• 定义一个函数每隔一定的时间自动执行一次，括号中左边写执行的函数名逗号分割，右边写间隔的时长单位为毫秒。

        setInterval('Foo()',20)

• 用于停止setInterval的循环执行，这个函数括号中接受的参数为setInterval函数返回的值。

        clearInterval(interval)

• 定义一个函数间隔一定的时间自动执行，与setInterval函数不同的是这个方法只让函数执行一次。

        setTimeout('Go()',10000)

• 用于取消setTimeout函数的执行，函数接受的参数是setTimeout函数返回的值。

        clearTimeout()

搜索框实例

    
         
     
          
          
      
           .gray{color: gray;    	height: 30px;    	width: 220px;   }   .black{   	color: black;   	height: 30px;	width: 220px;   }     
        
       
         	function Enter(){ 		var id = document.getElementById('tip'); 		id.className = 'black' 		if(id.value=='请输入关键词' || id.value.trim()==''){ 			id.value = '' 		} 	} 	function Leave(){ 		var id = document.getElementById('tip'); 		if(id.value=='请输入关键词' || id.value.trim()==''){ 			 			id.value='请输入关键词' 			id.className='gray' 		}else{ 			id.className='black' 		} 	}  
       
      
     
    

跑马灯实例

    
         
     
          
          
      
           
       
            function Go(){    
        	var content = document.title;	
        	var firstChar = content.charAt(0)	
        	var sub = content.substring(1,content.length)	document.title = sub + firstChar;}setInterval('Go()',1000);
       
      
     
    

进度条实例

    
         
     
          
          
      
           	
       		
        		
         
 
           
         
         
          pro = 10function Foo(){ var id = document.getElementById('jindu'); pro = pro + 1; if(pro > 100){ clearInterval(interval) }else{ id.style.width = pro+'%'; }}interval = setInterval('Foo()',20)
          function Stop(){ clearInterval(interval)}