原文摘自

textContent和innerText属性的区别

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

            <title>

            </title>

        </meta>

    </head>

    <body>

        <div class="test" id="test">

            test

            <div style="display:none">

                <span>

                    test

                </span>

            </div>

            <style>

                hi

            </style>

        </div>

        <script type="text/javascript">

            var testDiv = document.getElementById('test');

        console.log("我是textContent输出的"+testDiv.textContent);

        console.log("我是innerText输出的"+testDiv.innerText);

        </script>

    </body>

</html>

输出的结果：

我是textContent输出的testtesthi

我是innerText输出的test

1.主要差异 
- textContent 会获取style= “display:none” 中的文本，而innerText不会 
- textContent 会获取style标签里面的文本，而innerText不会

实例2：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

            <title>

            </title>

        </meta>

    </head>

    <body>

        <div class="test" id="test">

            test

            <div style="display:none">

                <span>

                    test

                </span>

            </div>

            <p>

                hi

            </p>

        </div>

        <script type="text/javascript">

        var testDiv = document.getElementById('test');

        console.log("我是textContent输出的"+testDiv.textContent);

        console.log("我是innerText输出的"+testDiv.innerText);

        </script>

    </body>

</html>

输出结果：

我是textContent输出的

            test

                    test

                hi

我是innerText输出的test

hi

差异： 
1. textContent不会理会html格式，直接输出不换行的文本 
2. innerText会根据标签里面的元素独立一行

3.兼容性： 
innerText 对IE的兼容性较好 
textContent虽然作为标准方法但是只支持IE8+以上的浏览器 
最新的浏览器，两个都可以使用

textContent和innerText属性的区别的更多相关文章

  1. innerHTML属性，outerHTML属性，textContent属性，innerText属性区别详解

    innerHTML属性用来读取或设置某个节点内的HTML代码. outerHTML属性用来读取或设置HTML代码时,会把节点本身包括在内. textContent属性用来读取或设置节点包含的文本内容. ...

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

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

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

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

  4. textContent、innerText的用法，在文档中插入纯文本

    有时候需要查询纯文本形式的元素内容,或者在文档中插入纯文本.标准的方法是用Node的textContent属性来实现: var para = document.getElementsByTagName ...

  5. textContent、innerText 以及Event事件兼容性问题

    今天在完成前端的简单练习时发现了一些兼容性的问题,百度后得以解决. 这里主要讨论Firefox与Chrome的兼容性问题. textContent与 innerText 在javascript中, 为 ...

  6. 低版本Firefox支持innerText属性兼容方法

    FireFox支持innerText属性了,很遗憾是44.0.2版本以下还需要兼容处理. 方法一: innerHTML是符合W3C标准的属性,而innerText只适用于IE浏览器,因此,尽可能地去使 ...

  7. jquery html属性和text属性的区别

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. swift：谈谈swift几种常见属性的区别

    一.前奏 Swift作为一门新语言,经过几年的发展,逐渐趋于完善,目前已经更新到3.0版本,它汇集许多其他语言的特点,例如JS.Paython.C++等,完全区别于OC.个人感觉它没有完全的OOP和O ...

  9. JS中isPrototypeOf 和hasOwnProperty 的区别 ------- js使用in和hasOwnProperty获取对象属性的区别

    JS中isPrototypeOf 和hasOwnProperty 的区别 1.isPrototypeOf isPrototypeOf是用来判断指定对象object1是否存在于另一个对象object2的 ...

随机推荐

  1. 洛谷P4052 [JSOI2007]文本生成器（AC自动机）

    传送门 好像这题的确只能用AC自动机做了……Aufun大佬太强啦 正着难我们反着做,用总共单词个数减去没有一个单词都不包含的 然后考虑怎么处理一个单词都不包含的,就是跑不到单词的结尾节点 定义$f[i ...

  2. OSU!

    题目链接 #include <bits/stdc++.h> using namespace std; typedef long long ll; inline ll read(){ ,f= ...

  3. 在linux服务器下日志提取的python脚本（实现输入开始时间和结束时间打包该时间段内的文件）

    1.需求:近期在提取linux服务器下的日志文件时总是需要人工去找某个时间段内的日志文件,很是枯燥乏味,于是乎,我就想着用python结合linux指令来写一个日志提取的脚本,于是就有了以下脚本文件: ...

  4. [HNOI2017]抛硬币

    Description 小A和小B是一对好朋友,他们经常一起愉快的玩耍.最近小B沉迷于××师手游,天天刷本,根本无心搞学习.但是已经入坑了几个月,却一次都没有抽到SSR,让他非常怀疑人生.勤勉的小A为 ...

  5. Codeforces Round #564 (Div. 2) B. Nauuo and Chess

    链接:https://codeforces.com/contest/1173/problem/B 题意: Nauuo is a girl who loves playing chess. One da ...

  6. 如何使用Spring Security手动验证用户

    1.概述 在这篇快速文章中,我们将重点介绍如何以编程方式在Spring Security和Spring MVC中设置经过身份验证的用户. 2. Spring Security 简而言之,Spring ...

  7. 基于spring-boot和docker-java实现对docker容器的动态管理和监控[附完整源码下载]

    ​ (我是个封面) docker简介 Docker 是一个开源的应用容器引擎,和传统的虚拟机技术相比,Docker 容器性能开销极低,因此也广受开发者喜爱.随着基于docker的开发者越来越多,doc ...

  8. winform代码生成器(三)

    代码下载 地址 http://pan.baidu.com/s/1nuZjyat 接上面的两篇. 用户有时对 从表的 排版不喜欢,可以因某些字太长,需要拉长一些,有些则需要隐藏. 有什么办法呢? 我的思 ...

  9. JDBC和分包

    JDBC(Java Data Base Connectivity,java数据库连接) JDBC是一种用于执行SQL语句的Java API,可以为多种关系数据库提供统一访问,它由一组用Java语言编写 ...

  10. 客户端rsyslog配置文件详解

    客户端rsyslog配置文件详解 最近再开发一个rsyslog的接收服务端,支持udp,tcp和tls三种协议.所以去仔细研究了一下rsyslog.conf的配置文件,下面来详细说一下. 因为我这儿重 ...