h5技术建设网站企业内训课程
目录
前言
目标
对象.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>总结
如果喜欢的人要嫁人了，就跟她表白，就算为此要把婚车的车轴打爆也没关系，这是你说出来的最后机会。把这个秘密带进棺材没价值，连陪葬都算不上