DOM--自定义属性的操作

最新推荐文章于 2024-09-10 10:27:56 发布

JJ_Smilewang

最新推荐文章于 2024-09-10 10:27:56 发布

阅读量2.4k

点赞数 4

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

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

版权

DOM 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文介绍了DOM元素的内置属性与自定义属性的区别，并详细讲解了如何通过JavaScript进行属性的获取、设置和移除。通过一个Tab栏切换的实战案例，展示了如何利用自定义属性实现内容的动态显示。此外，还探讨了H5新增的data-*自定义属性及其获取方式，强调了自定义属性在保存和使用数据中的作用。

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

DOM元素属性分为内置属性和自定义属性，比如我们常见的class、id、src、input等属性，都是内置属性，简单理解就是元素自带的属性。而自定义属性就是程序员为了方便使用而自己给元素设置的属性。

1. 获取属性值

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

区别：
(1) element.属性获取内置属性值（元素本身自带的属性），如img..src
(2) element.getAttribute(‘属性’); 主要获得自定义的属性（标准）我们程序员自定义的属性;

2. 设置属性值

① element.属性 = ‘值’ 设置内置属性值。
② element.setAttribute('属性', '值');

区别：
(1) element.属性设置内置属性值
(2) element.setAttribute(‘属性’,'值'); 主要设置自定义的属性（标准）

3. 移除属性

① element.属性 = ‘’ 将值设置为空，就相当于移除了内置属性值。
② element.removeAttribute('属性'); 主要移除自定义的属性

4.案例：tab 栏切换

需求：当鼠标点击上面相应的选项卡（tab），下面内容跟随变化

<!-- css样式 -->
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .tab-box {
        width: 800px;
        margin: 50px;
    }
    .clear::after {
        content: "";
        display: block;
        clear: both;
    }
    .tab-title {
        height: 50px;
        background-color: #F9F9F9;
    }
    .tab-title li {
        float: left;
        line-height: 50px;
        list-style: none;
    }
    a {
        display: block;
        color: #666;
        text-decoration: none;
        padding: 0 30px;
    }
    .current {
        color: #fff;
        background-color: #DE3A38;
    }
    .item {
        display: none;
        margin-top: 10px;
        height: 160px;
        padding: 20px;
        background-color: lightpink;
    }
</style>
<body>
    <!-- html结构 -->
    <div class="tab-box">
        <div class="tab-title">
            <ul class="clear">
                <li><a href="#" class="current">商品介绍</a></li>
                <li><a href="#">规格与包装</a></li>
                <li><a href="#">售后保障</a></li>
                <li><a href="#">商品评价</a></li>
            </ul>
        </div>
        <div class="tab-content">
            <div class="item" style="display: block;">
                商品介绍对应版块的内容
            </div>
            <div class="item">
                规格与包装对应版块的内容
            </div>
            <div class="item">
                售后保障对应版块的内容
            </div>
            <div class="item">
                商品评价对应版块的内容
            </div>
        </div>
    </div>
    <!-- js代码 -->
    <script>
        // 1. 获取元素
        let as = document.querySelectorAll('.tab-title li a');
        let items = document.querySelectorAll('.tab-content .item');
        // 2. 循环遍历给每个a绑定事件
        for (let i = 0; i < as.length; i++) {
            as[i].onclick = function() {
                // 然后给其添加自定义属性index，等同于索引号
                this.setAttribute('index', i);
                // 利用排他思想为其添加类名current,表示点中的这个选项栏样式特别
                // (1) 先给所有a 清除类名current(干掉所有人)
                as.forEach(item => {
                    item.className = '';
                });
                // (2) 给当前的a添加类名current(留下我自己)
                this.className = 'current';
                // 点击a对应的内容模块要显示出来，利用刚刚设置的自定义属性index
                // (1) 获取index的属性值，定义变量index接收
                let index = as[i].getAttribute('index');
                // (2) 使用index作为下标获取对应版块的内容，同样需要利用排他思想
                items.forEach(item => {
                    // 先让所有的item都隐藏（干掉所有人）
                    item.style.display = 'none';
                });
                // 让对应版块的item显示（留下需要的）
                items[index].style.display = 'block';
            };
        }
    </script>
</body>

案例分析：

① Tab栏切换有2个大的模块
② 上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想）修改类
名的方式
③ 下面的模块内容，会跟随上面的选项卡变化。所以下面模块变化写到点击事件里面。
④ 规律：下面的模块显示内容和上面的选项卡一一对应，相匹配。
⑤ 核心思路：给上面的tab_title 里面的所有小a 添加自定义属性，属性值从0开始编号。
⑥ 当我们点击tab_title 里面的某个小a，让tab_content 里面对应序号的内容显示，其余隐藏（排他思想）