textContent と innerText: どちらを使用するべきですか?

textContent と innerText: JavaScript の違いを調べる

JavaScript では、HTML 要素のテキスト コンテンツを取得するには、textContent と innerText という 2 つの主要なオプションがあります。インナーテキスト。一見すると似ているように見えますが、この 2 つには微妙ですが重要な違いがあります。

innerText vs textContent

Kelly Norton のブログ投稿 (https://blog. kellynorton.com/2009/07/10/whats-the-difference-between-innertext-and-textcontent/) には、相違点の包括的な概要が記載されています:

• 起源と標準化: innerText は当初非標準プロパティとして導入されましたが、textContent はその後標準化されました。
• 返されるテキスト コンテンツ: innerText は、要素内に表示される表示テキストを取得します。表示のある要素は除きます。なし、またはその他の可視性修飾子。対照的に、textContent は、非表示部分やアクセスできない部分を含む完全なテキスト コンテンツを取得します。
• パフォーマンスに関する考慮事項: レイアウト情報に依存するため、innerText は textContent に比べてリソースを多く消費します。
• オブジェクトの互換性: innerText は HTMLElement オブジェクトに対してのみ定義されますが、textContent はすべての Node オブジェクトに対して定義されます。

使用上の考慮事項

例に示すように:

var logo$ = document.getElementsByClassName('logo')[0];
logo$.textContent = "Example";

textContent の使用は、要素のテキストコンテンツを設定するための許容可能な方法です。これにより、その要素内の表示テキストと非表示のコンテンツが効果的に変更されます。

ただし、IE8 などの古いブラウザとの互換性が不可欠な場合は、textContent を実装するためにベアメタル ポリフィルが必要になる可能性があることに注意することが重要です。機能。

以上がtextContent と innerText: どちらを使用するべきですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。