前端基础(十)_Dom自定义属性(带案例)

Dom自定义属性

1.1、为什么要用自定义属性

例：很多个 li 点击变颜色。

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>
<script>
    var li = document.getElementsByTagName("li");
    var tag = true;// 多个div时，不能同时改变
    for(var i=0;i<li.length;i++){
   
        li[i].onclick=function(){
   
            if(tag){
   
                this.style.background="red";
                tag=false;
            }else{
   
                this.style.background="blue";
                tag=true;
            }
        }
    }
</script>

上面的例子只能实现点击变成红色、蓝色，但是不能控制单个li改变红色、蓝色

tag控制着整体li点击的下一次颜色，不满足要求，我们要实现，点击每一个，都能来回切换红、蓝，不影响其他的li他们都是独立的。

1.2、自定义属性

针对上面的问题，在有很多个元素情况下使用一个标识肯定是不行的，这里我们要给每一个元素都添加一个属性，表示标识状态，我们叫自定义属性。
自定义属性是指给标签添加已有属性的以外的属性，例如div标签id、class这些属性都是已有的，如果再添加一个tag属性，这就是自定义的。

例1：

<div id="box" class="box" tag="123"></div>
<script>
    var oDiv = document.getElementById('box');
    console.log(oDiv.tag);// undefined  在标签上设置的自定义的属性，点的形式，获取不到，要用到后面讲的attribute方法获取

    oDiv.abc = true;
    console.log(oDiv.abc); // true 能过js添加的属性，可以获取到
</script>

直接在标签上写上自己定义的属性，我们通过js是拿不到的，我们需要使用后续学习的attribute方法获取。

但是怎么解决这个问题呢？

例2 :自定义属性，实现点击改变颜色的操作

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>
<script>
    var li=document.getElementsByTagName("li");
    for(var i=0;i<li.length;i++){
   
        li[i].tag=true;
        li[i].onclick=function(){
   
            // console.log(this);
            if(this.tag){
   
                this.style.background="red";
                this.tag=false;
            }else{
   
                this.style.background="blue";
                this.tag=true;
            }
        }
    }
</script>

这样我们实现啦。
在循环里面，给每一个li元素增加tag属性，赋值为true,

li[i].tag=true;

随后给每一个li增加点击事件，判断tag的值，从而改变dom的某个属性，tag值改变，再次点击，再次判断tag的值，就可以实现了单个li来回切换。

li[i].onclick=function(){
   
    // console.log(this);
      if(this.tag){
   
          this.style.background="red";
          this.tag=false;
      }else{
   
          this.style.background="blue";
          this.tag=true;
      }
}

同时在点击事件里面，我们可以使用this来识别当前的元素。

this指向特点：
①方法函数：对象.方法() ; this->调用方法的对象
②普通函数：( window.) 函数名() this->window
③事件处理函数： oDiv.οnclick= function(){} oDiv.onclick() this->添加事件的元素
④全局中的this指向window对象