• 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>
    
  • 相关阅读:
    CocoStudio基础教程(4)骨骼动画的动态换肤
    CocoStudio基础教程(3)在程序中处理cocoStudio导出动画
    CocoStudio基础教程(2)关联程序逻辑与cocoStudio导出文件
    CocoStudio基础教程(1)创建UI并载入到程序中
    LeetCode:盛最多水的容器【11】
    LeetCode:反转字符串中的元音字母【345】
    LeetCode:验证回文串【125】
    LeetCode:颜色分类【75】
    LeetCode:删除排序数组中的重复项||【80】
    LeetCode:移动零【283】
  • 原文地址:https://www.cnblogs.com/w-xibao/p/7676566.html
Copyright © 2020-2023  润新知