JS操作页面内容
一 概念
- innerText：普通标签内容（自身文本与所有子标签文本）
- innerHTML：包含标签在内的内容（自身文本及子标签的所有）
- value：表单标签的内容
- outerHTML：包含自身标签在内的内容（自身标签及往下的所有）
二 代码示范
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JS操作页面内容</title>
</head>
<body>
<div class="sup">
sup的文本
<div class="sub">sub的文本</div>
</div>
<form action="">
<input class="input" type="text" />
<button class="btn" type="button">获取</button>
</form>
</body>
<script type="text/javascript">
// 通过js获取页面需要操作的元素对象
var sup = document.querySelector('.sup');
var sub = sup.querySelector('.sub');
// 获取
// 自身及所有子级的文本
console.log(">>>>>" + sup.innerText); // sup的文本 \n sub的文本
console.log(">>>>>" + sub.innerText); // sub的文本
// 自身文本及所有子级的所有(包含标签的所有信息:标签名,id名,class名,样式,事件,文本...)
console.log(">>>>>" + sup.innerHTML); // <div class="sub">sub的文本</div>
console.log(">>>>>" + sub.innerHTML); // sub的文本
// 赋值
sub.innerText = "<b>修改的sub文本</b>";
sub.innerHTML = "<b style='color: red'>修改的sub文本</b>";
// Text不解析标签语法,原样作为文本赋值给目标对象
// HTML可以解析标签语法
console.log("-------------------------------------------------");
console.log(sub.innerHTML); // <b style='color: red'>修改的sub文本</b>
console.log("-------------------------------------------------");
console.log(sub.outerHTML); // <div class="sub"><b style='color: red'>修改的sub文本</b></div>
console.log("-------------------------------------------------");
var btn = document.querySelector('.btn');
var ipt = document.querySelector('.input');
btn.onclick = function () {
// 获取表单元素的文本值
// 获取文本
var v = ipt.value;
console.log(v);
// 清空文本
ipt.value = ""; // 赋值空文本
}
</script>
</html>
