innerText和textContent对比及使用介绍_javascript技巧

今天在使用innerText时遇到一个兼容性问题,FireFox不支持innerText方法,查了下MDN,发现FireFox下有个类似的方法,叫textContent,它和IE的innerText类似, 都是用来获取(设置)元素中text的方法。

语法
•设置

复制代码 代码如下:

element.textContent = “text”;

•获取

复制代码 代码如下:

var text = element.textContent;

复制代码 代码如下:

Note: textContent和innerText类似,也会同时获取子元素的text content,比如
<div>this is <span>a</span> text!</div>
// div.textContent == "this is a text!"

与innerText的区别
•textContent会获取所有元素的content,包括`<script>`和`<style>`元素
•innerText不会获取hidden元素的content,而textContent不会
•innerText会触发reflow,而textContent不会
•innerText返回值会被格式化,而textContent不会

主流浏览器支持情况
•IE 9+
•Chrome 1+
•FireFox(Gecko)

时间: 2024-10-30 23:56:55

innerText和textContent对比及使用介绍_javascript技巧的相关文章

JavaScript6 let 新语法优势介绍_javascript技巧

最近看国外的前端代码时,发现ES6的新特性已经相当普及,尤其是 let,应用非常普遍 虽然 let 的用法与 var 相同,但不管是语法语义上,还是性能上,都提升了很多,下面就从这两方面对比一下 语法>> for ( var i=0; i<2; i++){ console.log( 'outer i: ' + i); for ( var i=0; i<2; i++){ console.log( 'inner i: ' +i); } } 这是一个常见的嵌套循环,都定义了变量 i 来计

Dom 学习总结以及实例的使用介绍_javascript技巧

1.   重新导航到指定的地址:navigate("http://www.jb51.net"); 2.  (1.*setInterval每隔一段时间执行指定的代码,第一个参数为代码的字符串,第二个参数为间隔时间(单位毫秒),返回值为定时器的标识.如:                setInterval("alert('hello')",5000); *clearInterval取消setInterval的定时执行,相当于Timer中的Enabled=False.因

获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍_javascript技巧

网上苦找2小时,全是不能兼容FF的,看来这种东西网上是搞不到现成的了,只能自己动手丰衣足食 现在发布出来,今后网上就有现成的供人使用了. 为了省事,少量位置用了jquery 改原生JS也很方便,谁需要就请自己修改了. 欢迎各位路过高人拍板,欢迎各位留言提供改进代码. 又改进 兼容了Chrome 下面的代码已修改成最新版 上源码了 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q

JS新包管理工具yarn和npm的对比与使用入门_javascript技巧

这篇文章会通过以下几个方面介绍yarn的: yarn对比npm解决了什么问题,带来哪些便利. 获取yarn的正确姿势 yarn的使用入门(介绍一些常用的命令 个人使用心得 yarn对比npm的优点 根据官方文档yarn具有6大优点 1.离线模式 yarn会有一个缓存目录,会缓存以前安装过的软件包,再次安装时就不必从网络下载了,大大加速安装速度. 这一点很重要,npm 饱受诟病的一点就是,每次安装依赖,都需要从网络下载一大堆东西,而且是全部重新下载,工程多的时候比较烦人. 我司部署node项目,是

Javascript oop设计模式 面向对象编程简单实例介绍_javascript技巧

Javascript oop设计模式 面向对象编程 最初我们写js代码的时候是这么写 function checkName(){ //验证姓名 } function checkEmail(){ //验证邮箱 } function checkPassword(){ //验证密码 } 这种方式会造成全局变量的严重污染,再过渡到 var checkObject = { checkName : function(){}; checkEmail: function(){}; checkPassword:

JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍_javascript技巧

cookie是网站设计者放置在客户端(浏览器)的小文本文件,cookie不仅能够实现保存密码功能,还可以通过cookie保存最近浏览记录增加用户体验. 在登录界面添加记住密码功能,我首先想到的是在java后台中调用cookie存放账号密码,大致如下: HttpServletRequest request HttpServletResponse response Cookie username = new Cookie("username ","cookievalue"

JavaScript中setter和getter方法介绍_javascript技巧

javascript中的setter.getter是平时接触比较少的方法,其本身也并不是标准方法,只在非ie浏览器里支持(ie内核也许有其他方法可以做到呢?暂时不知其解),但是加以利用可以做许多事情,比如: 1.对数据的访问限制: a.value是对value变量的getter方法调用,如果在getter方法实现中抛出异常,可以阻止对value变量的访问 2.对dom变量进行监听: window.name是一个跨域非常好用的dom属性(大名鼎鼎,详见百度),如果覆盖window.name的set

javascript之querySelector和querySelectorAll使用介绍_javascript技巧

一开始很多人都会拿jquery的选择器来跟这两个api做对比(我也是),比较异同本来没事,但却使一些同学对这两个api在浏览器中的实现产生了误解,特别是再dom element上调用此api时. 下面是我的jsFiddle示例,我就以此展开说明: js代码: (function(global) { global.doc = document; global.body = doc.getElementsByTagName('body')[0]; global.$ = function(id) {

JS子父窗口互相操作取值赋值的方法介绍_javascript技巧

$("#父窗口元素ID",window.parent.document); 对应javascript版本为window.parent.document.getElementByIdx_x("父窗口元素ID"): 取父窗口的元素方法:$(selector, window.parent.document);那么你取父窗口的父窗口的元素就可以用:$(selector, window.parent.parent.document); 类似的,取其它窗口的方法大同小异$(se