原文摘自

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. shell编程 Shell script 的默认变量($0, $1...)

    Shell script 的默认变量($0, $1...) 我们知道指令可以带有选项与参数,例如 ls -la 可以察看包含隐藏文件的所有属性与权限.那么 shell script 能不能在脚本文件名 ...

  2. $.extend(),与$.fn.extend() 讲解（一）

    jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级 ...

  3. Luogu P2257 YY的GCD 莫比乌斯反演

    第一道莫比乌斯反演...$qwq$ 设$f(d)=\sum_{i=1}^n\sum_{j=1}^m[gcd(i,j)==d]$ $F(n)=\sum_{n|d}f(d)=\lfloor \frac{N ...

  4. Codeforces Round #562 (Div. 2) A.Circle Metro

    链接:https://codeforces.com/contest/1169/problem/A 题意: The circle line of the Roflanpolis subway has n ...

  5. mysql ibd 文件过大问题

    公司的数据库挂了查了下 ,每个表都有自己独立的表空间,有一张表的ibd 文件有好几G了.然后想要释放它. 解决方案: 第一种,删除表,然后重新建.drop table 操作自动回收表空间 第二种,al ...

  6. NET Core 2.0 自定义

    ASP.NET Core 2.0 自定义 _ViewStart 和 _ViewImports 的目录位置 在 ASP.NET Core 里扩展 Razor 查找视图目录不是什么新鲜和困难的事情,但 _ ...

  7. openstack安装newton版本neutron服务部署（四）

    一.管理节点部署服务: 1.安装neutron: [root@linux-node1 ~]# yum install openstack-neutron openstack-neutron-ml2 o ...

  8. 牛客网Java刷题知识点之关键字static、static成员变量、static成员方法、static代码块和static内部类

    不多说,直接上干货! 牛客网Java刷题知识点之关键字static static代表着什么 在Java中并不存在全局变量的概念,但是我们可以通过static来实现一个“伪全局”的概念,在Java中st ...

  9. 洪水 Pow

    Description AKD市处在一个四面环山的谷地里.最近一场大暴雨引发了洪水,AKD市全被水淹没了.Blue Mary,AKD市的市长,召集了他的所有顾问(包括你)参加一个紧急会议.经过细致的商 ...

  10. tyvj P4877 _1．组合数

    时间限制:1s 内存限制:256MB [问题描述] 从m个不同元素中,任取n(n≤m)个元素并成一组,叫做从m个不同元素中取出n个元素的一个组合:从m个不同元素中取出n(n≤m)个元素的所有组合的个数 ...