innerText vs innerHTML vs label vs text vs textContent vs outerText

JavaScriptが入力されたドロップダウンリストがあります。

負荷時に表示するデフォルト値を決定する際、次のプロパティはまったく同じ値を示すことに気付きました。

• innerText
• innerHtml
• label
• text
• textContent
• outerText

私自身の調査では、ベンチマークテストまたはそれらのいくつかの間の比較を示していますが、すべてではありません。

私は自分の常識を使用して、同じ結果を提供するのでどちらか一方を選択できますが、データが変更された場合、これは良い考えではないのではないかと心配しています。

私の発見は：

• innerText 値をそのまま表示し、含まれている可能性のあるHTML形式を無視します
• innerHTML 値を表示し、HTMLフォーマットを適用します
• labelと同じようinnerTextに見えるので、違いがわかりません
• textinnerTextjQuery省略バージョンと同じように見えますが
• textContentと同じように見えますが、innerTextフォーマットを維持します（など\n）
• outerText と同じように見える innerText

私の研究は私の研究が正しければ、何の特別な約がある場合にも、これまでのところ私は私が考えるか公開されているものを読むことができるものをテストすることができるよういずれかの確認を私にすることができます取ることができますlabelとouterText？

MDNから：

Internet Explorerはelement.innerTextを導入しました。意図は[textContent]とほとんど同じですが、いくつかの違いがあります。

• textContentは<script>および<style>要素を含むすべての要素のコンテンツを取得しますが、ほとんど同等のIE固有のプロパティであるinnerTextは取得しません。

• innerTextもスタイルを認識し、非表示要素のテキストを返しませんが、textContentは返します。

• innerTextはCSSスタイルを認識しているため、リフローをトリガーしますが、textContentはトリガーしません。

したがってinnerText、CSSによって非表示になっているテキストは含まれませんが、含まれますtextContent。

innerHTMLは、その名前が示すとおりにHTMLを返します。多くの場合、要素内のテキストを取得または書き込むために、innerHTMLを使用します。代わりにtextContentを使用する必要があります。テキストはHTMLとして解析されないため、パフォーマンスが向上する可能性があります。さらに、これによりXSS攻撃ベクトルが回避されます。

あなたはそれを逃した場合、私はより明確にそれを繰り返すみましょう：Doがない使用.innerHTMLあなたが、具体的要素内にHTMLを挿入しようとすると、あなたが挿入されているHTMLは、悪質なコンテンツが含まれていないことを保証するために必要な事前注意を受けている場合を除きます。テキストのみを挿入する.textContent場合、またはIE8以前をサポートする必要がある場合は、機能検出を使用して.textContentとをオフに切り替え.innerTextます。

非常に多くの異なるプロパティがある主な理由は、ブラウザーごとにこれらのプロパティの名前が元々異なっていたにもかかわらず、それらのすべてに対する完全なクロスブラウザーサポートがまだないためです。jQueryを使用している場合は、.text()ブラウザ間の違いを滑らかにするように設計されているため、jQueryを使用する必要があります。*

他のいくつかの場合：outerHTMLがinnerHTML属する要素の開始タグと終了タグが含まれていることを除いて、基本的にと同じです。outerText全然説明がつかないようです。これはおそらくあいまいなレガシープロパティであり、回避する必要があります。

ドロップダウンリストはOptionオブジェクトのコレクションで構成されているため、.textプロパティを使用して要素のテキスト表現を検査する必要があります。

<option value="123">text goes here</option>
                    ^^^^^^^^^^^^^^

ところで、

.text.innerTextJQueryの省略バージョンと同じであるように見える

それは正しくありません。$(element).text()はjQueryバージョンelement.textですが、プロパティアクセスバージョンです。

JLRisheのその他の優れた答えの補遺：

innerTextとouterTextの両方が存在する理由は、innerHTMLとouterHTMLとの対称性のためです。これは、プロパティに割り当てるときに重要になります。

eHTMLコードの要素があるとします<b>Lorem Ipsum</b>。

e.innerHTML = "<i>Hello</i> World!"; => <b><i>Hello</i> World!</b>
e.outerHTML = "<i>Hello</i> World!"; =>    <i>Hello</i> World!
e.innerText = "Hello World!";        => <b>Hello World!</b>
e.outerText = "Hello World!";        =>    Hello World!

textContent フォーマットしません（\ n）

特定のブラウザーをターゲットにしている場合は、ブラウザーの互換性http://www.quirksmode.org/dom/html/を参照してください。なぜなら、彼ら全員が独自のやり方をしているように見えるからです。そのため、いじくり回したくない場合は、JQuery .text（）（http://api.jquery.com/text/）を使用する方が適切です。

textlabel余分なスペースを削除します。ドロップダウンでオプションをクエリすると、次の結果が得られました。

e.textContent = "A    B C   D     "
e.text = "A B C D"
e.label = "A B C D"