dom -操作元素-CSDN博客

本文链接：https://blog.csdn.net/weixin_46082115/article/details/129043724

文章介绍了如何使用JavaScript进行DOM操作，包括获取和设置元素属性，如修改<img>标签的src和title属性。还讲述了对表单元素的操作，如禁用按钮或改变输入框内容。此外，详细说明了两种修改元素样式的途径：通过style属性直接设置和通过className切换CSS类。

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

概述

JavaScript的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。（注意：这些操作都是通过元素对象的属性实现的）

1.1常用元素属性操作

获取属性的值

元素对象.属性名

设置属性的值

元素对象.属性名 = 值

代码

body>
    <button id="ldh">张三</button>
    <button id="zxy">李四</button> <br>
    <img src="images/zs.jpg" alt="" title="张三">
    <script>
        // 修改元素属性  src
        // 1. 获取元素
        var zs = document.getElementById('ldh');
        var ls = document.getElementById('zxy');
        var img = document.querySelector('img');
        // 2. 注册事件  处理程序
        zxy.onclick = function() {
            img.src = 'images/zs.jpg';
            img.title = 'zs';
        }
        ldh.onclick = function() {
            img.src = 'images/ls.jpg';
            img.title = '李四';
        }
    </script>
</body>

1.2表单的操作

获取属性的值

元素对象.属性名

设置属性的值

元素对象.属性名 = 值
表单元素中有一些属性如：disabled、checked、selected，元素对象的这些属性的值是布尔型。

代码

<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 指向的是事件函数的调用者 btn
        }
    </script>
</body>

1.3样式表达属性的操作

我们可以通过 JS 修改元素的大小、颜色、位置等样式。

1.3.1通过操作style属性

元素对象的style属性也是一个对象！

元素对象.style.样式属性 = 值;

代码

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

1.3.2通过操作className属性

元素对象.className = 值;

因为class是关键字，所有使用className。

代码

<body>
    <div class="first">文本</div>
    <script>
        // 1. 使用 element.style 获得修改元素样式  如果样式比较少 或者 功能简单的情况下使用
        var test = document.querySelector('div');
        test.onclick = function() {
            // this.style.backgroundColor = 'purple';
            // this.style.color = '#fff';
            // this.style.fontSize = '25px';
            // this.style.marginTop = '100px';

            // 2. 我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况
            // 3. 如果想要保留原先的类名，我们可以这么做 多类名选择器
            // this.className = 'change';
            this.className = 'first change';
        }
    </script>
</body>