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