10.12.JS-DOM(一)

1. DOM

1. DOM --> Document Object Model
2. DOM定义了表示和修改文档所需的方法。DOM对象即宿主对象，由浏览器厂商定义，用来操作html和xml功能的一类对象的集合。也有人称DOM是对HTML以及XML的标准编程接口

2. dom对象

  <div></div>
  <script>
    // dom对象
    var div = document.getElementsByTagName('div')[0];
    div.style.width = '100px';
    div.style.height = '100px';
    div.style.backgroundColor = 'red';
  </script>

3. dom点击事件

  <div></div>
  <script>
    // dom对象
    var div = document.getElementsByTagName('div')[0];
    div.style.width = '100px';
    div.style.height = '100px';
    div.style.backgroundColor = 'red';
    var count = 0;
    div.onclick = function () {
      count++;
      if(count % 2 == 1){
        this.style.backgroundColor = 'black';
      }else{
        this.style.backgroundColor = 'red';
      }
    }
  </script>

4. class名操纵css变化

  <style>
    div {
      background-color: red;
    }

    .active {
      background-color: black;
    }
  </style>
  <div></div>
  <script>
    // dom对象
    var div = document.getElementsByTagName('div')[0];
    div.style.width = '100px';
    div.style.height = '100px';
    var count = 0;
    div.onclick = function () {
      count++;
      if (count % 2 == 1) {
        this.className = 'active';
      } else {
        this.className = '';
      }
    }
  </script>

5. 选项卡

• 闭包解决异步代码执行

  <style>
    .content {
      background-color: red;
    }

    .active {
      background-color: yellow;
    }
    .content {
      display: none;
    }
  </style>
  <button class="active">1</button>
  <button>2</button>
  <button>3</button>
  <div class="content" style="display: block">11111</div>
  <div class="content">222222</div>
  <div class="content">3333333</div>
  <div></div>
  <script>
    // dom对象
    var btn = document.getElementsByTagName('button');
    var div = document.getElementsByClassName('content');
    for (var i = 0; i < btn.length; i++) {
      (function (n) {
        btn[n].onclick = function () {
          for (var j = 0; j < btn.length; j++) {
            btn[j].className = "";
            div[j].style.display = "none";
          }
          this.className = 'active';
          div[n].style.display = "block";
        }
      }(i))
    }
  </script>

6. div移动

  <style>
    .btn {
      width: 100px;
      height: 100px;
      background: linear-gradient(to left, #999, #000, #432, #fcc);
      position: fixed;
      right: 0;
      top: 50%;
      text-align: center;
      line-height: 50px;
      color: #fff;
      font-size: 25px;
      font-family: Arial, Helvetica, sans-serif;
    }
  </style>
  <button class="btn">加速</button>
  <script>
    var btn = document.getElementsByTagName('button')[0];
    var div = document.createElement('div');
    document.body.appendChild(div);
    div.style.width = "100px";
    div.style.height = "100px";
    div.style.backgroundColor = "red";
    div.style.position = "absolute";
    div.style.left = 0;
    div.style.top = 0;
    var speed = 5;
    var timer = setInterval(function () {
      speed += speed / 20;
      div.style.left = parseInt(div.style.left) + speed + "px";
      div.style.top = parseInt(div.style.top) + speed + "px";
      if (parseInt(div.style.top) > 200 && parseInt(div.style.top) > 200) {
        clearInterval(timer);
      }
    }, 40)
    btn.onclick = function(){
      speed++;
    }
    document.onkeydown = function (e) {
      switch (e.which) {
        case 38:
          div.style.top = parseInt(div.style.top) - speed + 'px';
          break;
        case 40:
          div.style.top = parseInt(div.style.top) + speed + 'px';
          break;
        case 37:
          div.style.left = parseInt(div.style.left) - speed + 'px';
          break;
        case 39:
          div.style.left = parseInt(div.style.left) + speed + 'px';
          break;
        default:
          break;
      }
    }
  </script>

7. 九宫格样式,setAttribute,getAttribute,

  <style>
    * {
      margin: 0;
      padding: 0;
    }
    ul {
      width: 100px;
      height: 100px;
    }
    li {
      display: block;
      float: left;
      width: 10px;
      height: 10px;
      border: 1px solid #000;
      box-sizing: border-box;
    }
  </style>
  <ul>
    li[img-data="0"]*100
  </ul>
  <script>
    var ul = document.getElementsByTagName('ul')[0];
    ul.onmouseover = function (e) {
      console.log(e);
      var event = e || window.event;
      var target = event.target || event.srcElement;
      target.style.backgroundColor = "rgb(0,255," + target.getAttribute('img-data') + ")";
      target.setAttribute('img-data', parseInt(target.getAttribute('img-data')) + 6);
    }
  </script>