[解決済み] innerText vs innerHTML vs label vs text vs textContent vs outerText

質問

私は、Javascriptによって入力されるドロップダウンリストを持っています。

ロード時に表示するデフォルトの値を何にするか決めているときに、以下のプロパティがまったく同じ値を表示していることに気づきました。

• innerText
• innerHTML
• label
• text
• textContent
• outerText

私自身の調査では、いくつかのベンチマークのテストや比較はありますが、すべてではありません。

自分の常識で考えて、同じ結果だからどちらかを選べばいいのですが、もしデータが変わってしまったらどうしようという不安があります。

私の調査結果は

• innerText は値をそのまま表示し、含まれる可能性のあるHTMLフォーマットは無視されます。
• innerHTML は、値を表示し、任意の HTML フォーマットを適用します。
• label と同じに見える。 innerText ということで、違いがわかりません。
• text と同じに見える。 innerText が、jQueryのショートハンド版である
• textContent と同じに見える。 innerText のような書式を保持しますが \n )
• outerText と同じに見える。 innerText

私の研究は、私が思いつくものをテストしたり、出版物を読んだりすることしかできないので、ここまでしかできません。 label と outerText ?

解決方法は？

から MDN :

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

• textContent は、以下のようなすべての要素の内容を取得することに注意してください。 <script> と <style> 要素では、IE固有のプロパティであるinnerTextとほぼ同等ですが、そうではありません。

• innerTextはスタイルも意識しており、hidden要素のテキストを返しませんが、textContentは返します。

• innerTextはCSSのスタイリングを意識しているので、textContentがリフローを起こさないのに対して、innerTextはリフローを起こします。

そこで innerText はCSSで隠されているテキストを含めないが textContent となります。

innerHTMLはその名の通り、HTMLを返します。要素内のテキストを取得したり書き込んだりするためにinnerHTMLを使うことがよくありますが、代わりにtextContentを使うべきです。テキストはHTMLとしてパースされないので、パフォーマンスが良くなる可能性が高いです。さらに、これはXSS攻撃のベクトルを回避することにもなる。

念のため、もっとわかりやすく繰り返します。 する ない 使用 .innerHTML ただし、要素内にHTMLを挿入することを特に意図し、挿入するHTMLに悪意のあるコンテンツが含まれないことを保証するために必要な予防措置を講じた場合は、この限りではありません。テキストだけを挿入したい場合は .textContent またはIE8以前をサポートする必要がある場合は、機能検知を使用して .textContent と .innerText .

これほど多くのプロパティが存在する主な理由は、もともとブラウザによってこれらのプロパティの名前が異なっており、いまだにすべてのプロパティがクロスブラウザで完全にサポートされていないためである。jQueryを使用している場合は、以下のようにします。 .text() これは、クロスブラウザの差異を滑らかにするように設計されているからです*。

その他の一部について outerHTML とは基本的に同じです。 innerHTML ただし、所属する要素の開始タグと終了タグが含まれます。についての説明はあまり見当たりません。 outerText ということです。おそらく不明瞭なレガシー・プロパティで、避けるべきものだと思います。