5、JS-DOM：操作属性（获取、设置、移除元素属性值）

一、自定义属性总结：

a、自定义属性目的：是为了保存井使用数据。有些据可以保存到页面中而不用保存到数据库中。
b、自定义属性获取是通过 getattribute(属性')获取。
c、但是有些自定义属性很容易引起歧义，不容易判断是元索的内置属性还是自定义属性
H5给我们新增了自定义属性

1.设置H5自定义属性
H5规定自定义属性data开头做为属性名并且赋值。
比如< div data- index=“1"></div
或者使用JS设置
element.setattribute('data-index', 2)

 

1、获取元素属性值：

a、element.属性

b、element.getAttribute('属性');

1.1：两者区别：

a、element.属性  获取内置属性值（就是元素本身自带的属性，比如 id，class）

b、element.getAttribute('属性');   主要获取自定义属性值（程序员自己定义的属性）

    <div id="demo" index='1'></div>

    <script>
        var div = document.querySelector('div');

        // (1)、element.属性
        console.log(div.id);

        // element.getAttribute('属性')
        console.log(div.getAttribute('id'));
        console.log(div.getAttribute('index'));
    </script>

　　

2、设置元素属性值：

        // 2、设置元素属性值：
        //  (1)、element.属性 = '值'
        div.id = 'test';
        div.className = 'navs';
        // （2）、element.getAttribute('属性', '值');
        div.setAttribute('index',2);
        div.setAttribute('class', 'footer')  // 这里class特殊。不是classname

　　

3、移除元素属性值：

// 3、移除属性
        div.removeAttribute('index');

　

4、tab栏切换案例：

    <script>
        var tablist = document.querySelector('.tab-list');
        var lis = tablist.querySelectorAll('li');
        var items = document.querySelectorAll('.item');
        for (var i = 0; i < lis.length; i++) {
            // 给 5个li 设置 索引号
            lis[i].setAttribute('index', i);

            lis[i].onclick = function () {
                // 1、点击模块选项卡，当前背景色变色，其余不变（排他思想）：添加类名方法
                for (var i = 0; i < lis.length; i++) {
                    // a、所有的类名都清楚
                    lis[i].className = '';
                }
                // b、当前点击这个添加 current 类
                this.className = 'current';

                // 获得 点击 那个 li 的索引号；
                var index = this.getAttribute('index');
                // 因为下面内容随着点击而改变，因此要写在点击事件里面
                for (var i = 0; i < items.length; i++) {
                    // 让所有的 item 都隐藏
                    items[i].style.display = 'none';
                }
                // 让对应的 item 显示出来
                items[index].style.display = 'block';
            }
        }
    </script>