java web-2.7DOM和事件的简单学习

DOM简单学习

功能：控制html文档内容
代码：获取页面标签（元素）对象 Element

document.getElementById("id值")：通过元素id获得元素对象

操作Element对象：

<img  id= "light"src ="img/1.gif">

<h1 id="title ">哈哈哈哈哈</h1>

1. 修改属性值：
   明确获取的对象是哪一个；查看API文档找到其中有哪些属性可以设置

  //通过id获取元素对象
        var light = document.getElementById("light");
        alert("我要换图片");
        light.src = "img/1.jpg";

2. 修改标签体内容
   属性：innerHTML

//1.获取h1标签对象
        var title = document.getElementById("title");
        alert("我要换内容");
        title.innerHTML ="呵呵呵呵";

事件简单学习

功能：某些组件被执行某些操作后，触发某些代码的执行
如何绑定事件：
1.直接在html标签上，指定事件的属性，属性值就是js代码
事件：onclick
缺点：耦合度高 ，不利于维护

2.通过js获取元素对象，指定时间属性，设置一个函数

  <img  id= "light2"src ="img/6.png">
   <script>
        function fun2() {
            alert("点击");
        }
        //获取light2对象
        var light2 = document.getElementById("light2");
        light2.onclick = fun2();
    </script>

案例 电灯开关

需求：点击亮起来，再点击灭