正文
JavaScript----DOM和事件的简单学习
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
##DOM简单学习
* 功能：控制html文档的内容
* 代码：获取页面标签（元素）对象：Element
* document.getElementById("id值"):通过元素id获取元素对象
* 操作Elements对象：
1、修改属性值：
1、明确获取的对象是哪一个？
2、查看API文档，找其中有哪些属性可以设置。
2、修改标签内容：
* 属性：innerHTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取元素对象</title>
<script>
//通过id获取元素对象
window.onload = function() {
/*let light = document.getElementById("light");
alert("我要换图片了...");
light.src = "imgs/open.gif";*/
let title = document.getElementById("title");
alert("我要换内容了...")
title.innerHTML = "世界第一中国队";
}
</script>
</head>
<body>
<h1 id="title">悔创阿里杰克马</h1>
<img id="light" src="imgs/close.gif">
</body>
</html>
##事件简单学习
* 功能：某些组件被执行了某些操作后，出发某些代码的执行。
* 造句：xxx被xxx，我就xxx
* 我方水晶被摧毁后，我就责备队友。
* 敌方水晶被摧毁后，我就夸奖自己。
* 如何绑定事件
1、直接在html标签上，指定事件的属性（操作），属性值就是js代码。
1、事件：onclick：单击事件
2、通过JS获取元素对象，指定时间属性，设置一个函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
<script>
//1
function clickMe() {
alert("我被点了")
}
//2
var light2 = document.getElementById("light2");
light2.onclick = clickMe();
</script>
</head>
<body>
<img id="light" src="imgs/close.gif" onclick="clickMe();">
<img id="light2" src="imgs/close.gif">
</body>
</html>
* 案例：模拟电灯开关
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电灯开关</title>
<script>
window.onload = function () {
var light = document.getElementById("light");
var flag = false;//代表灯是灭的
light.onclick = function () {
if (flag) {
light.src = "imgs/close.gif";
flag = false;
} else {
light.src = "imgs/open.gif";
flag = true;
}
}
}
</script>
</head>
<body>
<img id="light" src="imgs/close.gif">
</body>
</html>
