JavaScript textContent スキルと innerText_javascript スキルの類似点と相違点の分析

textContent と innerText の違い

IE では innerText 属性があり、FF では textContent 属性があります。 IE のスクリプトを作成していた多くの人は、FF で innerText 属性を見つけることができませんでした。そのため、代わりに textContent を使用するという提案がインターネットで見つかりました。 FFの脚本を書く人も同様です。

しかし、実はここに誤解があります。インターネット上の多くの記事では、「FF の innerText 属性に相当する属性は textContent である」と書かれていますが、実際にはそうではありません。 innerText と textContent の間にはいくつかの重要な違いがあるため、場合によってはこれらを直接交換して使用することができません。

数日前に JS プラグインを強調表示するコードを書きましたが、IE では完全に動作しますが、FF では正しく動作しません。 IE では innerText 属性が使用され、FF では textContent 属性が使用されます。 2 つの違いにより、文字列を処理するときにまったく異なる結果が得られます。そこで、この 2 つの違いをテストするために特に何かを書きました。

テスト結果によると:
innerText: そのコンテンツは実際にブラウザに表示されるものです。その値はブラウザによる解釈の結果です。ブラウザは要素の innerHTML をエスケープ、解釈し、最後に表示してから、さまざまな書式設定情報によって残されたプレーン テキストを削除します。
は改行文字に置き換えられ、複数のスペースが 1 つのスペースとして扱われますが、元の改行文字は改行を引き起こさず、IE はそれを通常の単語境界として扱います (通常はスペースです)。 ）。よりグラフィカルに表現すると、要素の innerText 属性の値は、この要素の内容をコピーしてメモ帳に貼り付けるときの内容と一致します。

textContent: そのコンテンツは、すべてのタグを削除した後の innerHTML のコンテンツです (これは XMLDOM からコピーされた属性であると思われ、特性はまったく同じです)。 innerHTML 内のエスケープ文字 (< など) はエスケープされますが、HTML タグは解釈されず、直接削除されます。また、innerHTML 内のテキストは HTML に従ってフォーマットされません。たとえば、複数のスペースはそのまま残り、改行は残ります (逆に、
は改行を引き起こしません)。 ）。

より簡潔な要約: IE の innerText には、innerHTML の値が必要です。
1. HTML エスケープ (<、& などのエスケープ文字の処理と同等) 2. HTML 解釈と CSS スタイル解釈;
3. 形式情報を削除した後に残るプレーン テキスト
。
FF の textContent にはステップ 2 と 3 がありません。HTML エスケープ後、すべての html タグが直接削除され、結果としてプレーン テキストが取得されます。

例:

コードをコピー コードは次のとおりです:

T1 の ID を持つこの div、
IE の innerText 属性の値は次のとおりです:

コードをコピー


コードは次のとおりです:

ABCD EFG HIJ KLM N OPQ RS T T

FF の textContent 属性の値:

コードは次のとおりです:

(改行あり) ABCD EFG HIJKLM N OPQRST T

Note that there is a div nested in that div, and this better reflects the difference in the processing methods of IE's innerText and FF's textContent:
div is a block element and will occupy one line by default, so , the innerText in IE reflects that the RS in the above div occupies an exclusive line, while FF's textContent completely ignores the HTML format, so the RS in its textContent is connected with other characters and does not occupy an exclusive line.

If you want to go further, take a look at this interesting result:
If you add a style="float:left;" to the div inside, then the div will change from a block element to a row element. No longer occupies an exclusive line, so the RS in IE's innerText attribute no longer occupies an exclusive line, but is connected with other characters. In FF, since textContent ignores labels and does not care about CSS, the value of its textContent attribute will not any changes.

It seems that many online talks about "let FF support the innerText attribute" are actually more or less problematic. Implementing IE's innerText is far from as simple as imagined. If you want to use JavaScript to make FF have exactly the same effect as innerText, you have to parse all the html tag attributes yourself, explain them, and even need to explain the css...
(However, according to the principle, it seems that the innerText effect can be simulated under FF through the copy and retrieval operations of the clipboard (this has not been tested), but 1 has side effects, and the clipboard operation under 2FF is also very troublesome.)

But fortunately, most of the time we don’t need to be so precise. We can achieve a closer effect by using innerHTML to do some simple processing.

Note: The above code was tested under IE6 and FF3.

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。