您的位置:首页> 前端教程> JS教程
文章导航

JavaScript textContent

2018-12-12 01:24| 作者: admin| 查看: 1073| 评论: 0|来自: 蚂蚁部落


textContent属性可以返回或者设置指定节点的文本内容。

上述概念阐述不足以完全涵盖属性所有特点,后面通过代码实例详细介绍。

此属性与innerText比较类似,但是区别也是巨大的,参阅如下两篇文章:

(1).JavaScript innerText一章节。

(2).innerText与textContent区别一章节。

语法结构:

[JavaScript] 纯文本查看 复制代码
let text = element.textContent; // 返回文本内容
element.textContent = text; // 设置文本内容

浏览器支持:

(1).IE9+浏览器支持此方法。

(2).edge浏览器支持此方法。

(3).谷歌浏览器支持此方法。

(4).opera浏览器支持此方法。

(5).火狐浏览器支持此方法。

(6).safria浏览器支持此方法。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
window.onload=function(){
  let odiv=document.getElementById("ant");
  odiv.textContent="蚂蚁部落";
}
</script>
</head>
<body>
<div id="ant"></div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/12/012532xixxog212zzg2v19.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通过textContent属性为div元素设置为本内容,没有什么异议。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
window.onload=function(){
  let odiv=document.getElementById("ant");
  let obt=document.getElementById("bt");
  obt.onclick=function(){
    odiv.textContent="蚂蚁部落";
  }
}
</script>
</head>
<body>
<div id="ant">
  <div>
    <span>青岛市南区</span>
  </div>
</div>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>

点击按钮运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/12/012554l9ojjp9jcsm7cwv4.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以看到,通过textContent属性设置为本内容会清空元素的所有子节点,使用指定文本替代。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
window.onload=function(){
  let odiv=document.getElementById("ant");
  let obt=document.getElementById("bt");
  obt.onclick=function(){
    odiv.textContent="<b>蚂蚁部落</b>";
  }
}
</script>
</head>
<body>
<div id="ant">青岛市南区</div>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>

点击按钮代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/12/012619bzaoa6s76b6674ot.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).被设置的文本内容中含有HTML标签<b>。

(2).但是此标签并未被解析,而是作为纯文本写入div中。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
.ant{float:left;}
</style>    
<script>
window.onload=function(){
  let odiv=document.getElementById("ant");
  let obt=document.getElementById("bt");
  console.log(odiv.textContent);
}
</script>
</head>
<body>
  <div id="ant">1<span>2</span><span>3</span></div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/12/012644kx5733xv3ddzxur3.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

textContent不但返回当前元素的文本内容,而且也会返回它后代元素的文本内容。

返回值是一个累积追加效果,但并不是简单从子元素中取出文本进行追加,再来看一段代码:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
.ant{float:left;}
</style>    
<script>
window.onload=function(){
  let odiv=document.getElementById("ant");
  let obt=document.getElementById("bt");
  console.log(odiv.textContent);
}
</script>
</head>
<body>
<div id="ant">
  <div>蚂蚁部落一</div>
  <div>蚂蚁部落二</div><br/>
  <div class="ant">蚂蚁部落三</div>
  <div class="ant">蚂蚁部落四</div>
</div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/12/012708hh6rops7pph7j1p5.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面的textContent属性的返回值表现可能会让一些朋友疑惑,分析如下:

(1)."蚂蚁部落一"上面的空白行是由于前面的换行导致的。

(2).div中的文本都单独形成一行,都是由于换行的原因。

(3).<br>换行并没有起到作用。

(4).虽然最后两个div通过浮动,浏览器解析在一行显示,但是标签之间的换行仍然起作用。

通过上面的代码表现可以总结如如下结论:

(1).textContent获取文本是直接量HTML标签剥离,所以<br>换行不会起作用。

(2).\t、\r、\n与连续的空格效果会生效,虽然我们只演示了\n换行。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>  
<script>
window.onload=function(){
  let odiv=document.getElementById("ant");
  let attrNode=odiv.getAttributeNode("web");
  odiv.innerHTML=attrNode.textContent;
}
</script>
</head>
<body>
  <div id="ant" web="蚂蚁部落"></div>
</div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/12/012733nwmssieebsdndnb7.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面的这个例子是为了化解一个误解,不要以为textContent属性仅对元素节点有效。

对于属性节点,注释节点等都是有效的,比如可以返回<style>和<script>节点的文本内容。

也可以返回隐藏元素的文本内容,如果要返回document文档的文本内容,需要使用document.documentElement.textContent,而不是document.textContent。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部