操作元素--自定义属性的操作

作者: 潘肚饿兵哥哥 | 来源:发表于2020-09-17 23:04 被阅读0次

复习笔记之API(3) 节点
无处安放
js操作属性
Web-API-02
jQuery 回调函数
[JavaScript] js设置和获取自定义属性的方法
操作元素--自定义属性的操作
3初识JavaScript
操作元素熟属性
Jquery

$\color{rgba(254, 67, 101, .8)}{1.获取属性值}$

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

上面两个方法都可以获取属性，区别是：

element.属性获取内置属性(元素本身自带的属性)

element.getAttribute('属性'); 主要是获得自定义的属性(标准)我们程序员自己定义的属性

下面这个京东首页的手机按钮的属性 data-index="1" 就是程序员自己添加的属性，这就是自定义属性

image.png

    <div id="demo" index="1"></div>
    <script>
        var div = document.querySelector('div');
        //1.获取元素的属性值
        //（1）之前的做法，第一种方法: element.属性,下面console.log(div.id);输出的值就是demo
        console.log(div.id);

        //（2）之前的做法，第二种方法: element.getAttribute('属性');
        //Attribute 属性的意思
        //下面输出的结果也是demo
        console.log(div.getAttribute('id'));

        //当我们自己给上面div添加一个属性：index="1"，然后通过下面代码就可以获取到值：1
        console.log(div.getAttribute('index'));
    </script>

image.png

$\color{rgba(254, 67, 101, .8)}{2.设置属性值:}$

设置属性值两种方法：
1.element.属性 = "值" 设置内置属性值
2.element.setAttribute('属性', '值'); 设置自定义属性值

    <div id="demo" index="1" class="nav"></div>
    <script>
        //一、获取属性值

        var div = document.querySelector('div');
        //1.获取元素的属性值
        //（1）之前的做法，第一种方法: element.属性,下面console.log(div.id);输出的值就是demo
        console.log(div.id);

        //（2）之前的做法，第二种方法: element.getAttribute('属性');
        //Attribute 属性的意思
        //下面输出的结果也是demo
        console.log(div.getAttribute('id'));

        //当我们自己给上面div添加一个属性：index="1"，然后通过下面代码就可以获取到值：1
        console.log(div.getAttribute('index'));


        //二、设置属性值
        //1.element.属性 = '值'
        //如下代码，div.id的属性值就由原来的demo改成了test
        div.id = 'test';
        //这种方法如果要改class就要写成className，而第二种方法就不需要写className,直接写class就可以了，class比较特殊
        div.className = 'navs';

        //2.通过element.setAttribute('属性', '值');方法更改属性值
        //这种犯法主要针对于自定义属性
        //此时原本index=1就被修改成了2，返回值2
        div.setAttribute('index', '2');
        //这里要修改class的属性就不要写className了，直接写class就可以了
        div.setAttribute('class', 'footer');
    </script>

image.png

$\color{rgba(254, 67, 101, .8)}{3.移除属性值}$

element.removeAttribute('属性');

        //3.移除属性值：element.removeAttribute('属性');
        //移除index属性
        div.removeAttribute('index');

$\color{rgba(254, 67, 101, .8)}{index已被移除：}$

image.png

$\color{rgba(254, 67, 101, .8)}{案例：tab栏切换(重点案例)}$

当鼠标点击上面相应的选项卡(tab)，下面内容跟随变化

image.png

分析：
1.Tab栏且患有2个大模块
2.上面的模块选项卡，点击其中某一个，当前点击的底色会是红色，其余不变(排他思想)修改类名的方式
3.下面的模块内容，会跟随上面的选项卡变化，所以下面的模块变化写到点击事件里面
4.下面的模块显示内容和上面的选项卡一一对应，相匹配
5.核心思路：给上面的tab_list里面所有的小li添加自定义属性，属性值从0开始，要在点击事件之前设定这个索引
6.当我们点击tab_list里面的某个li，让tab_con里面对应序号的内容显示，其余隐藏

$\color{rgba(254, 67, 101, .8)}{代码实现：}$

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        .tab {
            width: 978px;
            margin: 100px auto;
        }
        
        .tab_list {
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }
        
        .tab_list li {
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }
        
        .tab_list .current {
            background-color: #c81623;
            color: #fff;
        }
        
        .item_info {
            padding: 20px 0 0 20px;
        }
        
        .item {
            display: none;
        }
    </style>
</head>

<body>
    <!-- 先有一个大盒子装tab和内容 -->
    <div class="tab">
        <!-- 这是tab栏，上面的盒子 -->
        <div class="tab_list">
            <ul>
                <!-- current是当前选中的tab项，设置为红色 -->
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价（50000）</li>
                <li>手机社区</li>
            </ul>
        </div>

        <!-- 这是内容栏，下面的盒子 -->
        <!-- 这里的每一个div都按顺序对应上面tab栏的li -->
        <div class="tab_con">
            <!-- style="display:block" 两个作用1.变为块级元素，2.显示内容 -->
            <div class="item" style="display:block">
                商品介绍模块内容
            </div>
            <div class="item">
                规格与包装模块内容
            </div>
            <div class="item">
                售后保障模块内容
            </div>
            <div class="item">
                商品评价（50000）模块内容
            </div>
            <div class="item">
                手机社区模块内容
            </div>

        </div>
    </div>


    <script>
        //1.上面的模块选项卡，点击其中某一个，当前点击的底色会是红色，其余不变(排他思想)修改类名的方式

        //2.获取元素
        var tab_list = document.querySelector('.tab_list');
        var lis = tab_list.querySelectorAll('li');
        var items = document.querySelectorAll('.item');

        //for循环绑定点击事件
        for (var i = 0; i < lis.length; i++) {

            //先给5个小li设置索引,自定义属性为index，属性值为i，设置完后，for会给5个li循环添加属性
            //当5个li都有了索引号之后，就可以和下面的内容显示模块绑定了
            lis[i].setAttribute('index', i);

            lis[i].onclick = function() {
                //排他思想，先清除其余li的class类,只留下自己
                for (var i = 0; i < lis.length; i++) {
                    lis[i].className = '';
                }
                this.className = 'current';

                //通过上面的for循环，已经实现点击某一个模块变为红色，而其他模块不变色

                //下面模块：要跟随上面的选项卡变化，所以下面的模块变化写到点击事件里面，也是写到onclick里面
                //2.显示内容模块：下面的模块显示内容和上面的选项卡一一对应，相匹配，显示一个，其他隐藏
                //获取当前点击的li(上面模块的)的index值
                var index = this.getAttribute('index');



                //清除所有div在for循环外给当前点击的div添加值
                for (var i = 0; i < items.length; i++) {
                    items[i].style.display = 'none';
                }

                //index值是上面模块的值，把上面模块的值绑定给下面当前点击的li
                //console.log(items);不知道为什么，此时的items是一个数组。其中的值就是5个div.item
                //这里就相当于把当前点到的那一个div.items设置为默认显示的了
                items[index].style.display = 'block';
            }
        }
    </script>

image.png

$\color{rgba(254, 67, 101, .8)}{这个案例不知道li和div对应的索引是怎么联系起来的，没看懂}$

$\color{rgba(254, 67, 101, .8)}{H5自定义数字那个：}$

自定义属性的目的：是为了保存并使用数据，有些数据可以保存在页面中而不需要存到数据库中

自定义属性获取是通过getAttribute('属性')获取；
但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性,如下例

因此，H5新增了自定义属性：以data开头作为属性名并且赋值，如：
$\color{rgba(254, 67, 101, .8)}{<div　data-index="1"></div>}$

    <div getTime="20"></div>

    <script>
        var div = document.querySelector('div');
        //console.log(div.getTime);因为是自定义属性，这样获取返回值是undefined，用下面的方法才行
        console.log(div.getAttribute('getTime'));
    </script>

image.png

$\color{rgba(254, 67, 101, .8)}{获取H5自定义属性：}$

1.兼容性获取 element.getAttribute('data-index');
2.H5新增element.dataset.idnex 或者 element.dataset['idnex'] ie11才开始支持,这两种方法只能用于data-开头的属性，而前面的写法获取什么样的都可以
3.自定义属性还能这样写：data-list-name='andy';,但是获取的时候要把后面两个属性名连在一起写：console.log(div.dataset.listName);
因此，实际应用一般用getAttribute，H5新增的方法太麻烦，而且要IE11以上才兼容

    <div getTime="20" data-index="2"></div>

    <script>
        var div = document.querySelector('div');
        //console.log(div.getTime);因为是自定义属性，这样获取返回值是undefined，用下面的方法才行
        console.log(div.getAttribute('getTime'));
        //因此设置自定义属性，H5新增再输姓名前面加data：
        //新增后，设置属性名和获取属性名和以前一样的方法没变
        div.setAttribute('data-time', 20);
        console.log(div.getAttribute('data-index'));

        //H5新增的获取自定义属性的方法
        //这个data就是属性名前面加的data，在data后面加set，然后点上属性名的后半部分
        //此时的div.dataset是一个集合，有两个值：{index: "2", time: "20"}
        //dataset是一个集合，里面存放了所有以data开头的西定义属性，所以这个集合里的键是index和time，而不是data-index,data-time
        console.log(div.dataset);

        console.log(div.dataset.index);
        //这种写法和上面div.dataset.index效果一样，前面学过，都是获取属性
        console.log(div.dataset['index']);
    </script>

image.png