10.13DOM中document--文档1找到元素的方法,还有元素内容属性

   今天讲了js的组成部分中的第二组成部分(DOM),DOM包括以下内容:

                                                    window    -- 窗口
                                                   location -- 地址栏
                                                   history  -- 历史记录
                                                   document  --文档
                                                   statue      -- 任务栏

                           其中着重讲了document--文档
                                            1. 找到元素方法: 
                                                                  getElementById();       (“id名”)   得到一个
                                                                  getElementsByName();        (“name名”)是数组
                                                                  getElementsByClassName();            (“class名”)是数组
                                                                  getElementsByTagName();                   (标签名比如,div)是数组
                                           2.元素的属性             1)非表单元素内容属性:  innerHTML
                                                                             2)表单元素内容属性:     value

练习题

1  点击提示修改本身的值吗  弹窗接受输入的值  修改本元素内容

function three(){
         var  a=confirm("修改本身的值吗"),
              b=prompt("输入的值");
         document.getElementById("bb").innerHTML=b
        
        
    }
<button id="aa" onClick="three()">修改本身的值吗</button>

3个按钮  接受3个值  分别给他们赋值  for

function four(obj){
		  
		for(var i=0;i<3;i++){
			//obj.innerHTML=prompt("请输入一个值")
			document.getElementsByName("aaa")[i].innerHTML=prompt("请输入一个数")
	                                  }
                        }
<button name="aaa" onClick="four(this)">点我</button> 

<button name="aaa" onClick="four(this)">快点</button> 
<button name="aaa" onClick="four(this)">小不点</button>

 3图片轮播

 var a=1;
	function five(type){
	     
	
		document.getElementById("divimg").innerHTML='<img src="img/'+a+'.jpg">'
		
		if(type=='shang'){
			a--;
			if(a==0){
				a=5
			}
}
			else{
				a++;
				if(a==5){
					a=1
				}
			}
	
		}
	
		
	function one(val){

		document.getElementById("divimg").innerHTML = '<img src="img/'+val+'.jpg">'

	}
		}
<div id="divimg"><img src="img/1.jpg"></div>

<button onClick="five('shang')">上一张</button>
<a onClick="one(1)" href="#">1</a>
<a  onClick="one(2)" href="#">2</a>
<a  onClick="one(3)" href="#">3</a>
<a  onClick="one(4)" href="#">4</a>
<a onClick="one(5)" href="#">5</a>
<button onClick="five('xia')">下一张</button>

 

posted @ 2017-10-16 22:01  计算机语言  阅读(255)  评论(0编辑  收藏  举报