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>
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找到元素的方法,還有元素內容屬性