自定义属性操作

在html标签中可以添加的自定义属性,通过setAttribute()设置自定义属性值，getAttribute()获取自定义属性值

• getAttribute() 获取标签行内属性
  
• setAttribute() 设置标签行内属性
  
• removeAttribute() 移除标签行内属性
  

//元素.属性 和 getAttribute()区别：
1.元素.属性可以获取标签封装的dom对象中现有的属性值
2.getAttribute()可以获取任意的行内属性(写在标签中的属性)

<ul id="uu">
  <li score="10">张三</li>
  <li score="20">李四</li>
  <li score="30">王五</li>
  <li score="40">赵六</li>
  <li score="50">朱琪</li>
</ul>
<script>
  //当前的li标签本身没有score这个属性,这个属性是程序员自己添加的。
    //因此在构建此标签的文档对象的时候，标签的score属性不会被封装到dom对象中
  //score这个属性是自定义属性，为了存储一些数据
  //在html标签中添加的自定义属性,如果想要获取这个属性的值,
  //需要使用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"));
    };
  }
</script>

    <ul id="uu">
        <li >张三</li>
        <li >李四</li>
        <li >王五</li>
        <li >赵六</li>
        <li >朱琪</li>
    </ul>
    <script>
        //总结:设置自定义属性:setAttribute("属性的名字","属性的值");
        //获取自定义属性的值:getAttribute("属性的名字")
         //根据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>

<div id="dv" score="10" class="cls"></div>
<script>
  //移除自定义属性:removeAttribute("属性的名字")
  //点击按钮移除元素的自定义属性
  my$("btn").onclick=function () {
    //my$("dv").removeAttribute("score");
    //还可以通过removeAttribute()移除元素的类样式
    //my$("dv").className="";  //值没有了,但是属性还是有的
    my$("dv").removeAttribute("class"); //移除元素的自带的属性
  };
</script>