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

Posted 2020-10-11 将心比心

   今天讲了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>

2 

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>