DOM简单学习:
功能:控制html文档的内容
获取页面标签(元素)对象:Element
document.getElementById("id值"):通过元素的id获取元素对象
操作Element对象:
1. 修改属性值:
1. 明确获取的对象是哪一个,如<img> <a> <p> <button> 这些都是对象
2. 查看API文档,找其中有哪些属性可以设置
2. 修改标签体内容:
属性:innerHTML
1. 获取元素对象
2. 使用innerHTML属性修改标签体内容
事件简单学习
功能: 某些组件被执行了某些操作后,触发某些代码的执行。
如何绑定事件
1. 直接在html标签上,指定事件的属性(操作),属性值就是js代码
事件:onclick单击事件,ondblclick双击事件
<img id = "light2" src = "imag/off.gif" οnclick="fun1()" οndblclick="fun2()"><br>
2. 通过js获取元素对象,指定事件属性,设置一个函数
var light3 = document.getElementById("light3");
light3.onclick = fun3;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>09电灯开关小案例</title>
</head>
<body>
<!-- 更改标签属性和更改标签体内容练习 -->
<img id = "light1" src = "imag/off.gif">
<p id = "adc">点击我,用innerHTML属性更换我的标签体的内容</p>
<!-- 第一种方式绑定事件
在标签体中添加onclick单击事件
在标签体中添加ondblclick双击事件
-->
<img id = "light2" src = "imag/off.gif" onclick="fun1()" ondblclick="fun2()"><br>
<p>请点击上面的图片,点击开灯,双击关灯</p>
<!-- 第二种方式绑定事件
不在HTML标签中写事件,用js获取到标签对象
然后设置获取到对象的事件
-->
<img id = "light3" src = "imag/off.gif">
<p>请点击上面的图片,点击开灯,再点击关灯</p>
<script>
// //获取标签的属性值
// var light = document.getElementById("light1");
// alert("变换图片");
// //通过更改标签的属性值来更换标签
// light.src = "imag/on.gif"
// //获取标签的属性值
// var adc = document.getElementById("adc");
// alert("确定更改标签体的内容吗?");
// //使用innerHTML修改标签体内容
// adc.innerHTML = "我是已经被改变的标签内容"
//事件的绑定
//第一种绑定方式
//直接在HTML标签中添加属性,onclick
//点击事件函数
function fun1(){
var light = document.getElementById("light2");
light.src = "imag/on.gif"
}
//双击事件函数
function fun2(){
var light = document.getElementById("light2");
light.src = "imag/off.gif"
}
//事件的绑定
//第二种绑定方式
//通过js获取元素对象,指定事件属性,设置函数
var light3 = document.getElementById("light3");
//设置标记
var flag = false;
//绑定事件
light3.onclick = fun3;//注意函数调用方式。没有括号!!!
//事件实现函数
function fun3(){
if(flag){
light3.src = "imag/on.gif";
flag = false;
}else{
light3.src = "imag/off.gif";
flag = true;
}
}
/*
上面的函数还可以直接匿名创建
light3.onclick = function(){
if(flag){
light3.src = "imag/on.gif";
flag = false;
}else{
light3.src = "imag/off.gif";
flag = true;
}
}
*/
</script>
</body>
</html>
运行结果: