## DOM简单学习：为了满足案例要求
* 功能：控制html文档的内容 增删改查的操作 注意是控制html的内容
* 获取页面标签(元素)对象：Element
* document.getElementById("id值"): 方法解释：通过元素的id获取元素对象
注意这里是字符串格式的id值
注意代码段中script的位置 在body内部 因为要先加载img对象才能获取 所以script写在src标签的下面了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取元素对象</title>
</head>
<body>
<img id="light" src="img/logo.jpg">
<script>
//通过id来获取元素对象,相当于返回了一个对象
var light = document.getElementById("light");//获取
alert(light);
</script>
</body>
</html>
* 操作Element对象：
1. 修改属性值： 比如是html的img标签只能找img标签有的属性比如src才能修改操作 比如img标签中没有 type属性 设置就是没有意义的
使用getelementbyid获取对象 然后直接点src等属性就可以直接更换
1. 明确获取的对象是哪一个？
2. 查看API文档，找其中有哪些属性可以设置
2. 修改标签体内容：
* 属性：innerHTML
1. 获取元素对象
2. 使用innerHTML属性修改标签体内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取元素对象</title>
</head>
<body>
<img id="light" src="img/off.gif">
<h1 id="title">会场阿历节课吗</h1>
<script>
/*
1. 修改属性值：
1. 明确获取的对象是哪一个？
2. 查看API文档，找其中有哪些属性可以设置
2. 修改标签体内容：
* 属性：innerHTML :内部html
1. 获取元素对象
2. 使用innerHTML属性修改标签体内容
*/
//修改属性值
//通过id来获取元素对象,相当于返回了一个对象
var light = document.getElementById("light");//获取
alert("换图片了"); //弹出有阻塞效果必须点了才能执行下面的代码
light.src="img/on.gif";// 这里是修改属性值的步骤 这里的src是一个属性
//修改标签体的内容
var title = document.getElementById("title");
title.innerHTML="tt";
</script>
</body>
</html> 
这里可以实现点击弹出来的换图片实现亮灯操作
注意代码中：第一步是修改了属性值 酒啊后必说image这个标签有很多属性 文件路径是其中一个属性 我们可以先用getelementid 获取元素对象 再light.src="" 来修改属性值
第二个是修改标签体内容 也是先get获取 再title.innerHTML=”";来修改标签体内容
## 事件简单学习
什么是事件（事件的功能）： 某些组件被执行了某些操作后，触发某些代码的执行。比如onclick单击事件
* 造句： xxx被xxx,我就xxx
* 我方水晶被摧毁后（组件被执行某操作），我就责备对友。（触发了代码）
* 敌方水晶被摧毁后，我就夸奖自己。
* 如何绑定事件 两种方法
1. 直接在html标签上，指定事件的属性(操作)，属性值就是js代码 就是说οnclick=后面引号的内容是js代码。 注意js html css不是一个对象
1. 事件：onclick--- 单击事件
方式1
<img id="light" src="img/off.gif" οnclick="alert('tt');"> 注意这个alert括号里的单引号和οnclick=的双引号和img标签的尖括号
点击这个图片弹出tt
方式2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件的绑定操作</title>
<script>
function fun1() {
alert("我被点了");
alert("我又被点了")
}
</script>
</head>
<body>
<img id="light" src="img/off.gif" onclick="fun1();">
<script>
/*
* 如何绑定事件两种方法
1. 直接在html标签上，指定事件的属性(操作)，属性值就是js代码
1. 事件：onclick--- 单击事件
2. 通过js获取元素对象，指定事件属性，设置一个函数
*/
</script>
</body>
</html>注意这个方式1 不利于维护 第二种方式比较容易维护
方式3. 通过js获取元素对象，指定事件属性，设置一个函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="img/off.gif" id="light">
<script>
var light = document.getElementById("light");
light.onclick=fun2;
function fun2(){
alert("我被点了");
}
</script>
</body>
</html>注意这个script的位置 要用getElementById获取 就必须等着img加载出来才行
方式2就可以script写在前面 因为方式2是方法调用 （加载出来才能方法调用）
2353
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
