DOM | 操作元素

不爱吃菜的蔡菜

已于 2022-05-01 23:50:25 修改

阅读量721

点赞数

分类专栏： Web APIs + 网页特效 + 本地存储文章标签： javascript 前端 html

于 2022-04-30 18:50:28 首次发布

本文链接：https://blog.csdn.net/muziqwyk/article/details/124483417

版权

本文详细介绍了如何使用JavaScript操作DOM元素，包括改变元素内容、属性操作、样式修改、自定义属性及H5自定义属性的设置与获取。通过案例展示了如表单元素的属性操作、样式属性操作、排他思想的应用以及tab栏切换等常见功能的实现，是前端开发者的重要参考资料。

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

1. element.style 行内样式操作

案例：淘宝点击关闭二维码

案例：循环精灵图背景

案例：显示隐藏文本框内容

2. element.className 类名样式操作

操作元素

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

改变元素内容

element.innerText

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

            // div.innerText = '2022-4-20'; //获取指定时间
            div.innerText = getDate(); // 获取当前时间

    <button>显示当前系统时间</button>
    <div>某个时间</div>
    <p>当前时间</p>
    <script>
        // 当我们点击 按钮，div里面的文字会发生变化   按钮是事件源
        // 1.获取元素  获取两个元素：按钮和div
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        // 2.注册事件  按钮被点击
        btn.onclick = function () {
            // div.innerText = '2022-4-20'; //获取指定时间
            div.innerText = getDate(); // 获取当前时间
        }
        function getDate() {
            var date = new Date(); // 得到当前系统日期
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            var day = date.getDay();
            return '今天是' + year + '年' + month + '月' + dates + '日' + arr[day];
        }

当元素不用被注册的时候(不需要点击或各种操作，只要你一打开页面就会改变）

        // 我们元素可以不用添加事件
        var p = document.querySelector('p'); // 获取元素
        p.innerText = getDate(); // 修改内容

element.innerHTML

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

常用元素的属性操作

1. innerText、innerHTML 改变元素内容
2. src、href
3. id、alt、title

修改元素属性 src

当点击不同的按钮时，会出现不同的图片

img.src = 'images/段星星3.jpg'; // 意思是： img 的 src 变为 ...

        // 1.获取元素
        var dxx = document.getElementById('dxx');
        var img = document.querySelector('img');

        // 2.注册事件  +  处理程序
        dxx.onclick = function () {  // 当点击dxx按钮的时候
            img.src = 'images/段星星3.jpg'; // img 的 src 变为 ...
        }

案例：分时显示不同图片,显示不同问候语

根据不同时间，页面显示不同图片，同时显示不同的问候语。

如果上午时间打开页面，显示上午好，显示上午的图片。

如果下午时间打开页面，显示下午好，显示下午的图片。

如果晚上时间打开页面，显示晚上好，显示晚上的图片。

根据系统不同时间来判断，所以需要用到日期内置对象

利用多分支语句来设置不同的图片

需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性

需要一个div元素，显示不同问候语，修改元素内容即可

<body>
    <div>早上好</div>
    <img src="images/morning.jpg" alt="">
    <script>
        var div = document.querySelector('div'); // 获取元素
        var img = document.querySelector('img');
        var date = new Date(); // 日期实例化
        var hours = date.getHours(); // 得到当前的小时数
        // 判断小时数 改变图片和文字信息
        if (hours >= 5 && hours < 12) {
            img.src = 'images/morning.jpg';
            div.innerHTML = '早上好';
        } else if (hours >= 12 && hours < 19) {
            img.src = 'images/afternoon.jpg';
            div.innerHTML = '下午好';
        } else {
            img.src = 'images/night.jpg';
            div.innerHTML = '晚上好';
        }
    </script>
</body>

表单元素的属性操作

利用 DOM 可以操作如下表单元素的属性：

type、value、checked、selected、disabled

点击按钮，文本框内容发生改变，按钮被禁用

// 表单里面的值文字内容是通过 value 来修改的

input.value = '糟糕被点击了';

// 如果想要某个表单按钮被禁用，不能再点击，用disabled(禁用)

btn.disabled = true; // disabled=true; 对的，disabled被禁用了

this.disabled = true; // this指向的是时间函数的调用者btn

<body>
    <button>按钮</button>
    <input type="text" value="输入内容">
    <script>
        // 1.获取元素
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        // 2. 注册事件  处理程序
        btn.onclick = function () { // 点击了按钮  btn调用了函数
            // 表单里面的值  文字内容是通过 value 来修改的
            input.value = '糟糕被点击了';
            // 如果想要某个表单按钮被禁用 ，不能再点击，用disabled(禁用)
            btn.disabled = true; // disabled=true; 对的，disabled被禁用了
            this.disabled = true; // this指向的是时间函数的调用者btn
        }
    </script>
</body>