前端学习-操作元素内容（二十二）

news2024/12/19 12:57:21

前言

目标

对象.innerText 属性

对象.innerHTML属性

案例

年会抽奖

需求

方法一

方法二

总结

前言

曾经沧海难为水，除却巫山不是云。

目标

能够修改元素的文本更换内容

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

对象.innerText 属性

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

<!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>

<style>

.box {

 width: 100px;

 height: 100px;

}

</style>

<body>

<div class="box"> 这是文字的内容</div>

<script>

 const box = document.querySelector('.box');

 console.log(box.innerText);

 box.innerText = '<strong>这是修改后的内容</strong>';//不解析标签

</script>

</body>

</html>

对象.innerHTML属性

元素.innerHTML属性将文本丙容添加/更新到任意标签位置

会解析标签，多标签建议使用模板字符

<!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>

<style>

.box {

 width: 100px;

 height: 100px;

}

</style>

<body>

<div class="box"> 这是文字的内容</div>

<script>

 const box = document.querySelector('.box');

 console.log(box.innerText);

 box.innerHTML = '<strong>这是修改后的内容</strong>';

</script>

</body>

</html>

案例

年会抽奖

需求

从数组随机抽取一等奖、二等奖和三等奖，显示到对应的标签里面。素材:

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>

<style>

.box {

 width: 100px;

 height: 100px;

}

</style>

<body>

<div class="honor">

 <strong>年会抽奖</strong>

 <h1>一等奖 <span id="one">???</span></h1>

 <h1>二等奖 <span id="two">???</span></h1>

 <h1>三等奖 <span id="three">???</span></h1>

 <button id="btn">开始</button>

</div>

<script>

 const arr = ['周杰伦', '刘德华', '郭富城', '周润发', '周星驰', '张学友'];

 document.getElementById('btn').addEventListener('click', function () {

 if (arr.length === 0) {

 alert('所有奖项已抽完！');

 return;

 }

 const randomOne = Math.floor(Math.random() * arr.length);

 document.getElementById('one').innerHTML = arr[randomOne];

 arr.splice(randomOne, 1);

 if (arr.length > 0) {

 const randomTwo = Math.floor(Math.random() * arr.length);

 document.getElementById('two').innerHTML = arr[randomTwo];

 arr.splice(randomTwo, 1);

 }

 if (arr.length > 0) {

 const randomThree = Math.floor(Math.random() * arr.length);

 document.getElementById('three').innerHTML = arr[randomThree];

 arr.splice(randomThree, 1);

 }

 console.log(arr);

 });

</script>

</body>

方法二

数组 prizeIds：定义了一个包含奖项 id 的数组 prizeIds，这样可以通过循环来访问每个奖项对应的 span 元素。
for 循环：使用 for 循环来遍历 prizeIds 数组，并且在每次循环中检查 arr 是否还有剩余元素。
随机选择和更新：在循环内部，随机选择一个数组元素并将其设置为对应奖项的 span 元素的文本内容，然后从数组中移除该元素。

<!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>

<style>

.box {

 width: 100px;

 height: 100px;

}

</style>

<body>

<div class="honor">

 <strong>年会抽奖</strong>

 <h1>一等奖 <span id="one">???</span></h1>

 <h1>二等奖 <span id="two">???</span></h1>

 <h1>三等奖 <span id="three">???</span></h1>

 <button id="btn">开始</button>

</div>

<script>

 const arr = ['周杰伦', '刘德华', '郭富城', '周润发', '周星驰', '张学友'];

 const prizeIds = ['one', 'two', 'three'];

 document.getElementById('btn').addEventListener('click', function () {

 if (arr.length === 0) {

 alert('所有奖项已抽完！');

 return;

 }

 for (let i = 0; i < prizeIds.length && arr.length > 0; i++) {

 const randomIndex = Math.floor(Math.random() * arr.length);

 document.getElementById(prizeIds[i]).innerHTML = arr[randomIndex];

 arr.splice(randomIndex, 1);

 }

 console.log(arr);

 });

</script>

</body>