zoukankan      html  css  js  c++  java
  • textContent与innerText的不同

    ————————————————————————————————————————

    textContent与innerText的不同

    IE下有个innerText属性,FF下有个textContent属性。很多以前给IE写脚本的,在FF下找不到innerText属性,于是网上搜到的建议是用textContent来替代。反之给FF写脚本的也一样。

    但是实际上,这里有个误解。网上很多文章说“FF下等效于innerText属性的属性是textContent”————但是事实上并非如此。 innerText与textContent有几点很重要的不同,导致它们在一些情况下不能直接互换使用。

    前些日子写了个代码高亮JS插件,在IE下工作完全正常,而在FF下就不对头。在IE下使用的是innerText属性,而在FF下使用的则是 textContent属性。在进行字符串处理的时候二者的不同导致了完全不一样的结果。于是就专门写了点东西来测试二者的不同。

    根据测试的结果表明:
    innerText:它的内容实际上就是你在浏览器看到的内容。它的值是经过浏览器解释过的结果:它将元素的 innerHTML换码、解释,最终显示出来,然后去除各种格式信息留下的纯文本。它会把<br/>换成换行符,会将多个空格并成一个空格对待,而本来的换行符却并不会引起换行,IE会将其当作一个普通的单词边界(一般是空格)。再说的形象点,一个元素的innerText属性的值,和你将这个元素内容复制粘贴到记事本里的内容一致。

    textContent:它的内容则是innerHTML去除所有标签后的内容(我怀疑这个是从XMLDOM中照搬过来的属性,特性完全一致)。它会将innerHTML中的转义字符(&lt;、&nbsp;什么的)进行换码,但是不对任何 html标签进行解释,而是直接剔除它们。它也不会对innerHTML中的文本按照HTML的方式进行格式转换,比如多个空格还会原原本本地保留,不会合并为一个空格,换行符仍然存在(相反<br/>却不会导致换行)。

    更加简练的总结:IE中的innerText是需要对innerHTML的值进行:
    1、HTML转义(等同于XML转义,对&lt;、&amp;等转义字符进行处理);
    2、经过HTML解释和CSS样式解释;
    3、之后又剔除格式信息
    之后留下的纯文本。
    而FF中的textContent没有2、3步,在经过了HTML转义之后直接剔除所有html标签后得到的纯文本。

    一个例子:

    <div id=”T1″>
    ABCD
    EFG   HIJ<br/>KLM &nbsp;N
    OPQ<div>RS</div>T
    T
    <div>

    这个id为T1的div,
    在IE中的innerText属性的值为:

    ABCD EFG HIJ
    KLM  N OPQ
    RS
    T T

    而在FF中的textContent的属性的值为:

    (这里有个换行)
    ABCD
    EFG   HIJKLM  N
    OPQRST
    T

    注意那个div中还嵌套了个div,而这个更能反映IE的innerText和FF的textContent各自的处理方式的不同:
    div是块(block)元素,默认会独占一行,因此,在IE中的innerText反映为上述div中的RS独占一行,而FF的textContent 完全不理会HTML格式,因此其textContent中的RS是和其它字符连在一起的,不会独占一行。

    .

    如果想更进一步,看看这个有趣的结果:
    假如给里面那个div加一个style=”float:left;”,那么这个div就会由块元素变化为行元素,不再独占一行,因此IE的 innerText属性中RS便不再独占一行,而与其它字符连在一起,而在FF中由于textContent不理会标签更不会理会CSS,因此它的 textContent属性的值不会有任何变化。

    .

    这么看来,很多网上说的“让FF支持innerText属性”云云,其实都是多多少少有问题的。要实现IE的innerText,远没有想象中的那么简单,你若要使用JavaScript让FF拥有和innerText完全一样的效果,得自己把html标签属性全部parse一遍,解释它们,甚至还需要去解释css……
    (不过根据原理,貌似通过剪贴板的复制和取回操作可以在FF下模拟innerText效果(这个未测试),但是1有副作用,2FF下的剪贴板操作也很麻烦。)

    不过还好,大多数时候我们并不需要那么精确,使用innerHTML做点简单的处理即可达到比较接近的效果了。

    注:以上代码均在IE6和FF3下完成测试。

  • 相关阅读:
    part11-1 Python图形界面编程(Python GUI库介绍、Tkinter 组件介绍、布局管理器、事件处理)
    part10-3 Python常见模块(正则表达式)
    Cyclic Nacklace HDU
    模拟题 Right turn SCU
    状态DP Doing Homework HDU
    Dp Milking Time POJ
    区间DP Treats for the Cows POJ
    DP Help Jimmy POJ
    Dales and Hills Gym
    Kids and Prizes Gym
  • 原文地址:https://www.cnblogs.com/quanhai/p/1714254.html
Copyright © 2011-2022 走看看