API-操作元素内容

news2025/1/4 18:54:35

学习目标：

掌握操作元素内容

学习内容：

操作元素内容
元素innerText属性
元素innerHTML属性
案例

操作元素内容：

DOM对象都是根据标签生成的，所以操作标签，本质上就是操作DOM对象。
就是操作对象使用的点语法。
如果想要修改标签元素的里面的内容，则可以使用两种方法。

元素`innerText`属性：

将文本内容添加/更新到任意标签位置。
显示纯文本，不解析标签。

<title>修改对象内容</title>
</head>

<body>
  <div class="box">我是文字的内容</div>
  <script>
    //1.获取元素
    const box = document.querySelector('.box')
    //2.修改文字内容  对象.innerText 属性
    console.log(box.innerText) //获取文字内容
    // box.innerText = '我是一个盒子' //修改文字内容
    box.innerText = '<strong>我是一个盒子</strong>' //不解析标签
</body>

元素`innerHTML`属性：

将文本内容添加/更新到任意标签位置。
会解析标签，多标签建议使用模板字符。

<title>修改对象内容</title>
</head>

<body>
  <div class="box">我是文字的内容</div>
  <script>
  //1.获取元素
    const box = document.querySelector('.box')

    //3.innerHTML 解析标签
    console.log(box.innerHTML)
    // box.innerHTML = '我要更换'
    box.innerHTML = '<strong>我要更换</strong>'
  </script>

</body>

案例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>练习-年会抽奖</title>
  <style>
    .wrapper {
      width: 840px;
      height: 420px;
      background: url(img/prize.jpg) no-repeat center / cover;
      padding: 100px 250px;
      box-sizing: border-box;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <strong>年会抽奖</strong>
    <h1>一等奖：<span id="one">???</span></h1>
    <h3>二等奖：<span id="two">???</span></h3>
    <h5>三等奖:<span id="three">???</span></h5>
  </div>
  <script>
    //1.声明数组
    const personArr = ['周杰伦', '刘德华', '周星驰', '雪碧宝宝', '张学友']
    //2.先做一等奖
    //2.1 随机数 数组的下标
    const random = Math.floor(Math.random() * personArr.length)
    // console.log(personArr[random])
    //2.2获取one元素
    const one = document.querySelector('#one')
    //2.3把名字给one
    one.innerHTML = personArr[random]
    //2.4删除这个名字
    personArr.splice(random, 1)
    console.log(personArr)

    //3.二等奖
    //3.1 随机数 数组的下标
    const random2 = Math.floor(Math.random() * personArr.length)
    // console.log(personArr[random])
    //3.2获取two元素
    const two = document.querySelector('#two')
    //3.3把名字给two
    two.innerHTML = personArr[random2]
    //3.4删除这个名字
    personArr.splice(random, 1)
    console.log(personArr)

    //4.三等奖
    //4.1 随机数 数组的下标
    const random3 = Math.floor(Math.random() * personArr.length)
    // console.log(personArr[random])
    //4.2获取three元素
    const three = document.querySelector('#three')
    //4.3把名字给three
    three.innerHTML = personArr[random3]
    //4.4删除这个名字
    personArr.splice(random, 1)
    console.log(personArr)


  </script>

</body>

</html>