this

1.this

this：这个

this：特殊对象，指向当前当用函数的对象（this没有一个固定的指向，所处的位置不同，代表的值不一样，取决于当前调用函数的对象）

在事件函数中this指向触发事件的对象(点谁就是谁)

var  oBtns = document.getElementsByTagName("button");
        
//循环给button添加点击事件
for(var i = 0;i<oBtns.length;i++){
    oBtns[i].onclick = function(){
        console.log(this.innerHTML); //this--当前被点击的标签
    }
}

2.自定义属性

// 自定义属性：自己定义
// 固有属性：系统提供的
var oDiv = document.getElementsByTagName("div");

console.log(oDiv[0].tag); //unfined  暂时获取不到直接写在标签上的自定义属性

//1.在js中添加自定义属性 标签.属性名
oDiv[0].tag = true;
console.log(oDiv[0].tag);

自定义属性应用场景

• 多个开关效果

  //1.获取元素
  var oDiv = document.getElementsByTagName("div");
  
  for(var i = 0;i<oDiv.length;i++){
      //给每一个标签都添加一个属于自己的标识
      oDiv[i].tag = true;
      oDiv[i].onclick = function(){
          if(this.tag == true){ //被点击的标签的标识
              //被点击标签的高度
              this.style.height = "100px";
              this.tag = false;
          }else{
              //被点击标签的高度
              this.style.height = "40px";
              this.tag = true;
          }
      }
  }
  

• 下标对应效果

<script>
 var arr = ["pink","skyblue","red","green"];
//[button button   button button]  下标对应
var oBtns = document.getElementsByTagName("button");

// oBtns[0].index = 0;
// oBtns[1].index = 1;
// oBtns[2].index = 2;
// oBtns[3].index = 3;


//1.点击对应的按钮，切换对应的皮肤
for(var i=0;i<oBtns.length;i++){
    oBtns[i].index = i; //把标签的下标作为属性存储在标签上
    oBtns[i].onclick = function(){
        console.log(this.index); //对应的标签，通过this.index获取对应的下标
        document.body.style.background = arr[this.index]; //下标
    }
}
</script>