javascript textContent属性用法代码实例

本章节介绍一下textContent属性的作用是什么，它的使用频率并不是很高，因为存在着一定的兼容性问题，但是并非没有它的用武之地，因为它的作用和innerText非常相像，而innerText也存在一定兼容性问题，两个属性配合使用能够较好的实现获取元素下文本的效果，所以对textContent掌握还是非常有必要的，下面进入正题。

一.textContent基础知识:

此属性可以返回或者设置指定元素的文本内容。

当返回文本内容的时候，能够返回指定元素下所有的文本内容，包括后代元素的文本内容。

当设置元素的文本内容的时候，首先会清空元素的内容，然后再设置它的文本内容。

二.浏览器兼容问题:

1.IE8以上浏览器支持此属性。

2.谷歌浏览器支持此属性。

3.火狐浏览器支持此属性。

三.代码实例:

实例一:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<title>51前端</title>
<script type="text/javascript"> 
window.onload=function(){
  var odiv=document.getElementById("thediv");
  var obt=document.getElementById("bt"); 
  obt.onclick=function(){
    alert(odiv.textContent);
  }
}
</script> 
</head> 
<body>
<div id="thediv">51前端</div>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>

上面你的代码可以获取指定元素下的文本内容。

实例二:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html><html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<title>51前端</title>
<script type="text/javascript"> 
window.onload=function(){
  var odiv=document.getElementById("thediv");
  var obt=document.getElementById("bt"); 
  obt.onclick=function(){
    alert(odiv.textContent);
  }
}
</script> 
</head> 
<body>
<div id="thediv">51前端<span>欢迎您</span></div>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>

上面你的代码可以获取指定元素下所有的文本内容。

实例三:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<title>51前端</title>
<script type="text/javascript"> 
window.onload=function(){
  var odiv=document.getElementById("thediv");
  var obt=document.getElementById("bt"); 
  obt.onclick=function(){
    odiv.textContent="分享互助";
  }
}
</script> 
</head> 
<body>
<div id="thediv">51前端<span>欢迎您</span></div>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>

代码描述：javascript textContent属性用法。javascript textContent属性用法代码实例

下载全部收藏

204 272

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册