web-dev-qa-db-ja.com

'innerText'はIEでは機能しますがFirefoxでは機能しません

私はIEで動作するJavaScriptコードをいくつか持っています。

myElement.innerText = "foo";

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

javascriptinternet-explorerfirefoxcross-browser
284
Ray Vega

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

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

247
Prakash K

更新： すべての違いを詳述したブログ記事 を書いた。

FirefoxはW3C標準のNode::textContentを使用しますが、その振る舞いはMSHTMLの独自のinnerText（昔は他のMSHTML機能の中でも同様にコピーされたもの）とは「わずかに」異なります。

まず第一に、textContentの空白表記はinnerTextと異なります。第二に、そしてもっと重要なことに、textContentはすべてのSCRIPTタグの内容を含みますが、innerTextは含みません。

もっと面白いものにするために、Operaは標準のtextContentを実装する以外に、MSHTMLのinnerTextも追加することにしましたが、textContentとして機能するように変更しました。 （実際、Operaの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からタグを単純に削除することがしばしば可能です。

もちろん、DOMツリーをたどってテキストノードを再帰的に収集する方法もあります。

277
kangax

テキストコンテンツを設定するだけで、取得する必要がない場合は、ここで簡単な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));
}
81
bobince

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

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

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

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

Javascriptの非常に単純な行は、すべてのメインブラウザで「タグのない」テキストを取得することができます。

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

Element::innerTextプロパティには、GoogleのCSSスタイル "display:none"で非表示になっているテキストがnotに含まれていることに注意してくださいChrome（同様に、他の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には余分な改行や空白は生成されません。これにより、すべてのスタイルと構造、インライン/ブロックまたは内部要素の配置タイプが無視されます。

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

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

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

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

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

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

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

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

編集（Mark Amery氏のコメントへの感謝）：（例えば） jQuery のように、コードがこれらのプロパティの存在をチェックすることに依存しないことを合理的な疑いを超えて知っている場合に限り、これを行ってください。 =ありません。しかし、jQueryを使っているのなら、他の答えが示すように、おそらく "text"関数を使って$（ '＃myElement'）。text（ 'foo'）を実行するだけでしょう。

5
Kwateco

innerTextがFirefoxに追加され、FF45リリースで利用可能になるはずです。 https://bugzilla.mozilla.org/show_bug.cgi?id=264412

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

現在、Firefox、Chrome、およびIEの実装はすべて互換性がありません。今後は、古いIEに互換性がないまま、Firefox、Chrome、Edgeが収束することを期待できます。

また参照してください： https://github.com/whatwg/compat/issues/5

4
Bob

Firefox v45以降の2016年のように、innerTextはFirefoxで動作します。そのサポートを見てください。 http://caniuse.com/#search=innerText

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

1
Vandervals

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

//$elem is the jQuery object passed along.

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

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

1
Webmaster G

これはinnerText、textContent、innerHTML、およびvalueに関する私の経験です。

// 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は機能します - 上記のRay Vegaによる注意を参照してください。注2：多少クロムで動作します - 更新後は変更されていないため、クリックして離れてフィールドに戻ると値が表示されます。一番良いのはelem.value = changeValです。私は上でコメントしませんでした。

0
gerard

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

myElement.innerHTML = "foo";

0
Leonid Alzhin