JavaScript----DOM和事件的简单学习

时间:2021-03-08 15:14:58

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