黑马程序员技术交流社区

标题: 【成都校区】学习交流 [打印本页]

作者: MoonWarrior 时间: 2018-12-13 12:41
标题: 【成都校区】学习交流
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>

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2