##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>