JS-DOM 元素属性的操作（简单tab栏切换案例）

获取元素属性

在JS中，获取元素属性分为获取元素自定义属性和内置属性。

获取内置属性：ele.属性   （ele为元素对象）

获取自定义属性：ele.getAttribute('属性')

设置和移除自定义属性

设置属性：setAttribute(属性名，属性值)

移除属性：removeAttribute(''属性)

    "javascript:;">
 
    <script>
        var a = document.querySelector('a');
        //获取内置属性
        console.log(a.href); //javascript:;
        //给a标签设置自定义属性
        a.setAttribute('myAttri',1);
        //获取自定义属性
        console.log(a.getAttribute('myAttri'));//输出 1
        console.log(a.myAttri);//undefined 此方式找不到
        //移除属性
        a.removeAttribute('myAttri');
        console.log(a.getAttribute('myAttri')); //null
 
    script>

总结：要是标签自带的属性，使用原先的方式，要是自定义属性，推荐使用新的方式。

H5自定义属性说明

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

自定义属性获取是通过getAttribute('属性')的方式获取。

但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性，可读性差，所有，在H5中设置了新的规范。

 1.设置H5自定义属性

H5规定自定义属性以 ' data- '开头做为属性名并且赋值。(直接在标签中声明)

例如 

2.获取H5自定义属性

①兼容性获取：ele.getAttribute('data-自定义属性名');

②H5新增ele.dataset.自定义属性名 或ele.dataset['自定义属性名']

 
"Tom">
<script>
var div = document.querySelector('div');
 
//H5新增方式获取元素
console.log(div.dataset.name);
console.log(div.dataset['name']);
 
script>

案例：tab栏切换 

案例说明：如图，点击上方菜单栏，下方显示对应模块内容。

 

代码实现（使用自定义属性）

 HTML代码

    
"fater">
        <div class="title_list">
            <ul>
                <li class="bkcl">商品介绍li>
                <li>规格与包装li>
                <li>售后保障li>
                <li>商品评价(数量)li>
                <li>手机社区li>
            ul>
        div>
        <div class="con">
            <div class="item" style="display: block;">商品介绍-模块内容div>
            <div class="item">规格与包装-模块内容div>
            <div class="item">售后与保障-模块内容div>
            <div class="item">商品评价-模块内容div>
            <div class="item">手机社区-模块内容div>
        div>

CSS代码

JavaScript代码