「innerText」はIEでは機能しますが、Firefoxでは機能しません

IEで動作する次のJavaScriptコードが含まれています。

myElement.innerText = "foo";

ただし、Firefoxでは「innerText」プロパティが機能しないようです。Firefoxに相当するものはありますか？または、使用できるより一般的なクロスブラウザープロパティはありますか？

FirefoxはW3C準拠の textContentプロパティを使用します。

SafariとOperaもこのプロパティをサポートしていると思います。

更新：すべての違いを詳しく説明したブログ投稿を書きました。

FirefoxはW3C標準を使用しますNode::textContentが、その動作はMSHTMLの独自仕様とは「わずかに」異なりますinnerText（Operaによってコピーされたもので、以前は他の多数のMSHTML機能の一部ます。

まず、textContent空白の表現はinnerText1つとは異なります。2つ目は、さらに重要なことに、textContent すべてのSCRIPTタグの内容を含みます、innerTextには含まれていません。

標準実装のほかに-ちょうど、オペラを楽しまより多くのものを作るためにtextContent-もMSHTMLのを追加することにしましたinnerText が、それはとして機能するように変更textContent -つまり、スクリプトの内容（実際には含めて、textContentとinnerTextオペラ座では、同じ結果を生成するように見えるおそらくちょうどお互いにエイリアスされています） 。

textContentはNodeインターフェースの一部ですが、innerTextはの一部ですHTMLElement。たとえば、これはテキストノードからでtextContentはなく「取得」できることを意味しますinnerText。

var el = document.createElement('p');
var textNode = document.createTextNode('x');

el.textContent; // ""
el.innerText; // ""

textNode.textContent; // "x"
textNode.innerText; // undefined

最後に、Safari 2.xにもバグのあるinnerText実装があります。SafariではinnerText、要素が（を介してstyle.display == "none"）非表示にされていないか、ドキュメントから孤立していない場合にのみ、正しく機能します。それ以外の場合innerTextは、空の文字列になります。

私はtextContent（これらの欠陥を回避するために）抽象化を試していましたが、かなり複雑であることがわかりました。

最善の策は、最初に正確な要件を定義し、そこから従うことです。単にのオフタグを除去することが可能である場合が多いinnerHTMLという可能性のすべてとの契約よりも、要素のtextContent/innerText偏差です。

もちろん、もう1つの可能性は、DOMツリーをウォークしてテキストノードを再帰的に収集することです。

テキストコンテンツを設定するだけで取得する必要がない場合は、どのブラウザーでも使用できる簡単なDOMバージョンを以下に示します。IE innerText拡張機能またはDOM Level 3 Core textContentプロパティは必要ありません。

function setTextContent(element, text) {
    while (element.firstChild!==null)
        element.removeChild(element.firstChild); // remove all existing content
    element.appendChild(document.createTextNode(text));
}

jQueryは、.text()任意のブラウザーで使用できるメソッドを提供します。例えば：

$('#myElement').text("Foo");

Prakash Kの回答に従って、FirefoxはinnerTextプロパティをサポートしていません。したがって、ユーザーエージェントがこのプロパティをサポートしているかどうかをテストし、それに応じて以下のように続行できます。

function changeText(elem, changeVal) {
    if (typeof elem.textContent !== "undefined") {
        elem.textContent = changeVal;
    } else {
        elem.innerText = changeVal;
    }
}

Javascriptの非常に単純な行は、すべてのメインブラウザーで「くすんだ」テキストを取得できます...

var myElement = document.getElementById('anyElementId');
var myText = (myElement.innerText || myElement.textContent);

このElement::innerTextプロパティには、Google ChromeのCSSスタイル " " によって非表示にされたテキストが含まれないことに注意してくださいdisplay:none（また、他のCSSテクニック（font-size：0、color：transparentなどを含む）によってマスクされたコンテンツがドロップされますテキストが表示されないようにする他のいくつかの同様の効果）。

その他のCSSプロパティも考慮されます。

• 最初に、内部要素の「display：」スタイルが解析され、それがブロックのコンテンツを区切るかどうかが決定されます（ブラウザの組み込みスタイルシートのHTMLブロック要素のデフォルトである「display：block」など）。独自のCSSスタイル）; その場合、innerTextプロパティの値に改行が挿入されます。これは、textContentプロパティでは発生しません。
• インラインコンテンツを生成するCSSプロパティも考慮されます。たとえば、<br \>インライン改行を生成するインライン要素は、innerTextの値に改行も生成します。
• "display：inline"スタイルでは、textContentとinnerTextのどちらにも改行はありません。
• "display：table"スタイルはテーブルの周りとテーブル行の間に改行を生成しますが、 "display：table-cell"は集計文字を生成します。
• 「position：absolute」プロパティ（display：blockまたはdisplay：inlineで使用されます。重要ではありません）でも、改行が挿入されます。
• 一部のブラウザには、スパン間の単一のスペース分離も含まれます

ただしElement::textContent、非表示であっても、適用されたCSSに関係なく、内部テキスト要素のすべてのコンテンツが含まれます。また、textContentに余分な改行や空白は生成されません。これは、すべてのスタイルと構造、および内部要素のインライン/ブロックまたは配置タイプを無視するだけです。

マウス選択を使用したコピー/貼り付け操作は、クリップボードに保存されているプレーンテキスト形式の非表示テキストを破棄するため、 textContentinnerText（上記のように空白/改行が生成された後）内にあるもののみが。

その後、両方のプロパティがGoogle Chromeでサポートされますが、それらのコンテンツは異なる場合があります。古いブラウザは、textContentに現在含まれているものと同様に、すべてinnetTextに含まれていました（ただし、空白/改行の生成に関連する動作は一貫していませんでした）。

jQueryは、$（）クエリを介して返される解析済み要素に追加された「.text（）」メソッドを使用して、ブラウザー間のこれらの不整合を解決します。内部的には、「ノード」レベルでのみ機能し、HTML DOMを調べることで問題を解決します。したがって、標準のtextContentに似たものを返します。

注意点は、このjQueryメソッドは、サブ要素（以下のような）が原因で画面に表示される可能性がある余分なスペースや改行を挿入しないことです。 <br />、コンテンツの）がです。

アクセシビリティ用のスクリプトをいくつか設計し、点字リーダーとの通信に使用するプラグインなど、非オーラルレンダリング用にスタイルシートを解析する場合、このツールは、スタイルが設定されたスパンに追加される特定の句読記号を含める必要がある場合、textContentを使用する必要があります。 "display：none"であり、通常はページに含まれます（たとえば、上付き文字/下付き文字）。それ以外の場合、innerTextは点字リーダーで非常に混乱します。

HTML / CSSパーサーとDOMプロパティを使用して、CSSトリックによって非表示にされたテキストは、通常、主要な検索エンジンによって無視されます（HTMLページのCSSも解析され、背景の対比色でないテキストも無視されます）。 "innerText"は、最新のビジュアルブラウザーとまったく同じです（少なくともこの非表示のコンテンツはインデックスに登録されないため、ページにキーワードを含めてコンテンツをチェックさせるためのトリックとして非表示のテキストを使用することはできません）。ただし、この非表示のテキストは結果ページに表示され（ページがインデックスに含まれるように修飾されている場合）、完全なHTMLの代わりに「textContent」プロパティを使用して、余分なスタイルとスクリプトを取り除きます。

これら2つのプロパティのいずれかにプレーンテキストを割り当てると、内部のマークアップとそれに適用されたスタイルが上書きされ（割り当てられた要素のみがそのタイプ、属性、スタイルを保持します）、両方のプロパティに同じコンテンツが含まれます。 。ただし、一部のブラウザーはinnerTextへの書き込みを受け付けなくなり、textContentプロパティの上書きのみを許可します（これらのプロパティへの書き込み時にHTMLマークアップを挿入することはできません。HTML特殊文字は、文字参照を使用して正しくエンコードされ、文字どおりに表示されるためです。 、またはinnerHTMLの割り当て後にプロパティを読み取ったinnerText場合textContent。

myElement.innerText = myElement.textContent = "foo";

編集（以下のコメントについてMark Ameryに感謝）：このような方法で行うのは、たとえば、次のように、これらのプロパティの存在の確認に依存するコードがないことが合理的な疑いを超えてわかっている場合のみです。 jQueryの。しかし、jQueryを使用している場合、他のいくつかの回答が示すように、おそらく「テキスト」関数を使用して$（ '＃myElement'）。text（ 'foo'）を実行します。

innerText Firefoxに追加され、FF45リリースで利用可能になるはずです。 https

ドラフト仕様が書かれており、将来的にはHTMLの生活水準に組み込まれることが予想される：http://rocallahan.github.io/innerText-spec/、https://github.com/whatwg/html/issues/ 465

現在、Firefox、Chrome、IEの実装はすべて互換性がないことに注意してください。今後は、Firefox、Chrome、およびEdgeが統合され、古いIEは互換性がないままになることが予想されます。

参照：https : //github.com/whatwg/compat/issues/5

このようなものはどうですか？

//$elem is the jQuery object passed along.

var $currentText = $elem.context.firstChild.data.toUpperCase();

**私は大文字にする必要がありました。

Firefox v45の2016年と同様に、FirefoxでinnerText動作します。そのサポートを確認してください：http : //caniuse.com/#search=innerText

以前のバージョンのFirefoxで動作させる場合はtextContent、を使用できます。これは、Firefoxでのサポートは優れていますが、古いIEバージョンではさらに劣ります。http：//caniuse.com/#search=textContent

これは私の経験されているinnerText、textContent、innerHTML、および値：

// elem.innerText = changeVal;  // works on ie but not on ff or ch
// elem.setAttribute("innerText", changeVal); // works on ie but not ff or ch
// elem.textContent = changeVal;  // works on ie but not ff or ch
// elem.setAttribute("textContent", changeVal);  // does not work on ie ff or ch
// elem.innerHTML = changeVal;  // ie causes error - doesn't work in ff or ch
// elem.setAttribute("innerHTML", changeVal); //ie causes error doesn't work in ff or ch
   elem.value = changeVal; // works in ie and ff -- see note 2 on ch
// elem.setAttribute("value", changeVal); // ie works; see note 1 on ff and note 2 on ch

ie = Internet Explorer、ff = firefox、ch = google chrome。注1：ffは、値がバックスペースで削除されるまで機能します-上記のレイベガによるメモを参照してください。注2：Chromeで多少動作します-更新後も変更されないため、クリックしてフィールドに戻り、値が表示されます。ロットの最高はelem.value = changeVal; 上記ではコメントアウトしていません。

元の投稿の下にあるコメントから再投稿するだけです。innerHTMLはすべてのブラウザで機能します。stefitaに感謝します。

myElement.innerHTML = "foo";

これをここに見つけました：

<!--[if lte IE 8]>
    <script type="text/javascript">
        if (Object.defineProperty && Object.getOwnPropertyDescriptor &&
            !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get)
          (function() {
            var innerText = Object.getOwnPropertyDescriptor(Element.prototype, "innerText");
            Object.defineProperty(Element.prototype, "textContent",
              { // It won't work if you just drop in innerText.get
                // and innerText.set or the whole descriptor.
                get : function() {
                  return innerText.get.call(this)
                },
                set : function(x) {
                  return innerText.set.call(this, x)
                }
              }
            );
          })();
    </script>
<![endif]-->

innerText他のブラウザで動作をエミュレートすることも可能です：

 if (((typeof window.HTMLElement) !== "undefined") && ((typeof HTMLElement.prototype.__defineGetter__) !== "undefined")) {
     HTMLElement.prototype.__defineGetter__("innerText", function () {
         if (this.textContent) {
             return this.textContent;
         } else {
             var r = this.ownerDocument.createRange();
             r.selectNodeContents(this);
             return r.toString();
         }
     });
     HTMLElement.prototype.__defineSetter__("innerText", function (str) {
         if (this.textContent) {
             this.textContent = str;
         } else {
             this.innerHTML = str.replace(/&/g, '&amp;').replace(/>/g, '&gt;').replace(/</g, '&lt;').replace(/\n/g, "<br />\n");
         }
     });
 }