一、为何要自定义属性？

因为html原生并没有给我们一些像要的属性，而我们可以给标签添加自己定义的属性，目的是为了存储一些数据。

二、自定义属性的2种方式

第1种：直接在标签中添加想要的属性

例如：

<ul id="uu">
    <li score="10" >小明的成绩</li>
    <li score="20" >小红的成绩</li>
    <li score="30" >小黑的成绩</li>
    <li score="40" >小白的成绩</li>
    <li score="50" >小蓝的成绩</li>
</ul>

要想获取其属性的值，是没办法直接"对象.属性"来获取的，因为js获取的对象说到底是DOM对象，而DOM对象中是没有自定义属性的，所以想直接通过"对象.属性"来获取其属性的值，是并不可以的。
如果想要获取这个属性的值,则需要使用

getAttribute(“自定义属性的名字”)；

方法才能获取这个属性的值。

  //获取所有的li标签
  var list=document.getElementsByTagName("li");
  for(var i=0;i<list.length;i++){
    list[i].onclick=function () {
      //alert(this.score);//不能
      //可以
      alert(this.getAttribute("score"));
    };
  }

第2种：点语法：标签对象.自定义属性=“自定义属性值”

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<div id="1"></div>
	</body>
	<script>
		var divObj = document.getElementById("1");
		divObj.name = "dv";
	</script>

</html>

PS:这个方法可行的，但是不知道为什么在HTML结构中显示不出来，有时候做的一些案例就可以在结构中显示出。有知道原因的小伙伴望告知噢~

第3种：设置自定义属性:setAttribute(“属性的名字”,“属性的值”);

	<ul id="uu">
	    <li>小明的成绩</li>
	    <li>小红的成绩</li>
	    <li>小黑的成绩</li>
	    <li>小白的成绩</li>
	    <li>小蓝的成绩</li>
	</ul>

<script>
    //根据id获取ul标签，并且获取该标签所有的li
    var list = my$("uu").getElementsByTagName("li");
    //遍历循环
    for (var i = 0; i < list.length; i++) {
        //为每个li添加自定义属性
        //list[i].score = (i+1)*10;  //此方式自定义的属性在DOM对象，而不是在标签中, 是不可行的
        list[i].setAttribute("score", (i + 1) * 10);
        //点击每个li标签，显示对应的自定义属性值
        list[i].onclick = function () {
            alert(this.getAttribute("score"));
        }
    }
</script>

三、移除自定义属性

移除自定义属性:removeAttribute(“属性的名字”)

 //点击按钮移除元素的自定义属性
  my$("btn").onclick=function () {
    //my$("dv").removeAttribute("score");
    //移除元素的类样式
    //my$("dv").className="";  
    //也可以移除元素的自带的属性     //值没有了,但是属性还是有的
    my$("dv").removeAttribute("class");  //也可以移除原有的属性
  };