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

JavaScript innerText

2018-9-30 21:05| 作者: admin| 查看: 2890| 评论: 1|来自: 蚂蚁部落

首先对它是否是W3C标准属性做一下说明:

(1).此属性首先被IE浏览器支持(IE并非总是拦路虎)。

(2).2016年,此属性才被标准化,所以很多老旧文章称其非W3C标准支持并非妄言。

innerText属性可以获取或者设置指定元素的文本内容。

可以结合innerHTML属性与textContent属性一起学习,能够加深理解。

相关阅读:

(1).innerHTML属性可以参阅JavaScript innerHTML一章节。

(2).textContent属性可以参阅JavaScript textContent一章节。

语法结构一:

[JavaScript] 纯文本查看 复制代码
textContent=domObj.innerText

获取指定元素内的文本内容。

语法结构二:

[JavaScript] 纯文本查看 复制代码
domObj.innerText=textContent

为指定元素设置HTML内容。

浏览器兼容:

(1).IE浏览器支持此属性。

(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 type="text/javascript"> 
window.onload=function(){
  let odiv = document.getElementById("ant");
  odiv.innerText="蚂蚁部落";
}
</script>
</head>
<body>
<div id="ant"></div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/30/210743bj6rhaijqa6jatdb.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码非常简单,将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 obt=document.getElementById("bt");
  let odiv=document.getElementById("box");
  obt.onclick=function(){
    odiv.innerText="softwhy.com";
  }
}
</script> 
</head> 
<body> 
  <div id="box">
    <div>
      <p>蚂蚁部落</p>
    </div>
  </div>
  <input type="button" id="bt" value="查看效果"/>
</body> 
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/20/234501kkddpug7yd9buyg1.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

点击按钮之后,可以设置box元素的文本内容,原来的内容会被新设置的文本所替换。

可以看到box元素中的所有内容,包括后代元素全部会清空,然后重置为指定文本。

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

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/30/210815w7jjh446japb16bh.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

大家知道<b>是HTML中的标准标签,可以将文本设置为粗体。

但是innerText属性会将HTML标签解析为普通文本,而不是将其作为HTML标签渲染。

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

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/30/210850lgcboc7baji7oa7h.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码可以弹出div元素中的文本内容,应该没有任何异议。

再来看一段代码实例:

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

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/30/211455xb0u0ffu37nbza0w.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

弹出的内容和前一段代码完全一样,尽管"蚂蚁部落"使用<b>标签包裹。

这是因为<b>标签会被浏览器解析渲染,它不会被看做文本,而是对文本的修饰。

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

点击按钮代码控制打印效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/20/235350xfk229nu44uwzuwn.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

innerText可以获取指定元素极其后代元素的文本内容。

可以看到获取的文本内容具有一定的格式,因为HTML标签会被解析,比如div和p都是块级元素,那么内容都会单独占据一行,而p又可以增加一个换行,所以文本之间又多了一行空白。

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

发表评论

最新评论

引用 leslie初见 2019-5-17 14:34
innerText 会受样式的影响,它不返回隐藏元素的文本,但 textContent 返回。

查看全部评论(1)

返回顶部