DOM操作元素

最新推荐文章于 2024-08-22 14:32:34 发布

FG.

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量715

点赞数 7

分类专栏： Web APIs 文章标签： javascript css3 前端

本文链接：https://blog.csdn.net/weixin_54418006/article/details/122311262

版权

Web APIs 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

本文详细介绍了如何通过JavaScript的DOM操作改变元素内容（innerText vs innerHTML），表单元素属性（如type、value等），以及样式属性（行内样式与类名操作）。实例演示了如何动态更新元素、设置自定义属性，并运用排他思想处理多元素状态。

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

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

1. 改变元素内容

element.innerText

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

element.innerHTML

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div,
        p {
            width: 300px;
            height: 30px;
            line-height: 30px;
            color: #fff;
            background-color: pink;
        }
    </style>
</head>

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

</html>

在这里插入图片描述

<body>
    <div></div>
    <p>
        我是文字
        <span>123</span>
    </p>
    <script>
        //innerText 和 innerHTML的区别
        //1. innerText不识别html标签 非标准 去除空格和换行
        var div = document.querySelector('div');
        //div.innerHTML识别HTML标签 W3C标准 保留空格和换行的
        div.innerHTML = '<strong>今天是:</strong> 2019';
        //这两个属性是可读写的 可以获取元素里面的内容
        var p = document.querySelector('p');
        console.log(p.innerText);
        console.log(p.innerHTML);
    </script>
</body>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 300px;
        }
    </style>
</head>

<body>
    <img src="img.jpg" alt="">
    <div>早上好</div>
    <script>
        //1.获取元素
        var img = document.querySelector('img');
        var div = document.querySelector('div');
        //2.得到当前的小时数
        var date = new Date();
        var h = date.getHours();
        //3.判断小时数改变图片和文字信息
        if (h < 12) {
            img.src = 'img.jpg';
            div.innerHTML = '宝贝早上好';
        } else if (h < 18) {
            img.src = 'img.jpg';
            div.innerHTML = '宝贝下午好';
        } else {
            img.src = 'img.jpg';
            div.innerHTML = '宝贝晚上好';
        }
    </script>
</body>

</html>

在这里插入图片描述

2. 表单元素的属性操作

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

type、value、checked、selected、disabled

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

在这里插入图片描述

3. 样式属性操作

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

1. element.style  行内样式操作
2. element.className 类名样式操作

注意：
1.JS里面的样式采取驼峰命名法比如 fontSize、backgroundColor
2.JS修改style样式操作，产生的是行内样式，CSS权重比较高
3.如果样式修改比较多，可以采取操作类名方式更改元素样式
4.class因为是个保留字，因此使用className来操作元素类名属性
5.className会直接更改元素的类名，会覆盖原先的类名

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

<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>

点击盒子后会改变盒子的大小和背景颜色

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        .change {
            background-color: purple;
            color: #fff;
            font-size: 25px;
            margin-top: 100px;
        }
    </style>
</head>

<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';
            //把当前元素的类名改为change
            //2.我们可以通过修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况
            //3.如果想要保留原先的类名，可以使用多类名选择器
            //this.className = 'change';
            this.className = 'first change';
        }
    </script>
</body>

</html>

在这里插入图片描述

4. 排他思想(算法)

如果有同一组元素，我们想要某一个元素实现某种形式，需要用到循环的排他思想算法：

所有元素全部清楚样式
给当前元素设置样式
注意顺序不能颠倒

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        button {
            width: 40px;
            height: 20px;
        }
    </style>
</head>

<body>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
    <script>
        //1.获取按钮元素
        var btns = document.getElementsByTagName('button');
        //btns得到的是伪数组 里面的每一个元素btns[i]
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function () {
                //(1)先把所有按钮的背景颜色去掉
                for (var i = 0; i < btns.length; i++) {
                    btns[i].style.backgroundColor = '';
                }
                //(2)然后才让当前的元素背景颜色变
                this.style.backgroundColor = 'pink';
            }
        }
    </script>
</body>

</html>

在这里插入图片描述
点击下一个按钮，前面点击的按钮会迅速恢复到原来的颜色。

5. 自定义属性值的操作

1.获取属性值

element.属性 获取属性值
element.getAttribute('属性');

区别：

element.属性获取内置属性值(元素本身自带的属性)’
element.getAttribute(‘属性’); 主要获得自定义的属性(标准)

<body>
    <div id="demo" index="1"></div>
    <script>
        var div = document.querySelector('div');
        //1.获取元素的 属性值
        //(1)element.属性
        console.log(div.id);
        //(2)element.getAttribute('属性') get得到获取 attribute 属性的意思
        console.log(div.getAttribute('id'));
        console.log(div.getAttribute('index'));
    </script>
</body>

在这里插入图片描述
2. 设置属性值

element.属性 = '值' 设置内置属性值
element.setAttribute('属性', '值');

区别：

element.属性设置内置属性值
element.setAttribute(‘属性’); 主要设置自定义的属性(标准)

3. 移除属性
element.removeAttribute('属性');

<body>
    <div id="demo" index="1" class="nav"></div>
    <script>
        var div = document.querySelector('div');
        //1.获取元素的 属性值
        //(1)element.属性
        console.log(div.id);
        //(2)element.getAttribute('属性') get得到获取 attribute 属性的意思
        console.log(div.getAttribute('id'));
        console.log(div.getAttribute('index'));
        //2.设置属性值
        //(1)element.属性='值'
        div.id = 'test';
        div.className = 'navs';
        //(2)element.setAttribute('属性','值')
        div.setAttribute('index', 2);
        div.setAttribute('class', 'footer');
        //(3)移除属性 removeAtttibute(属性)
        div.removeAttribute('index');
    </script>
</body>

在这里插入图片描述

6. H5自定义属性

自定义属性的目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
自定义属性获取是通过getAttribute(‘属性’)获取。
但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义。
1.设置H5自定义属性
H5规定自定义属性data- 开头作为属性名并且赋值
比如：<div data-index="1"></div>或者使用JS设置element.setAttribute('data-index', 2)
2.获取H5自定义属性
1.兼容性获取element.getAttribute('data-index');
2.H5新增element.dataset.index或者element.dataset['index'] ie11才支持

<body>
    <div getTime="20" data-index="2" data-list-name="FG"></div>
    <script>
        var div = document.querySelector('div');
        console.log(div.getAttribute('getTime'));
        div.setAttribute('data-time', 20);
        console.log(div.getAttribute('data-index'));
        console.log(div.getAttribute('data-list-name'));
        //h5新增获取自定义属性只能获取data-开头的
        //dataset是一个集合里面存放了所有以data开头的自定义属性
        console.log(div.dataset);
        console.log(div.dataset.index);
        console.log(div.dataset['index']);
        //如果自定义属性里面有多个-链接的单词 我们获取的时候采用驼峰命名法
        console.log(div.dataset.listName);
        console.log(div.dataset['listName']);
    </script>
</body>

在这里插入图片描述

FG.

关注

7
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
6
评论
DOM操作元素

JavaScript的DOM操作可以改变页面内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性1. 改变元素内容element.innerText从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉element.innerHTML起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行<!DOCTYPE html><html lang="en"><head> <me
复制链接

扫一扫