这一篇是关于DOM的简单入门,后续会发BOM和DOM的详细笔记
*通过document.getElementById获取id从而获取元素对象
<!DOCTYPE html>
<html lang>
<head>
<meta charset="UTF-8">
</head>
<body>
<img id="light" src="img/off.gif">
<script>
//通过document.getElementById获取id从而获取元素对象
var light= document.getElementById("light");
alert("我要开灯啦!");//alert有阻塞效果
light.src="img/on.gif";//转换照片
</script>
</body>
</html>*通过DOM事件将照片进行替换?
事件的简单学习:
* 方法一:(但是有增强了耦合性)
<img id="light" src="img/off.gif" οnclick="on();" >
* 方法二:(通过id来绑定属性)
<img id="light1" src="img/off.gif" >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img id="light" src="img/off.gif" onclick="on();" >
<img id="light1" src="img/off.gif" >
<script>
function on(){
alert('我被点了');
}
function on1(){
alert('我又被点了');
}
var light11=document.getElementById("light1");
light11.onclick=on1;
</script>
</body>
</html>*做一个点击开关灯泡的小案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>灯泡开关</title>
</head>
<body>
<img id="light" src="img/off.gif">
<script>
var light=document.getElementById("light");
var flag=false;
light.onclick= function click(){
if(flag){
light.src="img/off.gif";
flag=false;
}else {
light.src="img/on.gif";
flag=true;
}
}
</script>
</body>
</html>?