Dom 事件

最新推荐文章于 2024-09-21 09:29:16 发布

Mikolesteft

最新推荐文章于 2024-09-21 09:29:16 发布

阅读量59

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_52163042/article/details/111183564

版权

事件

事件：触发-响应机制

事件三要素

事件源: 触发事件的元素
事件名称: click 点击事件
事件处理程序: 事件触发后要执行的代码(函数形式)

事件的基本使用

var box = document.getElementById('box');
box.onclick = function() {
  console.log('代码会在box被点击后执行');  
};

innerHTML和innerText

var box = document.getElementById('box');
box.innerHTML = '我是文本<p>我会生成为标签</p>';
console.log(box.innerHTML);
box.innerText = '我是文本<p>我不会生成为标签</p>';
console.log(box.innerText);

innerHTML和innerText的区别

-innerHTML属性获取的是元素对象内包含html代码的内容，innerText属性只获得元素对象内的文本内容。

自定义属性操作

getAttribute() 获取标签行内属性
setAttribute() 设置标签行内属性
removeAttribute() 移除标签行内属性
与element.属性的区别: 上述三个方法用于获取任意的行内属性。

开关灯事件

<body>
    <input type="button" value="关灯" id="btn">
    <script>
        //获取触发事件元素
        var btn = document.getElementById('btn')
        btn.onclick = function () {
            // console.log(body)
            if (this.value === "关灯") {
                document.body.style.backgroundColor = '#000'
                this.value = '开灯'
            } else {
                document.body.style.backgroundColor = 'white'
                this.value = '关灯'
            }
        }
    </script>
</body>