HTML5 自定义属性 data- 用于数据渲染时

HTML5 自定义属性；

但是在dom中，给元素节点添加自定义的属性节点，html5中要求自定义属性节点应该为‘data-’开头，比如自定义属性abc，应该写成：data-abc；

再要使用时就通过dataset属性即可操作了：

示例如下：

    <a href="" data-abc='123'></a>

    <script>

        const aEle = document.querySelector("a");

        console.log(aEle.dataset.abc);//123

    </script>

//////////////////////////

自定义属性一般可以用在从数据库拿到数据，再渲染到页面上时，自定义一个属性data-_id或者data-_index；因_id从数据库拿出来都是唯一的，所以在对页面进行操作时，十分方便拿到节点进行操作

示例如下：

async getStudents(){

        const data = await studentsService.getStudents(pager);

        Object.assign(pager,data);

        let content = pager.row.map((v, i) => `

        <tr>

            <td style="width:50px;display:inline-block;overflow:hidden;">${v._id}</td>

            <td>${v.name}</td>

            <td><img style="width:20px;height:20px;" src="${v.headImg}"></td>

            <td>${v.age}</td>

            <td>${v.gender}</td>

            <td>${v.grade}</td>

            <td style="width:100px;display:inline-block;overflow:hidden;white-space: nowrap;">${v.addr}</td>

            <td>${v.phone}</td>

            <td>${v.clazz.className}</td>

            <td><input data-_id="${v._id}" type="button" value="删除"><input data-index="${i}" type="button" value="更新"></td>

        </tr>`).join("");

        $(".stuList tbody").html(content);

    }

 

 let _id = this.dataset._id; //十分方便获得需要操作的节点的id