DOM—DOM 事件基础知识点总结

<!-- (1)事件源：事件被触发的对象 谁  按钮 -->
   <button id="btn">唐伯虎</button>
   <script>
        // (2)事件类型：如何触发 什么时间 比如鼠标点击(onclick) 还是键盘按下
       var btn = document.getElementById('btn')
       //(3)事件处理程序 通过一个函数赋值的方式 完成
       btn.onclick = function(){
           alert('点秋香')
       }

结果展示：

二、事件的执行过程

1、获取事件源

2、注册事件(绑定事件)

3、添加事件处理程序(采取函数赋值形式)

代码展示：点击div 控制台输出我被选中了

<div>123</div>
    <script>
        // 执行事件步骤
        //1、获取事件源
        var div = document.querySelector('div')
        // 2、绑定事件 注册时间
        div.onclick
        // 3、添加时间处理程序
        div.onclick = function() {
            console.log('我被选中了');
        }
    </script>
<div class="lyr">

结果展示：

三、操作元素

JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素页面的内容、属性等。注意以下都是属性

1、改变元素内容

（1） element.innerText

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

（2） element.innerHTML

起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

2、innerText和innerHTML的区别

（1）innerText 不识别html标签(非标准) 去除空格和换行

（2）innerHTML 识别html标签(W3C标准) 保留空格和换行

四、修改元素的属性 —— src、title

代码展示：

<body>
    <button id="ldh">刘德华</button>
    <button id="zxy">张学友</button>
    <img src="../img/刘德华.jpg" alt="" title="刘德华">
    <script>
        // 1、获取元素
        var ldh = document.getElementById('ldh')
        var zxy = document.getElementById('zxy')
        var img = document.querySelector('img')
        //2.点击事件 处理程序
        zxy.onclick = function(){
            img.src = '../img/张学友.jpg';
            img.title = '张学友好帅'
        }
        ldh.onclick = function(){
            img.src = '../img/刘德华.jpg';
            img.title = '刘德华'
        }
    </script>
</body>

结果展示：

五、表单元素的属性操作 —— value

代码展示:

<body>
    <button>按钮</button>
    <input type="text" value="输入内容">
    <script>
        //1.获取元素
        var btn = document.querySelector('button')
        var input = document.querySelector('input')
        //2.注册时间    处理程序
        btn.onclick = function(){
            // 表单里面的值，是根据value来修改的
            input.value = '你点我干什么!!!'
            //如果想要某个表单被禁用 不再被点击 disabled 我们想要这个按钮被禁用 button
            // btn.disabled = true
            this.disabled = true 
            //this指的是事件函数的调用者
        }
    </script>
</body>

结果展示：

六、样式属性操作

1、通过style —— 行内样式操作

代码展示：

<style>
    div{
        width: 200px;
        height: 200px;
        background-color: pink;
    }

</style>
<body>
    <div ></div>
    <script>
        //1、获取事件
        var div = document.querySelector('div')
        //2、注册事件   处理程序
        div.onclick = function (){
            //div 里面的属性采取驼峰命名法
            this.style.backgroundColor = 'purple';
            this.style.width = '400px'
        }
    </script>
    </body>

结果展示：

2、通过element.className —— 类名操作样式

 <style>
    div{
        width: 100px;
        height: 100px;
        background-color: pink;
    }
    .change{
        background-color: purple;
        color: #fff;
        font-size: 25px;
        margin-top: 100px;
    }
</style>       
var test = document.querySelector('div');
    test.onclick = function() {
    //让我们当前的类名改成了 change
    // this.className = 'change';
    //如果想要保留原先的类名 我们可以这么做 (多类名选择器)
    this.className = 'first change';
}

结果展示:

注意：

1、如果样式修改较多，可以采取类名操作方式更改元素样式

2、class因为是个保留字，因此使用className来操作元素类名属性

3、className会直接更改元素的类名，会覆盖原先的类名

今天的内容就分享到这里啦，感谢各位看官的观看，有什么意见可以评论哟，都会一一回复的。

——须知少年凌云志，曾许人间第一流

DOM—DOM 事件基础知识点总结

一、事件的三要素

1、事件是什么

2、组成

二、事件的执行过程

1、获取事件源

2、注册事件(绑定事件)

3、添加事件处理程序(采取函数赋值形式)

三、操作元素

1、改变元素内容

2、innerText和innerHTML的区别

四、修改元素的属性 —— src、title

五、表单元素的属性操作 —— value

六、样式属性操作

1、通过style —— 行内样式操作

2、通过element.className —— 类名操作样式

猜你喜欢