DOM简单学习：为了满足案例要求
* 功能：控制html文档的内容
* 获取页面标签(元素)对象：Element
* document.getElementById("id值"):通过元素的id获取元素对象
* 操作Element对象：
1. 修改属性值：
1. 明确获取的对象是哪一个？
按顺序加载，需要先获取图片路径，才能对属性进行修改
*<img id="取名字" src="图片路径">
*var "取名字"=document.getElementById("id名")
*light.src="img/图片路径"
2. 查看API文档，找其中有哪些属性可以设置
2. 修改标签体内容：
* 属性：innerHTML
1. 获取元素对象
2. 使用innerHTML属性修改标签体内容
如何绑定事件
1. 直接在html标签上，指定事件的属性(操作)，属性值就是js代码
1. 事件：onclick--- 单击事件
<img id="name" src="img/图片路径" onclick="alter(弹出内容)">绑定对象
2. 通过js获取元素对象，指定事件属性，设置一个函数
* 代码：
<body>
<img id="light" src="img/off.gif" onclick="fun();">
<img id="light2" src="img/off.gif">
<script>
function fun(){
alert('我被点了');
alert('我又被点了');
}
function fun2(){
alert('咋老点我？');
}
//1.获取light2对象
var light2 = document.getElementById("light2");
//2.绑定事件
light2.onclick = fun2;
</script>
</body> |
|
收藏
淘帖
踩
