1. DOM 获取元素、修改属性（2）之设置/修改 DOM 对象、定时器

J_Tiffany
416 阅读6分钟

3. 设置/修改 DOM 对象

3.1 设置/修改 DOM 元素内容

DOM 对象都是根据标签生成的，所以操作标签本质上就是操作 DOM 对象，就是操作对象使用的 点语法 。

如果想要 修改 标签元素里面的 内容 ，可以使用以下几种方式：

（1）document.write() 方法

document.write() 只能将文本内容 追加 到 </body> 前面的位置，文本中包含的标签会被解析。

示例：

  <body>
    <script>
      document.write('<div>示例</div>')
    </script>
  </body>

image.png

（2）对象.innerText 属性

对象.innerText 属性会将文本内容添加或更新到任意标签位置，文本中包含的标签 不会 被解析。

示例1：

  <body>
    <div></div>
    <script>
      let div = document.querySelector('div')
      div.innerText = '小鱼吐泡泡'
    </script>
  </body>

image.png

示例2：

  <body>
    <div></div>
    <script>
      let div = document.querySelector('div')
      div.innerText = '<span>小鱼吐泡泡</span>'
    </script>
  </body>

image.png

（3）对象.innerHTML 属性

对象.innerHTML 属性会将文本内容添加或更新到任意标签位置，文本中包含的标签 会 被解析。

  <body>
    <div></div>
    <script>
      let div = document.querySelector('div')
      div.innerHTML = '<span>小鱼吐泡泡</span>'
    </script>
  </body>

image.png

实例：将随机抽取的名字显示到指定的标签内部

分析：

  • 首先写好标签样式，获取到 div 元素；
  • 然后封装随机函数；
  • 通过 innerHTML 或 innerText 将名字写入元素内部
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 100px;
        height: 40px;
        background-color: #74f870;
        line-height: 40px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    抽中了:
    <div></div>

    <script>
      let div = document.querySelector('div')

      let arr = ['灵犀', '小明', '小红', '李四', '张三']

      function getRandom(min, max) {
        let r = Math.floor(Math.random() * (max - min + 1)) + min
        return r
      }

      let name = arr[getRandom(0, arr.length - 1)]

      div.innerHTML = name
    </script>
  </body>
</html>

image.png

3.2 设置/修改 DOM 元素常用属性

还可以通过 JS 设置/修改标签元素的属性，比如通过 title 修改标题，常见的属性有 href、title、src 等

语法：对象.属性 = 值 ：

  <body>
    <div></div>

    <script>
      let div = document.querySelector('div')
      div.className = 'box'
    </script>
  </body>

image.png

示例：刷新页面时随机显示图片

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <img src="./1.png" alt="" />

    <script>
      // 得到元素
      let img = document.querySelector('img')

      // 随机得到图片序号
      function getRan(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min
      }

      // src 赋值
      img.src = `./${getRan(1, 8)}.png`
    </script>
  </body>
</html>

image.png

3.3 设置/修改 DOM 元素样式属性

还可以通过 JS 设置/修改标签元素的样式属性，比如通过点击按钮可以滚动图片、轮播图自动更换小圆点的样式等

（1）通过 style 属性操作 CSS

语法：对象.style.样式属性 = 值

修改样式是通过 style 属性引出的，如果属性有连接符（-），需要转换为 小驼峰 命名法，赋值的时候，如果有单位，不要忘记加 CSS 单位

  <body>
    <div></div>

    <script>
      let div = document.querySelector('div')

      div.style.backgroundColor = 'lightBlue'
      div.style.height = '80px'
      div.style.width = '100px'
    </script>
  </body>

image.png

示例：刷新页面，随机更换背景

  <body>
    <script>
      let body = document.querySelector('body')

      function getRan(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min
      }

      let img = getRan(1, 8)
      body.style.backgroundImage = `url(./${img}.png)`
    </script>
  </body>

image.png

因为页面只有一个 body 标签 ，因此也可以直接写为：

image.png

（2）通过操作类名操作 CSS

如果修改的样式比较多，直接通过 style 属性修改样式的话比较繁琐，可以借助 CSS 类名 的形式修改

语法：元素.className = '类名'

由于 class 是关键字，所以使用了 className 来代替，className 是使用新值 替换 旧值，如果需要添加一个类，则要保留之前的类名，如果直接赋值会覆盖以前的类名

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        background-color: lightgreen;
      }
      .box {
        background-color: #9895f8;
      }
    </style>
  </head>
  <body>
    <div></div>
    <script>
      let div = document.querySelector('div')
      div.className = 'box'
    </script>
  </body>
</html>

image.png

保留之前的类：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .one {
        width: 100px;
        height: 100px;
        background-color: lightgreen;
      }
      .box {
        border: 2px solid #000;
      }
    </style>
  </head>
  <body>
    <div class="one"></div>
    <script>
      let div = document.querySelector('div')
      div.className = 'one box'
    </script>
  </body>
</html>

image.png

（3）通过 classList 操作类控制 CSS

为了解决 className 容易覆盖以前的类名问题，可以通过 classList 的方式追加和删除类名

语法：

  • 追加类：元素.classList.add('类名')
  • 删除类：元素.classList.remove('类名')
  • 切换类：元素.classList.toggle('类名')

示例1：添加类

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .one {
        width: 100px;
        height: 100px;
        background-color: lightgreen;
      }
      .box {
        border: 2px solid #000;
      }
    </style>
  </head>
  <body>
    <div class="one"></div>
    <script>
      let div = document.querySelector('div')
      div.classList.add('box')
    </script>
  </body>
</html>

image.png

示例2：删除类

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .one {
        width: 100px;
        height: 100px;
        background-color: lightgreen;
      }
      .box {
        border: 2px solid #000;
      }
    </style>
  </head>
  <body>
    <div class="one"></div>
    <script>
      let div = document.querySelector('div')
      div.classList.remove('one')
    </script>
  </body>
</html>

image.png

示例3：切换类 - 有就删除，没有就添加

（1）元素原本就有 one 这个类，所以使用切换类就会删除原有的类

image.png

（2）如果元素原本没有这个类，使用切换类就会添加这个类

image.png

3.4 设置/修改表单元素属性

表单很多情况下也需要修改属性，比如点击眼睛可以显示密码，本质就是把表单类型转换为文本框类型

获取表单元素：DOM对象.属性名

设置表单属性值：DOM对象.属性名 = 新值

  <body>
    <input type="text" value="请输入文字" />
    <script>
      let input = document.querySelector('input')
      console.log(input.value)
    </script>
  </body>

image.png

  <body>
    <input type="text" value="请输入文字" />
    <script>
      let input = document.querySelector('input')
      input.value='新文字'
    </script>
  </body>

image.png

表单属性中添加有效果，不添加就没有效果，统一使用 布尔值 表示，如果是 true ，说明元素添加了该属性；如果是 false ，则代表移除了该属性，比如：disabled、checked、selected

例如：按钮是否禁用

  <body>
    <button disabled>按钮</button>
    <script>
      let btn = document.querySelector('button')
      btn.disabled = false
    </script>
  </body>

image.png

4. 定时器 - 间歇函数

网页中经常会需要一种功能：每隔一段时间后需要自动执行一段代码，不需要我们手动去触发，例如倒计时，要实现这个功能就需要 定时器函数 ，定时函数有两种，其中一种是 间歇函数

4.1 开启定时器

定时器函数可以开启和关闭定时器

setInterval(函数，间隔时间) 函数的作用是每隔一段时间就调用这个函数，间隔的时间单位是 毫秒

示例：每隔一秒钟打印一句话

  <body>
    <script>
      setInterval(function () {
        console.log('Wen APIs 学习')
      }, 1000)
    </script>
  </body>

image.png

也可以这样写：

  <body>
    <script>
      function fun() {
        console.log('Wen APIs 学习')
      }
      setInterval(fun, 1000)
    </script>
  </body>

4.2 关闭定时器

定时器函数一般不会刚创建就停止，而是满足一定条件后再停止的

image.png

函数名字不需要加括号，定时器返回的是一个 id 数字

  <body>
    <script>
      function fun() {
        console.log('Wen APIs 学习')
      }
      let id = setInterval(fun, 1000)
      console.log(id)
    </script>
  </body>

image.png

倒计时效果：按钮 5 秒之后才可以使用

分析：

  • 首先把按钮禁用；
  • 获取按钮元素
  • 使用定时函数，秒数开始减，按钮里面的文字跟着一起变化，如果秒数等于 0 时，停止定时器，文字改变，同时按钮可点击
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    button {
      margin-top: 10px;
    }
  </style>
  <body>
    <div class="box">
      <textarea id="txt" cols="20" rows="10">
用户协议：欢迎使用XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
      </textarea>
      <br />
      <button disabled>已阅读用户协议(5)</button>
    </div>
    <script>
      let btn = document.querySelector('button')
      let i = 5
      let id = setInterval(function () {
        i--
        btn.innerHTML = `已阅读用户协议(${i})`
        if (i === 0) {
          clearInterval(id)
          btn.innerHTML = '同意'
          btn.disabled = false
        }
      }, 1000)
    </script>
  </body>
</html>

image.png

网页轮播图效果：每个一秒切换一个图片

分析：

  • 获取元素，包括图片和文字
  • 设置定时函数：设置一个变量、更改图片张数、更改文字信息
  • 处理图片自动复原，从头开始播放：如果图片播到最后一张，就把变量重置为 0
  • 注意逻辑代码写到图片和文字变化的前面
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JS 轮播图</title>
    <style>
      .img-box {
        width: 558px;
        height: 501px;
        margin: 50px auto 0;
        background: #000;
        position: relative;
      }

      .img-box .tip {
        width: 558px;
        height: 53px;
        line-height: 53px;
        position: absolute;
        bottom: 0px;
        background-color: rgba(0, 0, 0, 0.8);
        z-index: 1;
      }

      .img-box .tip h3 {
        width: 82%;
        margin: 0;
        margin-right: 20px;
        padding-left: 20px;
        color: #98e404;
        font-size: 28px;
        float: left;
        font-weight: 500;
        font-family: 'Microsoft Yahei', Tahoma, Geneva;
      }
      img {
        width: 558px;
        height: 501px;
      }
    </style>
  </head>

  <body>
    <div class="img-box">
      <img class="pic" src="3.png" alt="" />
      <div class="tip">
        <h3>今天也要爱自己哦~</h3>
      </div>
    </div>
    <script>
      // 数据
      let data = [
        {
          imgSrc: '3.png',
          title: '今天也要爱自己哦~'
        },
        {
          imgSrc: '4.png',
          title: '断！舍！离！'
        },
        {
          imgSrc: '5.png',
          title: '我生来就是高山'
        },
        {
          imgSrc: '6.png',
          title: '甜蜜攻势再次回归'
        },
        {
          imgSrc: '7.png',
          title: '美貌与智力并存'
        },
        {
          imgSrc: '8.png',
          title: '活出精彩人生'
        }
      ]

      let img = document.querySelector('.pic')
      let txt = document.querySelector('.tip h3')

      let i = 0 //记录图片张数
      setInterval(() => {
        i++ // 当i=5时，将-1赋值给i，此时i=0，图片从头开始播放
        //  修改图片路径和文字内容
        img.src = data[i].imgSrc
        txt.innerHTML = data[i].title

        if (i === data.length - 1) {
          i = -1 // 本例中一共有6张图片，当i=5时，将-1赋给i（因为i是从0开始的）
        }
      }, 1000)
    </script>
  </body>
</html>

image.png

avatar
文章
阅读
粉丝