js高级 DOM 事件简单介绍（一）

一、DOM简单学习：

功能：控制html文档的内容
1、获取页面标签(元素)对象：Element
document.getElementById("id值"):通过元素的id获取元素对象

2、操作Element对象：
修改属性值：
1）明确获取的对象是哪一个？
2）查看API文档，找其中有哪些属性可以设置
修改标签体内容：
属性：innerHTML
1）获取元素对象
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.src = "img/on.gif";

   //1.获取h1标签对象
    var title = document.getElementById("title");
    alert("我要换内容了。。。");
    //2.修改title内容
    title.innerHTML = "更换";
</script>
</body>
</html>

二、事件简单学习

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

如何绑定事件：

1）直接在html标签上，指定事件的属性(操作)，属性值就是js代码

事件：onclick--- 单击事件

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
</head>
<body>

<img id="light1" src="img/off.gif" onclick="alert('我被点了')">
//耦合度高
<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>
</html>
posted @ 2021-09-16 20:54  只要不兔的学习笔记  阅读(49)  评论(0)    收藏  举报