今天讲了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找到元素的方法,还有元素内容属性
原文:http://www.cnblogs.com/w-xibao/p/7676566.html