1. 程式人生 > >10.13DOM中document--文檔1找到元素的方法,還有元素內容屬性

10.13DOM中document--文檔1找到元素的方法,還有元素內容屬性

歷史 con prompt true 窗口 for 標簽 html fun

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

10.13DOM中document--文檔1找到元素的方法,還有元素內容屬性