JavaScript-DOM事件简单学习

DOM简单学习

  1. 功能：控制html文档的内容
  2. 代码：获取页面标签(元素)对象 Element
    • document.getElementById(“id值”);通过元素的id值来获取元素对象
  3. 操作Element对象：
    1. 设置其属性值：
      1. 明确获取的对象是哪一个
      2. 查看API文档，找其中有哪些属性可以设置
    2. 修改标签体内容：
      • 属性：innerHTML
        1. 获取元素对象
        2. 使用innerHTML属性修改标签体内容

事件简单学习

  • 功能：某些组件被执行了某些操作后，触发了某些代码的执行。
  • 如何绑定事件
    1. 直接在html标签上，指定事件的属性(操作)，属性值就是js代码
      1. 事件：onclick–单击事件
    2. 通过js获取元素对象，指定事件属性，设置一个函数

CODE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点灯开关</title>
</head>
<body>
<img id="tu" src="../image/lvugkl.png" width="500">

<script> /** * 分析： * 1. 获取图片对象 * 2. 绑定单击事件 * 3. 每次单击切换图片 * 规则： * 如果灯是开的 on，切换图片为off * 如果灯是关的 off，切换图片为on * 使用一个标记flag来完成 */ var f=false; //1. 获取对象 var obj = document.getElementById("tu"); //2. 绑定单击事件 obj.onclick=function () {
      if (f){
      obj.src="../image/lvugkl.png";f=false; }else {
      obj.src = "../image/lvugkl.jpg"; f = true; } }; </script>

</body>
</html>