DOM—事件基础操作元素（改变元素内容、修改元素属性、表单属性设置、样式属性操作）

最新推荐文章于 2022-08-27 11:02:41 发布

Just-Lsy

最新推荐文章于 2022-08-27 11:02:41 发布

阅读量740

点赞数

本文链接：https://blog.csdn.net/m0_59030524/article/details/122224053

版权

本文介绍了JavaScript中的DOM事件基础，包括事件三要素、执行事件的步骤和常见鼠标事件。接着详细讲解了如何操作DOM元素，如改变元素内容（innerText与innerHTML的区别）、修改元素属性、设置表单属性以及样式属性操作，包括行内样式和类名样式操作。文中还给出了具体的实例，如时间问候、显示隐藏内容等。

摘要由CSDN通过智能技术生成

1. 事件基础

1.1 事件三要素

事件源、事件类型、事件处理程序

<body>
    <button id='btn'>唐伯虎</button>
    <script>
        // 点击一个按钮，弹出对话框
        // 1. 事件三要素：事件源、事件类型、事件处理程序
        // （1）事件源：事件被触发的对象——按钮
        var btn = document.getElementById('btn');
        // （2）事件类型：如何触发 什么事件  比如鼠标点击（onclick）/鼠标经过/键盘按下
        // （3）事件处理程序：通过一个函数赋值的方式 完成
        btn.onclick = function () {
            alert('点秋香');
        }
    </script>
</body>

1.2 执行事件的步骤

获取事件源
注册事件（绑定事件）
添加事件处理程序（采取函数赋值形式）

<body>
    <div>123</div>
    <script>
        // 点击div，控制台输出 我被选中了
        // 1. 获取事件源
        var div = document.querySelector('div')
        // 2. 注册事件（绑定事件）
        // div.onclick
        // 3. 添加事件处理程序（采取函数赋值形式）
        div.onclick = function () {
            console.log('我被选中了');
        }
    </script>
</body>

1.3 常见的鼠标事件：

鼠标事件	触发事件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

2. 操作元素

2.1 改变元素内容

element.innerText

从起始位置到终止位置的内容，但它会去除html标签同时换行和空格也会去掉

<body>
    <button>显示当前系统时间</button>
    <div>某个时间</div>
    <p>某个时间</p>
    <script>
        // 当我们点击按钮，div里面的文字会发生变化
        // 1. 获取元素
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        // 2. 注册事件
        btn.onclick = function () {
            // div.innerText = '2021-12-12';
            div