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