DOM学习操作元素1

原创已于 2024-11-09 15:00:07 修改 · 149 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #javascript #开发语言

于 2024-11-03 15:39:43 首次发布

1、修改元素内容：innerText和innerHtml

2、修改元素属性：

① id alt title

② src href

例子：

<body>
  <button class="xi">御姐</button>
  <button class="ha">可爱</button>
  <img src="image/xixi.jpg" alt="">
  <script>
    // 1、获取元素
    var btn_xi = document.querySelector('.xi');
    var btn_ha = document.querySelector('.ha');
    var img = document.querySelector('img');

    // 2、绑定事件/注册事件
    btn_xi.onclick = function () {
      img.src = 'image/xixi.jpg';
    }
    btn_ha.onclick = function () {
      img.src = 'image/haha.jpg';
    }
  </script>
</body>

结果：

3、表单属性修改

表单里面的值文字内容通过 value修改

表单不能再点击disabled

例子：

<body>
  <button>按钮</button>
  <input type="你好的">
  <script>
    var btn = document.querySelector('button');
    var input = document.querySelector('input');
    btn.onclick = function () {
      input.value = '点击率';
      // btn.disabled = true;
      this.disabled = true;//指向的是事件函数的调用者
    }
  </script>
</body>

结果：

4、JS修改元素大小，颜色，位置

elemnt.style 行内样式操作

element.className 类名样式操作

例子：点击鼠标变颜色

  <script>
    var div = document.querySelector('div');
    div.onclick = function () {
      this.style.backgroundColor = 'purple';
    }
  </script>

结果：