排他思想

给所有元素全部清除样式（干掉其他人）
给当前元素设置样式（留下自己）
顺序不能颠倒，先干掉其他人，再设置自己

换皮肤

      * {
        margin: 0;
        padding: 0;
      }
      ul {
        list-style: none;
      }
      body {
        background: url(./img/1.jpg) no-repeat center top;
      }
      .box {
        width: 410px;
        margin: 200px auto;
      }
      .box li {
        float: left;
      }
      .box img {
        width: 100px;
      }
    </style>
  </head>
  <body>
    <ul class="box">
      <li>
        <img src="./img/1.jpg" alt="" />
      </li>
      <li>
        <img src="./img/2.jpg" alt="" />
      </li>
      <li>
        <img src="./img/3.jpg" alt="" />
      </li>
      <li>
        <img src="./img/4.jpg" alt="" />
      </li>
    </ul>
    <script>
      // 1 获取元素
      var imgArr = document.querySelector('.box').querySelectorAll('img')
      // console.log(imgArr)
      // 2循环注册事件
      for (var i = 0; i < imgArr.length; i++) {
        imgArr[i].onclick = function () {
          // this就是点击的当前图片  this.src 当前的图片的路径
          // this.src赋值给body
          document.body.style.backgroundImage = 'url(' + this.src + ')'
        }
      }

隔行变色

 table {
      width: 500px;
      margin: 100px auto;
      text-align: center;
      font-size: 14px;
      border-collapse: collapse;
      /* border: 1px solid red; */
    }

    td {
      height: 30px;
      border-bottom: 1px solid #ddd;
    }

    .bg {
      background-color: darkcyan
    }
  </style>
</head>

<body>
  <table>
    <tr>
      <td>2022.8.13</td>
      <td>系统开发业务</td>
      <td>100万</td>
      <td>600万</td>
    </tr>
    <tr>
      <td>2022.8.13</td>
      <td>系统开发业务</td>
      <td>100万</td>
      <td>600万</td>
    </tr>
    <tr>
      <td>2022.8.13</td>
      <td>系统开发业务</td>
      <td>100万</td>
      <td>600万</td>
    </tr>
    <tr>
      <td>2022.8.13</td>
      <td>系统开发业务</td>
      <td>100万</td>
      <td>600万</td>
    </tr>
  </table>

  <script>
    var oTrs = document.querySelectorAll("tr");
    for (var i = 0; i < oTrs.length; i++) {
      oTrs[i].onmouseover = function () {
        this.className = "bg"
      }
      oTrs[i].onmouseout = function () {
        this.className = ""
      }
    }
  </script>

自定义属性操作

获取属性值设置属性值移除属性

 <div id="demo" index="2" class="nav"></div>
    <script>
      var oDiv = document.querySelector('div')
      // 获取元素的属性值
      // element.属性
      console.log(oDiv.id)
      // element.getAttribute("属性")  get得到获取  attribute 属性的意思
      // 我们程序员自己定义的属性
      console.log(oDiv.getAttribute('id'))
      console.log(oDiv.getAttribute('index'))

      // 设置元素属性值
      oDiv.id = 'test'
      oDiv.className = 'navs'
      // element.setAttribute("属性",值)
      oDiv.setAttribute('index', 23)
      oDiv.setAttribute('class', 'footer')
      // 移除属性  removeAttribute(属性)
      oDiv.removeAttribute('index')
    </script>

JavaScript-节点

排他思想

换皮肤

隔行变色

自定义属性操作