DOM--操作元素

最新推荐文章于 2023-05-11 11:05:57 发布

JJ_Smilewang

最新推荐文章于 2023-05-11 11:05:57 发布

阅读量1.1k

点赞数 1

分类专栏： DOM 文章标签： javascript 前端

本文链接：https://blog.csdn.net/JJ_Smilewang/article/details/125265863

版权

DOM 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

1.改变元素内容

改变元素内容有两种方式，分别如下

// 第一种：element.innerText 表示从起始位置到终止位置的内容, 但它去除 html 标签， 同时空格和换行也会去掉
// 比如：
<body>
    <p>我真棒！</p>
    <script>
        // 需求：将p元素中的内容替换成以h2标签，同时h2标签中的文字为：努力做到最好~
        // 1. 获取元素
        // 注意：使用标签获取元素得到的是一个集合，需要使用下标获得具体值
        let p = document.getElementsByTagName("p")[0];
        // 2. 操作元素
        p.innerText = '<h2>努力做到最好~</h2>'
    </script>
</body>
上述代码，执行的结果如下：

我们的原始需求是想把 “我真棒！” 的文字改为 “努力做到最好~，同时该文字添加h2的样式，但是使用innerText属性，并没有得到我们想要的，这是因为 innerText 属性是不识别HTML标签的，而是把其当成单纯的文本内容，从而得到如上结果。

那么，要想实现以上需求，该怎么办呢？

这就需要使用改变文本内容的另一个属性——innerHTML，它也是我们实际开发中最常用的。具体使用如下：

// 第二种：element.innerHTML 表示起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行
<body>
    <p>我真棒！</p>
    <script>
        // 需求：将p元素中的内容替换成以h2标签，同时h2标签中的文字为：努力做到最好~
        // 1. 获取元素
        // 注意：使用标签获取元素得到的是一个集合，需要使用下标获得具体值
        let p = document.getElementsByTagName("p")[0];
        // 2. 操作元素
        p.innerHTML = '<h2>努力做到最好~</h2>'
    </script>
</body>

只要把上面代码中的p.innerText 改成 p.innerHTML ，就可实现下图效果：

通过代码演示，可以直观的感受到 innerText 和 innerHTML 的作用和区别，作用就是用来改变元素的内容，删除元素中的内容，则只需要设置 element.innerText="" 或者 element.innerHTML="" ，即设置属性值为空。区别：一个识别HTML标签，一个不识别，推荐使用innerHTML。

2. 常用元素的属性操作

① innerText、innerHTML 改变元素内容
② src、href
③ id、alt、title

2.1 案例：图片的点击切换

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .box {
        width: 400px;
        padding: 20px;
        margin: 50px;
        text-align: center;
        border: 1px solid #ccc;
    }
    .box img {
        width: 370px;
        height: 240px;
        margin: 10px 0;
    }
    .box button {
        padding: 3px 7px;
        margin: 0 5px;
    }
</style>
<body>
    <div class="box">
        <p></p>
        <img src="images/01.jpg" alt="">
        <button>上一张</button>
        <button>下一张</button>
    </div>
    <script>
        // 需求：在p元素中呈现内容 "一共有x张图片，当前是第x张，点击按钮实现图片上下的切换"
        // 1. 获取元素
        // 注意：使用标签获取元素得到的是一个集合，需要使用下标获得具体值
        let p = document.getElementsByTagName("p")[0];
        let img = document.querySelector("img");
        // 注意：使用querySelectorAll()获取到的是一个集合，需要使用下标获得具体值
        let btn = document.querySelectorAll("button");
        // 2. 定义一个数组存放图片地址
        let imgArr = [
            'images/01.jpg',
            'images/02.jpg',
            'images/03.jpg',
            'images/04.jpg',
            'images/05.jpg',
        ];
        // 3. 定义一个变量 index 表示当前图片的索引号，因为默认打开浏览器，呈现在页面上的是第一张，所以index=0
        let index = 0;
        // 4. 为了防止打开页面时p标签中存有值，所以需要先为其添加内容
        // 注意：图片张数与图片地址的个数一致，即数组长度即为图片张数，而index是从0开始的，但是用户知道是从1开始的，所以当前的图片是第(index+1)张
        p.innerHTML = '一共有' + imgArr.length + '张图片，当前是第' + (index + 1) + '张';
        // 5. 给上一张按钮绑定点击事件
        btn[0].onclick = function() {
            // 点击上一张，则意味着当前的index-1
            index--;
            // 但是数组的index最小为0，所以要进行判断，如果当前是第一张，那么点击上一张，则让其显示最后一张，实现循环
            if (index < 0) {
                index = imgArr.length - 1;
            };
            // 通过更改图片标签的src属性，实现图片的真正切换
            // 语法：element.src='新的url';
            img.src = imgArr[index];
            // 图片切换了，意味着p标签的内容也要相应变化
            p.innerHTML = '一共有' + imgArr.length + '张图片，当前是第' + (index + 1) + '张';
        };
        // 6. 给下一张按钮绑定点击事件，思路基本一样
        btn[1].onclick = function() {
            // 点击下一张，则意味着当前的index+1
            index++;
            // 但是数组的index最大为数组长度-1，所以要进行判断，如果当前是最后一张，那么点击下一张，则让其显示第一张，实现循环
            if (index > imgArr.length - 1) {
                index = 0;
            };
            // 通过更改图片标签的src属性，实现图片的真正切换
            // 语法：element.src='新的url';
            img.src = imgArr[index];
            // 图片切换了，意味着p标签的内容也要相应变化
            p.innerHTML = '一共有' + imgArr.length + '张图片，当前是第' + (index + 1) + '张';
        };
    </script>
</body>

3.表单元素的属性操作

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

type、value、checked、selected、disabled

3.1 案例：密码可见性的切换

<style>
    .box {
        position: relative;
        width: 500px;
        margin: 50px auto;
    }
    input {
        margin: 10px 0;
        width: 500px;
        height: 30px;
        border: 0;
        outline: none;
        border-bottom: 1px solid #ccc;
    }
    #account_ts {
        position: absolute;
        top: 54px;
        right: 8px;
        font-size: 13px;
    }
    button {
        margin-top: 20px;
        width: 500px;
        height: 40px;
        border-radius: 20px;
        background-color: red;
        border: 0;
        color: #fff;
    }
    div {
        font-size: 14px;
        color: #888;
    }
    .log {
        height: 40px;
        margin-top: 20px;
    }
    .left {
        float: left;
    }
    .right {
        float: right;
    }
    label img {
        position: absolute;
        right: 4px;
        top: 108px;
        width: 22px;
        height: 22px;
        color: rgb(47, 191, 47);
        cursor: pointer;
    }
</style>
<body>
    <div class="box">
        <h3>京东登录</h3>
        <input type="text" placeholder="用户名/邮箱/已验证手机" id="account">
        <label for="">
            <img src="images/close.png" alt="">
        </label>
        <input type="password" placeholder="密码" id="pwd"><br>
        <button>登录</button>
        <div class="log">
            <div class="left">短信验证码登录</div>
            <div class="right">手机快速注册</div>
        </div>
    </div>
    <script>
        // 需求：点击密码框右侧的眼睛实现密码的显示与隐藏
        // 本质：改变文本框的type属性，如果是text，则是显示密码，如果password则密码加密
        // 1. 获取元素
        let img = document.querySelector('img');
        let inputPwd = document.getElementById("pwd");
        // 2. 给右侧眼睛注册点击事件
        // 由于要进行点击切换，所以要使用开关思想实现眼睛的睁开和关闭（定义一个变量表示状态）
        let flag = true;
        img.onclick = function() {
            if (flag) {
                // 如果flag为true,则将图片切换为眼睛睁开的，即表示密码可见性
                this.src = 'images/open.png';
                // 将密码框改为文本框，即输入的密码可见
                inputPwd.type = 'text';
                // 并将变量flag赋值为false，实现切换
                flag = false;
            } else {
                // 如果flag为false,则将图片切换为眼睛关闭的，即表示密码不可见性
                this.src = 'images/close.png';
                // 将文本框改为密码框，即输入的密码不可见
                inputPwd.type = 'password';
                // 并将变量flag赋值为true，实现切换
                flag = true;
            }
        }
    </script>
</body>

4.样式属性操作

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

① element.style 行内样式操作
② element.className 类名样式操作

注意：
（1）JS 里面的样式采取驼峰命名法比如 fontSize、 backgroundColor
（2）JS 修改 style 样式操作，产生的是行内样式，CSS 权重比较高

（3）如果样式修改较多，可以采取操作类名方式更改元素样式。
（4）class因为是个保留字，因此使用className来操作元素类名属性
（5）className 会直接更改元素的类名，会覆盖原先的类名。

4.1 案例：循环精灵图背景

<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .box {
        width: 250px;
        margin: 100px;
    }
    .box li {
        list-style: none;
        float: left;
        width: 24px;
        height: 24px;
        background-color: pink;
        margin: 15px;
        background: url(images/sprite.png) no-repeat;
    }
</style>
<body>
    <div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        // 需求：利用 for 循环设置一组元素的精灵图背景，并将其呈现在页面中
        // ① 首先精灵图图片排列是有规律的(竖向等差排列)
        // ② 核心思路:利用for循环 修改精灵图片的背景位置background-position
        // ③ 剩下的就是考验你的数学功底了(找到索引号和坐标之间的关系,这里是索引号*44即为y坐标值)
        // 1. 获取元素，所有的小li
        let lis = document.querySelectorAll("li");
        // 2. 遍历所有的小li
        for (let i = 0; i < lis.length; i++) {
            // 让索引号*44，就是每个li的背景y坐标
            let index = i * 44;
            // 横坐标是不变的，所以为0，而横纵坐标之间要以-隔开
            lis[i].style.backgroundPosition = '0-' + index + 'px'
            console.log('0-' + index + 'px');
        }
    </script>
</body>