##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 获取元素对象
- Windows.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>
- Windows.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>
来源: http://www.bubuko.com/infodetail-3424452.html