DOM简单学习以及事件简单学习

DOM简单学习

功能：控制HTML文档的内容

代码：获取页面标签（元素）对象   Element

 　　　　document.getElementById(“id值”);  通过元素id获取元素对象

操作Element对象：

　　1、修改属性值

　　　　1、明确获取的对象是哪一个

　　　　2、查看API文档，找其中有哪些属性可以设置

　　2、修改标签体内容

 　　　　属性：innerHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <img id="light" src="img/off.gif">
    <h1 id="title">张三</h1>
    <script>
        /*//通过id获取元素对象
        var light = document.getElementById("light");
        alert(light);
        light.src = "img/on.gif";*/

        //获取h1标签对象
        var title = document.getElementById("title");
        alert("1")
        //修改内容
        title.innerHTML = "李四";
    </script>
</body>
</html>

 

 

 

 

 

 

事件简单学习

功能：某些组件被执行了某些操作后，触发某些代码的执行

如何绑定事件：

　　1、直接在html标签上，指定事件的属性，属性值就是js代码

　　　　1、事件：onclick -- 单击事件

    <img id="light" src="img/off.gif" onclick="fun()">
    <script>
        function fun() {
            alert("点击1");
            alert("点击2");
        }
    </script>

　　2、通过js获取元素对象，指定事件属性，设置一个函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <img id="light" src="img/off.gif" onclick="fun()">
    <img id="light2" src="img/off.gif">
    <script>

        //获取light2对象
        var light2 = document.getElementById("light2");
        //绑定时间
        light2.onclick = fun();

        function fun() {
            alert("点击1");
            alert("点击2");
        }
    </script>
</body>
</html>

 

posted @ 2022-08-03 11:43  xjw12345  阅读(31)  评论(0)    收藏  举报