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

前言

目标

对象.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>