DOM简单学习和事件简单学习

DOM简单学习：

DOM简单学习:为了满足案例要求

功能∶控制html文档的内容

代码:获取页面标签(元秦)对象Element

document.getElementById("id值"):通过元素的id获取元素对象

操作Element对象︰

1．修改属性值:

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

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

2．修改标签体内容︰

属性:innerHTML

代码实现：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>DOM简单学习</title>
    <!--内部JS-->
</head>
<body>

    <img id="light" src="../img/kejidongtai.gif">
    <h1 id="title">悔创阿里杰克马</h1>

<script>

    // //通过id获取元素对象
    // let light = document.getElementById("light");
    // alert("我要图片。。。");
    // light.src = "../img/kejifengdongtai.gif";

    //1.获取h1标签对象
    let title = document.getElementById("title");
    alert("我要换内容了。。。");
    //2.修改内容
    title.innerHTML = "不识抬举";

</script>
</body>
</html>

事件简单学习：

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

造句:xxx被xxx,我就xxx

我方水晶被摧毁后，我就责备对友。

敌方水晶被摧毁后，我就夸奖自己。

如何绑定事件：

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

1.事件: onclick---单击事件

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

代码实现：

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

<img id="light" src="../img/kejidongtai.gif" onclick="fun()">

<img id="light2" src="../img/kejifengdongtai.gif">

<script>

    function fun() {
        alert('我被点了');
        alert('我又被点了');
    }

    function fun2() {
        alert('咋老点我？');
    }

    //1.获取light2对象
    let light2 = document.getElementById("light2");
    //2.绑定事件
    light2.onclick = fun2;

</script>
</body>
</html>