API-操作元素内容

学习目标：

掌握操作元素内容

学习内容：

操作元素内容
元素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把名字给oneone.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把名字给twotwo.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把名字给threethree.innerHTML = personArr[random3]//4.4删除这个名字personArr.splice(random, 1)console.log(personArr)</script></body></html>