文章摘要
这篇文章主要介绍了HTML元素中`textContent`、`innerText`和`innerHTML`三个属性的区别及其使用方法。文章通过多个代码示例展示了如何利用这些属性来设置和获取元素的文本内容或HTML内容。
1. **textContent**：用于获取或设置元素的文本内容，主要针对文本节点，不包含嵌套的HTML标签。支持度较好的浏览器包括Chrome、Firefox、Google等。
2. **innerText**：类似于`textContent`，但可以获取或设置包含嵌套HTML标签的内容。IE8不支持`innerText`，其余浏览器支持。
3. **innerHTML**：用于获取或设置元素的全部内容，包括嵌套的HTML标签。可以通过`innerHTML`设置新的HTML内容，但无法直接修改现有标签的内容。
文章还特别提醒，如果需要判断某个属性是否支持，可以通过检查`typeof`属性来确定支持情况。例如：
```javascript
if (typeof element.textContent === "undefined") {
// 不支持textContent
element.innerText = "内容";
} else {
element.textContent = "内容";
}
```
此外，文章还对比了`innerText`和`innerHTML`的作用，指出两者在获取内容时的区别。如果目标是设置标签内容（不涉及嵌入标签），建议使用`innerText`；如果需要设置包含嵌套标签的内容，则使用`innerHTML`。
文章最后提到，`innerHTML`可以获取标签中的所有内容，包括嵌套标签的内容，而`innerText`仅获取文本内容。
<body>
<input type=”button” value=”按钮” id=”btn”>
<div id=”dv”>这是一个div</div>
<script>
document.getElementById(“btn”).onclick=function () {
document.getElementById(“dv”).textContent=”改变了”;
};
</script>
</body>
<body>
<input type=”button” value=”按钮” id=”btn”>
<div id=”dv”>这是一个div</div>
<script>
document.getElementById(“btn”).onclick=function () {
var text=document.getElementById(“dv”).textContent;
console.log(text);
};
</script>
</body>
<body>
<input type=”button” value=”按钮” id=”btn”>
<div id=”dv”>这是一个div</div>
<script>
document.getElementById(“btn”).onclick=function () {
document.getElementById(“dv”).innerText=”改变了”;
};
</script>
</body>
<body>
<input type=”button” value=”按钮” id=”btn”>
<div id=”dv”>这是一个div</div>
<script>
document.getElementById(“btn”).onclick=function () {
var text=document.getElementById(“dv”).innerText;
console.log(text);
};
</script>
</body>
1.设置标签中的文本内容
<body>
<input type=”button” value=”按钮” id=”btn”>
<div id=”dv”>这是一个div</div>
<script>
document.getElementById(“btn”).onclick=function () {
document.getElementById(“dv”).innerHTML=”改变了”;
};
</script>
</body>
<body>
<input type=”button” value=”按钮” id=”btn”>
<div id=”dv”>这是一个div</div>
<script>
document.getElementById(“btn”).onclick=function () {
var text=document.getElementById(“dv”).innerHTML;
console.log(text);
};
</script>
</body>
<script>
function setInnerText(element, text) {
//判断浏览器是否支持这个属性
if (typeof element.textContent==”undefined”) {//不支持
element.innerText=text;
} else {//支持这个属性
element.textContent=text;
}
};
</script>
<script>
function getInnerText(element) {
if (typeof element.textContent==”undefined”) {
return element.innerText;
} else {
return element.textContent;
}
};
</script>
textContent、innerText的效果是一样的，所以这里我只用innerText举例
innerText的效果
<body>
<input type=”button” value=”按钮” id=”btn”>
<div id=”dv”>这是一个div</div>
<script>
function my$(id) {
return document.getElementById(id);
};
</script>
<script>
my$(“btn”).onclick=function () {
my$(“dv”).innerText=”哈哈”;//设置文本
my$(“dv”).innerText=”<p>这是一个p</p>”;//设置html标签的代码
};
</script>
</body>
innerHTML的效果
<body>
<input type=”button” value=”按钮” id=”btn”>
<div id=”dv”>这是一个div</div>
<script>
function my$(id) {
return document.getElementById(id);
};
</script>
<script>
my$(“btn”).onclick=function () {
my$(“dv”).innerHTML=”哈哈”;
my$(“dv”).innerHTML=”<p>这是一个p</p>”;//设置Html标签的
};
</script>
</body>
innerText的效果
<body>
<input type=”button” value=”按钮” id=”btn”>
<div id=”dv”>
<p>这是一个p</p>
</div>
<script>
document.getElementById(“btn”).onclick=function () {
//可以获取标签中的文本内容
console.log(document.getElementById(“dv”).innerText);
};
</script>
</body>
innerHTML的效果
本篇博客来自于传智播客视频教程的总结以及笔记的整理，仅供学习交流，切勿用于商业用途
您可能感兴趣的文章:js中innerText/textContent和innerHTML与target和currentTarget的区别