随笔- 446 文章- 0 评论- 0 阅读- 42534

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

DOM简单学习

控制：控制html文档的内容

代码：获取页面标签(元素)对象 Element

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

操作Element对象：

　　1.修改属性值：

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

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

　　2.修改标签体内容：

　　　　属性：innerHTML

如果不能使用可以试试在外部找到你项目文件位置右键使用IE打开

<img id="light" src="img/a2.jpg">
<h1 id="title">张三</h1>


<script>
    //通过id获取元素对象
    /*let light = document.getElementById("light");
    alert("更换图片!!!");
    light.src="img/a1.jpg";*/


    //1.获取h1标签对象
    let title = document.getElementById("title");
    alert("更换内容")
    title.innerHTML = "李四";

</script>

更换后

事件简单学习

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

如何绑定事件

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

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

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

<body>

<img id="light" src="img/a2.jpg" onclick="fun();">

<img id="light2" src="img/a2.jpg">

<script>
    function fun() {
        alert('我被点了');
    }

    function fun2() {
        alert('点我干啥!');
    }
    //1.获取light2对象
    var light2 = document.getElementById("light2");
    light2.onclick = fun2;

</script>
</body>