【DOM BOM】笔记２日事件基础操作元素

最新推荐文章于 2022-09-09 23:05:57 发布

索西引擎

最新推荐文章于 2022-09-09 23:05:57 发布

阅读量162

点赞数

分类专栏： # HTML&CSS&JavaScript&Vue 文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_39518871/article/details/109179908

版权

HTML&CSS&JavaScript&Vue 专栏收录该内容

47 篇文章

订阅专栏

4 操作元素

JavaScript 的DOM操作可以改变网页内容、结构和样式。我们可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性。

4.1 改变元素`内容`

4.1.1 `innerText`

从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉。

  element.innerText

<body>
  <button>显示当前系统时间</button>
  <div>某个时间</div>
  <p>123456</p>
  <script>
    // 点击按钮，div里面的文字会发生变化
    // 1. 获取元素
    var btn = document.querySelector('button');
    var div = document.querySelector('div');
    // 2. 注册事件
    btn.onclick = function() {
      // div.innerText = '2020-10-14';
      div.innerText = getDate();
    }
    function getDate() {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() +1;
      var dates = date.getDate();
      var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      var day = date.getDay();
      return '今天是：' + year + '年' + month + '月' + dates + '日' + arr[day];
    }
    var p = document.querySelector('p');
    p.innerText = getDate();
  </script>
</body>

4.1.2 `innerHTML`

起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行。

  element.innerHTML

4.1.3 两者的区别

前者不识别html标签

  <body>
    <div class="div1"></div>
    <div class="div2"></div>
    <script>
      // innerText 不识别html标签 非标准
      var div1 = document.querySelector(".div1");
      div1.innerText = '<strong>今天是：</strong> 2020';
      // innerHTML 识别html标签 W3C标准
      var div2 = document.querySelector(".div2");
      div2.innerHTML = '<strong>今天是：</strong> 2020';
    </script>
  </body>

在这里插入图片描述

后者保留空格和换行

  <body>
    <p>
      我是文字
      <span>123</span>
    </p>
    <script>
      // 这两个属性是可读写的，因此可以获取元素里面的内容
      var p = document.querySelector('p');
      console.log(p.innerText);
      console.log(p.innerHTML);
    </script>
  </body>

在这里插入图片描述

4.2 修改`元素属性`

修改元素属性 src、href
修改id、alt、title

  <body>
    <button id="ldh">刘德华</button>
    <button id="zxy">张学友</button>
    <img src="rabbit01.jpg" alt="" title="刘德华">
    <script>
      var ldh = document.getElementById('ldh');
      var zxy = document.getElementById('zxy');
      var img = document.querySelector('img');
      zxy.onclick = function() {
        img.src = "rabbit02.jpg";
        img.title = "张学友";
      }
      ldh.onclick = function() {
        img.src = 'rabbit01.jpg';
        img.title = "刘德华";
      }
    </script>
  </body>

4.2.1 案例：分时显示不同图片，显示不同问候语

根据系统不同时间来判断，所以需要用到日期内置对象。
利用多分支语句来设置不同的图片和问候语。
需要一个图片，并且根据时间修改图片，就需要用到操作元素的 src 属性。
需要一个div元素，显示不同问候语，修改元素内容即可。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      img {
        width: 300px;
      }
    </style>
  </head>
  <body>
    <img src="rabbit01.jpg" alt="">
    <div>上午好</div>
    <script>
      var img = document.querySelector('img');
      var div = document.querySelector('div');
      var date = new Date();
      var h = date.getHours();
      if(h < 12) {
        img.src = 'rabbit01.jpg';
        div.innerHTML = '上午好，好好写代码。';
      } else if(h < 18) {
        img.src = 'rabbit02.jpg';
        div.innerHTML = '下午好，好好写代码。';
      } else {
        img.src =  'image04.png';
        div.innerHTML = '晚上好，好好写代码。';
      }
    </script>
  </body>
</html>

4.3 修改`表单属性`

利用DOM可以操作如下表单元素的属性：type、value、checked、selected、disabled。

  <body>
    <button>按钮</button>
    <input type="text" value="输入内容">
    <script>
      // 1. 获取元素
      var btn = document.querySelector('button');
      var input = document.querySelector('input');
      // 2. 注册事件 处理程序
      btn.onclick = function() {
        input.value = 'Clicked！';
        // 如果想要某个按钮被禁用，即点击之后不能再点击了
        // 方法一
        // btn.disabled = true;
        // this 指向的是事件函数的调用者
        this.disabled = true;
      }
    </script>
  </body>

在这里插入图片描述

案例：仿京东显示密码

点击按钮将密码框换为文本框，并可以查看密码明文。
在这里插入图片描述
输入密码，点击右边的图片。

输入密码，点击右边的图片。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
     .box {
       position: relative;
       width: 400px;
       border-bottom:  1px solid #ccc;
       margin: 100px auto;
     }
     .box input {
       width: 370px;
       height: 30px;
       border: 0;
       outline: none;
     }
     .box img {
       position: absolute;
       top: 10px;
       right: 1px;
       width: 24px;
       height: 14px;
     }
    </style>
  </head>
  <body>
    <div class="box">
      <label for="">
        <img src="rabbit01.jpg" alt="" id="eye">
      </label>
      <input type="password" name="" id="pwd">
    </div>
    <script>
      // 1. 获取元素
      var eye = document.getElementById('eye');
      var pwd = document.getElementById('pwd');
      var flag = 0;
      // 2. 注册事件 处理程序
      eye.onclick = function() {
        if (flag == 0) {
          pwd.type = 'text';
          eye.src = 'rabbit02.jpg';
          flag = 1;
        } else {
          pwd.type = 'password';
          eye.src = 'rabbit01.jpg';
          flag = 0;
        }
      }
    </script>
  </body>
</html>

4.4 修改`样式属性`

我们可以通过JS修改元素的大小、颜色、位置等样式。

1. element.style     行内样式操作
2. element.className 类名样式操作

【注意事项】

JS 里面的样式采取驼峰命名法，比如fontSize、backgroundColor。
JS 修改 style 样式操作，产生的是行内样式，CSS权重比较高。

4.4.1 `style`

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div></div>
    <script>
      // 1. 获取元素
      var div = document.querySelector("div");
      // 2. 注册事件 处理程序
      div.onclick = function () {
        // div.style里面的属性采取 驼峰命名法
        this.style.backgroundColor = "purple";
        this.style.width = "250px";
      };
    </script>
  </body>
</html>

【案例】仿淘宝关闭二维码

核心思路：利用样式的显示和隐藏完成，display: none; 隐藏元素 display: block; 显示元素。
点击按钮，就让这个二维码盒子隐藏起来即可。
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      position: relative;
      width: 74px;
      height: 88px;
      border: 1px solid #ccc;
      margin: 100px auto;
      font-size: 12px;
      text-align: center;
      color: #f40;
    }
    .box img {
      width: 60px;
      margin-top: 5px;
    }
    .close-btn {
      position: absolute;
      top: -1px;
      left: -16px;
      width: 14px;
      height: 14px;
      border: 1px solid #ccc;
      line-height: 14px;
      font-family: Arial, Helvetica, sans-serif;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="box">
    淘宝二维码
    <img src="rabbit01.jpg" alt="">
    <i class="close-btn">x</i>
  </div>
  <script>
    // 1. 获取元素
    var btn = document.querySelector('.close-btn');
    var box = document.querySelector('.box');
    // 2. 注册事件
    btn.onclick = function() {
      box.style.display = 'none';
    }
  </script>
</body>
</html>

【案例】循环精灵图背景

【案例】显示隐藏文本框内容

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input type="text" value="手机" name="" id="">
  <script>
    // 1. 获取元素
    var text = document.querySelector('input');
    // 2. 注册事件 获得焦点事件 onfocus
    text.onfocus = function() {
      // console.log('得到了焦点');
      if(this.value === '手机') {
        this.value = '';
      }
      // 获得焦点需要文本框里面的文字颜色变深
      this.style.color = '#333';
    }
    // 3. 注册事件，失去焦点事件 onblur
    text.onblur = function() {
      // console.log('失去了焦点');
      if(this.value === '') {
        this.value = '手机';
      }
      // 失去焦点需要文本框里面的文字颜色变浅
      this.style.color = '#999';
    }
  </script>
</body>
</html>

4.4.2 `className`

如果样式修改较多，可以采取操作类名方式更改元素样式。
class因为是个保留字，因此使用className来操作元素类名属性。
className会直接更改元素的类名，会覆盖原先的类名。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: pink;
    }
    .change {
      background-color: purple;
      color: #fff;
      font-size: 25px;
      margin-top: 100px;
    }
  </style>
</head>
<body>
  <div class="first">文本</div>
  <script>
    // 1. 使用 element.style 获得修改元素样式。如果样式比较少或者功能简单的情况下使用。
    var test = document.querySelector('div');
    test.onclick = function() {
      // 2. 我们可以通过修改元素的className更改元素的样式，适合于样式较多或者功能复杂的情况。
      // 3. 如果想要保留原先的类名，我们可以使用多类名选择器
      this.className = 'first change';
    }
  </script>
</body>
</html>

【案例】密码框格式提示错误信息

要求：用户离开密码框，里面输入个数不是 6 ~ 16，则提示错误信息，否则提示输入正确信息。

4.5 操作元素总结

在这里插入图片描述

4.6 排他思想

如果有同一组元素，我们想要某一个元素实现某种样式，需要利用到循环的排他思想算法：

所有元素全部清除样式。
给当前元素设置样式。
注意顺序不能颠倒，首先干掉其他人，再设置自己。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
  <button>按钮4</button>
  <button>按钮5</button>
  <script>
    // 1. 获取所有按钮元素
    var btns = document.getElementsByTagName('button');
    for (var i = 0; i < btns.length; i++) {
      btns[i].onclick = function() {
        // (1) 我们先把所有的按钮背景颜色去掉
        for (var i = 0; i < btns.length; i++) {
          btns[i].style.backgroundColor = '';
        }
        // (2) 然后才让当前的元素背景颜色为pink
        this.style.backgroundColor = 'pink';
      }
    }
  </script>
</body>
</html>

【案例】百度换肤

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      background: url(travel01.jpg) no-repeat center top;
    }
    li {
      list-style: none;
    }
    .baidu {
      overflow: hidden;
      margin: 100px auto;
      background-color: #fff;
      width: 410px;
      padding-top: 3px;
    }
    .baidu li {
      float: left;
      margin: 0 1px;
      cursor: pointer;
    }
    .baidu img {
      width: 100px;
    }
  </style>
</head>
<body>
  <ul class="baidu">
    <li><img src="travel01.jpg" alt=""></li>
    <li><img src="travel02.jpg" alt=""></li>
    <li><img src="travel03.jpg" alt=""></li>
    <li><img src="travel04.jpg" alt=""></li>
  </ul>
  <script>
    // 1. 获取元素
    var imgs = document.querySelector('.baidu').querySelectorAll('img');
    // 2. 注册事件
    for (var i = 0; i < imgs.length; i++) {
      imgs[i].onclick = function() {
        document.body.style.backgroundImage = 'url('+ this.style +')';
      }
    }
  </script>
</body>
</html>

【案例】表格隔行变色效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    table {
      width: 800px;
      margin: 100px auto;
      text-align: center;
      border-collapse: collapse;
      font-size: 14px;
    }
    thead tr {
      height: 30px;
      background-color: skyblue;
    }
    tbody tr {
      height: 30px;
    }
    tbody td {
      border-bottom: 1px solid #d7d7d7;
      font-size: 12px;
      color: blue;
    }
    .bg {
      background-color: pink;
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>代码</th>
        <th>名称</th>
        <th>最新公布净值</th>
        <th>累计净值</th>
        <th>前单位净值</th>
        <th>净值增长率</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>003526</td>
        <td>农银金穗3个月定期开放债卷</td>
        <td>1.075</td>
        <td>1.079</td>
        <td>1.074</td>
        <td>+0.047%</td>
      </tr>
      <tr>
        <td>003526</td>
        <td>农银金穗3个月定期开放债卷</td>
        <td>1.075</td>
        <td>1.079</td>
        <td>1.074</td>
        <td>+0.047%</td>
      </tr>
      <tr>
        <td>003526</td>
        <td>农银金穗3个月定期开放债卷</td>
        <td>1.075</td>
        <td>1.079</td>
        <td>1.074</td>
        <td>+0.047%</td>
      </tr>
    </tbody>
  </table>
  <script>
    // 1. 获取元素 获取的是 tbody 里面所有的行
    var trs = document.querySelector('tbody').querySelectorAll('tr');
    // 2. 利用循环绑定注册事件
    for (var i = 0; i < trs.length; i++) {
      // 3. 鼠标经过事件 onmouseover
      trs[i].onmouseover = function() {
        this.className = 'bg';
      }
      // 4. 鼠标离开事件 onmouseout
      trs[i].onmouseout = function() {
        this.className = '';
      }
    }
  </script>
</body>
</html>

在这里插入图片描述

【案例】表单全选取消全选

全选和取消全选做法：让下面所有复选框的checked属性（选中状态）跟随全选按钮即可。
下面复选框需要全部选中，上面全选才能选中做法：给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没有没选中的，如果有一个没选中，上面全选就不选中。
可以设置一个变量，来控制全选是否选中。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="wrap">
      <table>
        <thead>
          <tr>
            <th><input type="checkbox" name="" id="j_cbAll" /></th>
            <th>商品</th>
            <th>价钱</th>
          </tr>
        </thead>
        <tbody id="j_tb">
          <tr>
            <td>
              <input type="checkbox" />
            </td>
            <td>iPhone8</td>
            <td>8000</td>
          </tr>
          <tr>
            <td>
              <input type="checkbox" />
            </td>
            <td>iPad Pro</td>
            <td>5000</td>
          </tr>
          <tr>
            <td><input type="checkbox" /></td>
            <td>iPad Air</td>
            <td>2000</td>
          </tr>
          <tr>
            <td><input type="checkbox" /></td>
            <td>Apple Watch</td>
            <td>2000</td>
          </tr>
        </tbody>
      </table>
    </div>
    <script>
      // 获取元素
      var j_cbAll = document.getElementById('j_cbAll');
      var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');
      // 注册事件
      j_cbAll.onclick = function() {
        for (var i = 0; i < j_tbs.length; i++) {
          j_tbs[i].checked = this.checked;
        }
      }
      // 下面复选框需要全部选中，上面全选才能选中做法
      for (var i = 0; i < j_tbs.length; i++) {
        j_tbs[i].onclick = function() {
          var flag = true;
          // 每次点击下面的复选框，都要检查这四个小按钮是否全被选中
          for (var i = 0; i < j_tbs.length; i++) {
            if (!j_tbs[i].checked) {
              flag = false;
              break;
            }
          }
          j_cbAll.checked = flag;
        }
      }
    </script>
  </body>
</html>

在这里插入图片描述

获取自定义属性

获取属性值

方法1：element.属性; 获取内置属性值（元素本身自带的属性）。
方法2：element.getAttribute('属性'); 主要获得自定义的属性（标准），即我们程序员自定义的属性。

<body>
  <div id="demo" index="1"></div>
  <script>
    var div = document.querySelector('div');
    // 1. 获取元素的属性值
    // (1) element.属性
    console.log(div.id);
    // (2) element.getAttribute('属性');
    console.log(div.getAttribute('id'));
    console.log(div.getAttribute('index'));
  </script>
</body>

设置属性值

方法1：element.属性 = '值'; 。
方法2：element.getAttribute('属性', '值'); 。

<body>
  <div id="demo" index="1" class="nav"></div>
  <script>
    var div = document.querySelector('div');
    // 1. 获取元素的属性值
    // (1) element.属性
    console.log(div.id);
    // (2) element.getAttribute('属性');
    console.log(div.getAttribute('id'));
    console.log(div.getAttribute('index'));
    // 2. 设置元素属性值
    // (1) element.属性 = '值';
    div.id = 'test';
    div.className = 'navs'
    // (2) element.setAttribute('属性', '值'); 主要针对自定义属性
    div.setAttribute('index', 2);
    div.setAttribute('class', 'footer');
  </script>
</body>

移除属性

element.removeAttribute('属性');

<body>
  <div id="demo" index="1" class="nav"></div>
  <script>
    var div = document.querySelector('div');
    // 1. 获取元素的属性值
    // (1) element.属性
    console.log(div.id);
    // (2) element.getAttribute('属性');
    console.log(div.getAttribute('id'));
    console.log(div.getAttribute('index'));
    // 2. 设置元素属性值
    // (1) element.属性 = '值';
    div.id = 'test';
    div.className = 'navs'
    // (2) element.setAttribute('属性', '值'); 主要针对自定义属性
    div.setAttribute('index', 2);
    div.setAttribute('class', 'footer');
    // 3. 移除属性
    div.removeAttribute('index');
  </script>
</body>

【案例】tab栏切换

当鼠标点击上面的选项卡（tab），下面内容跟随变化。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    li {
      list-style: none;
    }
    .tab_list .current {
      background-color: #c81623;
      color: #fff;
    }
    .item_info {
      padding: 20px 0 0 20px;
    }
    .item {
      display: none;
    }
  </style>
</head>
<body>
  <div class="tab">
    <div class="tab_list">
      <ul>
        <li class="current">商品介绍</li>
        <li>规格与包装</li>
        <li>售后保障</li>
        <li>商品评价</li>
        <li>手机社区</li>
      </ul>
    </div>
    <div class="tab_con">
      <div class="item">商品介绍模块内容</div>
      <div class="item">规格包装模块内容</div>
      <div class="item">售后保障模块内容</div>
      <div class="item">商品评价模块内容</div>
      <div class="item">手机社区模块内容</div>
    </div>
  </div>
  <script>
    // 获取元素
    var tab_list = document.querySelector('.tab_list');
    var lis = tab_list.querySelectorAll('li');
    var items = document.querySelectorAll('.item');
    for(var i = 0; i < lis.length; i++) {
      // 开始给5个小li设置索引号
      lis[i].setAttribute('index', i);
      lis[i].onclick = function() {
        for(var i = 0; i < lis.length; i++) {
          lis[i].className = '';
        }
        this.className = 'current';
        var index = this.getAttribute('index');
        for (var i = 0; i < items.length; i++) {
          items[i].style.display = 'none';
        }
        items[index].style.display = 'block';
      }
    }
  </script>
</body>
</html>

H5自定义属性

自定义属性：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
自定义属性获取是通过 getAttribute('属性'); 获取，但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。
H5给我们新增了自定义属性规范：

设置H5自定义属性

H5规定自定义属性 data- 开头作为属性名并且赋值。例如：<div data-index="1"></div> 或者使用JS设置 element.setAttribute('data-index', 2);。

获取H5自定义属性

兼容性获取 element.getAttribute('data-index');。
H5新增element.dataset.index或者element.dataset['index']，IE 11 才开始。

<body>
  <div getTime="20" data-index="2" data-list-name="andy"></div>
  <script>
    var div = document.querySelector('div');
    console.log(div.getAttribute('getTime'));
    div.setAttribute('data-time', 20);
    console.log(div.getAttribute('data-index'));
    console.log(div.getAttribute('data-list-name'));
    // H5新增的获取自定义属性的方法
    // dataset 是一个集合，里面存放了所有以data开头的自定义属性
    console.log(div.dataset);
    console.log(div.dataset['index']);
    console.log(div.dataset.index);
    // 如果自定义属性里面有多个 - 连接的单词，我们获取的时候采取驼峰命名法
    console.log(div.dataset.listName); 
    console.log(div.dataset['listName']);
  </script>
</body>