任务1：innerHTML的应用
任务要求：
任务实现：
<body>
<table border="1" cellspacing="0" align="center">
<caption>商品信息详情</caption>
<tr>
<th>商品种类</th>
<td>过季旧款</td>
<td>当前热销</td>
<td>秋季新品</td>
</tr>
<tr>
<th>商品状态</th>
<td id="down">已下架</td>
<td class="up"><span>热卖中</span></td>
<td class="up">等待上架</td>
</tr>
</table>
<script>
//通过id属性获取元素
var downGoods = document.getElementById("down");
//通过innerHTML属性获取元素内容
console.log(downGoods.innerHTML);
//通过类名获取元素
var upGoods = document.getElementsByClassName("up");
//通过innerHTML属性获取元素内容
console.log(upGoods[0].innerHTML);
//通过赋值语句设置元素内容
upGoods[1].innerHTML = "已上架";
</script>
</body>
任务2：innerText的应用
任务要求：
任务实现：
任务3：textContent的应用
任务要求：获取隐藏项的文本内容，并设置为“特定时刻显示”。
任务实现：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取隐藏元素的内容</title>
<style>
.nav {
background-color: antiquewhite;
width: 500px;
height: 30px;
margin: 20px auto;
}
.item {
width: 125px;
float: left;
line-height: 30px;
text-align: center;
}
#hide {
visibility: hidden;
}
</style>
</head>
<body>
<div class="nav">
<div class="item">首页</div>
<div class="item">个人主页</div>
<div class="item">设置</div>
<div class="item" id="hide">隐藏内容</div>
</div>
<script>
var hideText = document.getElementById("hide");
//通过textContent属性返回获取到的元素的内容
console.log(hideText.textContent);
//通过innerText属性返回获取到的元素的内容
console.log(hideText.innerText);
//通过textContent属性设置获取到的元素的内容
hideText.textContent = "特定时刻显示";
//通过textContent属性设置获取到的元素的内容
console.log(hideText.textContent);
</script>
</body>
</html>
原创视频
