innerHTML属性用来读取或设置某个节点内的HTML代码。

outerHTML属性用来读取或设置HTML代码时,会把节点本身包括在内。

textContent属性用来读取或设置节点包含的文本内容。

innerText属性和outerText属性在读取元素节点的文本内容时,得到的值是不一样的。它们的不同之处在于设置一个节点的文本属性时,outerText属性会使得原来的元素节点被文本节点替换掉。注意,innerText是非标准属性,Firefox不支持。

1.innerText受CSS影响,textcontent没有这个问题。比如,如果CSS规则隐藏了某段文本,innerText就不会返回这段文本,textcontent则照样返回。

2.innerText返回的文本,会过滤掉空格、换行和回车键,textcontent则不会

3.innerText属性不是DOM标准的一部分,Firefox浏览器甚至没有部署这个属性,而textcontent是DOM标准的一部分。

以上就是本文的全部内容了,希望对大家学习熟悉javascript能有所帮助。

innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解的更多相关文章

  1. textContent和innerText属性的区别

    原文摘自 textContent和innerText属性的区别 <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  2. 第7.26节 Python中的@property装饰器定义属性访问方法getter、setter、deleter 详解

    第7.26节 Python中的@property装饰器定义属性访问方法getter.setter.deleter 详解 一.    引言 Python中的装饰器在前面接触过,老猿还没有深入展开介绍装饰 ...

  3. JS之innerHTML,innerText,outerHTML,textContent的用法与区别

    示例html代码: <div id="test"> <span style="color:red">test1</span> ...

  4. 自定义控件的自定义的属性attrs.xml下的declare-styleable中format详解

    最近在摸索自定义控件,查找到一些自定义属性的一些资料,解决转载记载下来:看了此详解才方便理解! 我们在做项目的时候,由于android自带的属性不能满足需求,android提供了自定义属性的方法,其中 ...

  5. android:layout_alignleft layout_toleftof区别,详解RelativeLayout布局属性

    转载请注明博客地址. 最近看博客看到有关于RelativeLayout布局的解释,有的解释很多是错误的.因此有必要对每一个常见的布局属性进行描述.以下解释全部都是逐行进行测试的. 首先把常用的布局分组 ...

  6. textContent、innerHTML、innerText、outerText、outerHTML、nodeValue使用场景和区别

    今天要讲的这些属性都可以用来获取某个元素的内容,你可能会觉得不可思议,或是说上一句"丧心病狂"也.但当你看完以下内容后,会发现除outerText无用外,其他的都有各自的使用场景, ...

  7. asp.net中C#对象与方法 属性详解

    C#对象与方法 一.相关概念: 1.对象:现实世界中的实体 2. 类:具有相似属性和方法的对象的集合 3.面向对象程序设计的特点:封装  继承 多态 二.类的定义与语法 1.定义类: 修饰符 类名称 ...

  8. JS魔法堂:被玩坏的innerHTML、innerText、textContent和value属性

    一.前言 由于innerText并非W3C标准属性,因此我们无法在FireFox中使用它(修正:FF45+已经支持innerText属性),一般情况下我们可以使用textContent来代替,但它两者 ...

  9. [转]被玩坏的innerHTML、innerText、textContent和value属性

    一.前言 由于innerText并非W3C标准属性,因此我们无法在FireFox中使用它,一般情况下我们可以使用textContent来代替,但它两者是否就能完全等同呢?在坑爹的表单元素(如input ...

随机推荐

  1. 4、第一个JAVA程序(Hello World)

    第一步: 新建一个文本文档,在里面输入内容 public class HelloWorld { public static void main(String[] args){ System.out.p ...

  2. 微信小程序:input输入框和form表单几种传值和取值方式

    1.传值:index下标传值.页面navigator传值 1.index下标 实现方式是:data-index="{{index}}"挖坑及e.currentTarget.data ...

  3. WCF 的 WebGet 方式

    .NET 3.5以后,WCF中提供了WebGet的方式,允许通过url的形式进行Web 服务的访问.在以前的代码中,写过多次类似的例子,但总是忘记如何配置,现在将设置步骤记录如下: endpoint通 ...

  4. JFinal record类型数据在前台获取

    1.jfinal record还得自己处理一下 可以使用 this.setSessionAttr("user", record.getColumns()); 这样在jsp中el表达 ...

  5. iOS - UnitTests 单元测试

    1.UnitTests 在计算机编程中,单元测试(又称为模块测试, Unit Testing)是针对程序模块(软件设计的最小单位)来进行正确性检验的测试工作.程序单元是应用的最小可测试部件.在过程化编 ...

  6. iOS - CFSocket 的使用

    1.CFSocket 苹果对对底层 BSD Socket 进行轻量级的封装(纯 C). 主要使用的 API:CFSocekt 用于建立连接,CFStream 用于读写数据. 2.基本使用 2.1 Cl ...

  7. 【js】with 语句

    with 语句 为语句设定默认对象. with (object)   statements 参数 object 新的默认对象. statements 一个或多个语句,object 是该语句的默认对象. ...

  8. Eclipse安装goclipse插件方法

    第一步:打开菜单栏“Help”-----"Eclipse Maketplace". 第二部:在弹出框的Find框中输入GoClipse,等待搜索结果出来后结果如下: 第三步:点击“ ...

  9. 设置Adobe Reader打开PDF文件保持记忆功能

    设置Adobe Reader打开PDF文件保持记忆功能 打开菜单“编辑”->“首选项”. 选择种类中的“文档”,在“打开设置”区域勾上“重新打开文档时恢复上次视图设置(R)”,确定之后就可以在下 ...

  10. Linux内核(9) - 精华版 之 方法论

    到目前为之,博客上分享的精华篇都可以归为方法论的范畴,在很多时候,都是方法论要比细节紧要得多.而这些精华篇又可细分为三个专题:Linux大史记:内核学习的方法论:驱动开发的方法论. Linux大史记 ...