每日一条js之获取，删除，添加（改变）节点上的自定义属性

在html中可以在元素上设置不同的属性，这里我们把任意设置的属性和data-name开头的分开来看

js中取到这些属性的方法有如下

方法一：nodename.dataset

这个方法是针对data-开头的属性

<div id="box" s="200" data-index="111">危险流浪者</div>
var Box=document.getElementById('box');
Btn.οnclick=function(){
    console.log(Box.dataset)
}

打印出来的是一个json对象里面存放的是已经设置好的data-开头的对象

方法二：getAttribute

这个方法可以获取节点上所有的属性，接着上面的案例

console.log(Box.getAttribute('s'))//200
console.log(Box.getAttribute)//ƒ getAttribute() { [native code] }

这里打印两个的原因是为了讲述这个方法的使用方法。传入属性名直接打印属性的值，不传入属性名的情况下则不会打印出内容

改变和增加节点属性

方法：setAttribute

增加的话要写入属性名和值setAttribute（‘属性名’，值）

改变setAttribute（‘原属性名’，值）

删除节点上的属性

方法：removeAttribute（‘属性名’）

注意：这里所有方法里的属性名都要用引号包起来