码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-10-16 23:16:58      阅读:192      评论:0      收藏:0      [点我收藏+]

标签:color   stat   方法   html   历史记录   个数   var   单元   element   

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

 

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

标签:color   stat   方法   html   历史记录   个数   var   单元   element   

原文地址:http://www.cnblogs.com/w-xibao/p/7676566.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!